Cómo preformatear dentro de textarea

Me preguntaba si era posible preformatear el texto que está dentro de un área de texto. En este momento tengo un código de área de texto en el que quiero agregar un resaltado de sintaxis y también agrego lienzos, así que estoy tratando de ajustar el texto dentro de una etiqueta previa. ¿Es correcto o debería estar haciendo algo completamente diferente?Cómo preformatear dentro de textarea

<textarea id="conversation" class="codebox" style="font-family:courier;"> 
<pre class="brush: js;">// Start typing...</pre> 
</textarea>

Fuente

2012-03-19 jmnwong

Desafortunadamente no se puede hacer esto con un área de texto. Cualquier cosa entre las etiquetas '' se toma literalmente como texto. Tendría que escribir su propio editor, o usar uno pre-construido, que le da a textareas algún tipo de capacidad RTE. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/383609/">Bojangles</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Creo que estás buscando un editor de código en el navegador. Pruebe [CodeMirror] (http://codemirror.net/mode/javascript/index.html). – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="answer-title"> <span class="text-logo margin-top-sm">A</span> <h2 class="title h4">Respuesta</h2> </div> <div class="item-description text-md markdown-body margin-bottom-40 voidso"> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">3<i class="fa fa-thumbs-up"></i></span> <i class="fa fa-check fa-2x"></i> </div> <div class="post-offset"> <div class="answer fmt"> <p><code class="prettyprint-override">textarea</code> s no son capaces de representar el contenido que estás con ganas de hacer, sólo muestran texto. Sugeriría un editor de código en el navegador. Una buena es <a href="http://codemirror.net/mode/javascript/index.html" rel="nofollow">CodeMirror</a>, que es bastante fácil de usar:</p> <p><strong>HTML</strong></p> <pre><code class="prettyprint-override"><textarea id="code" name="code"> // Demo code (the actual new parser character stream implementation) function StringStream(string) { this.pos = 0; this.string = string; } ... </textarea> </code></pre> <p><strong>Javascript</strong></p> <pre><code class="prettyprint-override">var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, matchBrackets: true }); </code></pre> <p>Y CodeMirror insertar un bloque editable con ese contenido dentro del nuevo editor .</p> <p>Hay otras opciones. Wikipedia tiene un <a href="http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors" rel="nofollow">comparison of <em>Javascript-based source code editors</em> entry</a>.</p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/9763611">Fuente</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2012-03-19 00:29:55</span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> </div> </article> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1038284119" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">0<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>El contenido del elemento <code class="prettyprint-override">textarea</code> se trata como preformateado en las implementaciones, aunque los navegadores por línea predeterminada envuelven el texto si una línea es más larga que la especificada por el atributo <code class="prettyprint-override">cols</code>. La envoltura se puede desactivar utilizando el atributo <code class="prettyprint-override">wrap=off</code> no estándar pero ampliamente compatible.</p> <p>Sin embargo, el elemento textarea no es adecuado para la mera visualización de contenido. Tampoco es adecuado para configurar un editor de entrada con características de formateo, ya que todo el marcado dentro de <code class="prettyprint-override">textarea</code> se toma literalmente.</p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/9765753">Fuente</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2012-03-19 06:11:02</span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> </div> </article> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">0<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>Tener la etiqueta Pre contener el textarea funciona en Chrome</p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/31815889">Fuente</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2015-08-04 17:44:45</span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> </div> </article> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">Cuestiones relacionadas</div> <ul class="relative_list"> <li> 1. <a href="http://es.uwenku.com/question/p-zbvcgeby-o.html" target="_blank" title="Colocar texto dentro de textarea en FireFox"> Colocar texto dentro de textarea en FireFox </a> </li> <li> 2. <a href="http://es.uwenku.com/question/p-plqqujrh-bp.html" target="_blank" title="Texto enriquecido en HTML5 dentro de textarea"> Texto enriquecido en HTML5 dentro de textarea </a> </li> <li> 3. <a href="http://es.uwenku.com/question/p-zimrzjng-z.html" target="_blank" title="Sangría de todas las líneas dentro de textarea"> Sangría de todas las líneas dentro de textarea </a> </li> <li> 4. <a href="http://es.uwenku.com/question/p-atazonqc-bu.html" target="_blank" title="Barra de desplazamiento Textarea"> Barra de desplazamiento Textarea </a> </li> <li> 5. <a href="http://es.uwenku.com/question/p-fhdwjbbc-e.html" target="_blank" title="Agregue el enlace para que aparezca dentro del recuadro textarea"> Agregue el enlace para que aparezca dentro del recuadro textarea </a> </li> <li> 6. <a href="http://es.uwenku.com/question/p-aymjhnnk-x.html" target="_blank" title="¿Cómo imprimir texto desde textarea?"> ¿Cómo imprimir texto desde textarea? </a> </li> <li> 7. <a href="http://es.uwenku.com/question/p-nizbdqmh-bh.html" target="_blank" title="Textarea resize"> Textarea resize </a> </li> <li> 8. <a href="http://es.uwenku.com/question/p-kdigffuc-bs.html" target="_blank" title="Cakephp textarea"> Cakephp textarea </a> </li> <li> 9. <a href="http://es.uwenku.com/question/p-ekxzpvpr-bc.html" target="_blank" title="Textarea Aumento de altura"> Textarea Aumento de altura </a> </li> <li> 10. <a href="http://es.uwenku.com/question/p-oqwqoseu-bb.html" target="_blank" title="jQuery get textarea text"> jQuery get textarea text </a> </li> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4606349252"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <li> 11. <a href="http://es.uwenku.com/question/p-ugtptmic-a.html" target="_blank" title="¿Cómo reemplazar el texto seleccionado actualmente dentro de un html textarea?"> ¿Cómo reemplazar el texto seleccionado actualmente dentro de un html textarea? </a> </li> <li> 12. <a href="http://es.uwenku.com/question/p-dpvketjy-bk.html" target="_blank" title="¿Cómo obtener el HTML antes, dentro y después de una selección (no en textarea)?"> ¿Cómo obtener el HTML antes, dentro y después de una selección (no en textarea)? </a> </li> <li> 13. <a href="http://es.uwenku.com/question/p-argxlnhr-bw.html" target="_blank" title="html/css cómo alinear (medio) verticalmente el texto dentro de un <textarea>"> html/css cómo alinear (medio) verticalmente el texto dentro de un <textarea> </a> </li> <li> 14. <a href="http://es.uwenku.com/question/p-ulwikgqc-bk.html" target="_blank" title="Textarea contenteditable"> Textarea contenteditable </a> </li> <li> 15. <a href="http://es.uwenku.com/question/p-prjqotzj-o.html" target="_blank" title="Cómo llegar al final de la TextArea"> Cómo llegar al final de la TextArea </a> </li> <li> 16. <a href="http://es.uwenku.com/question/p-awjpbila-e.html" target="_blank" title="Cómo obtener el valor de Codemirror textarea"> Cómo obtener el valor de Codemirror textarea </a> </li> <li> 17. <a href="http://es.uwenku.com/question/p-mlljiani-y.html" target="_blank" title="¿Cómo deshabilitar el redimensionamiento de textarea?"> ¿Cómo deshabilitar el redimensionamiento de textarea? </a> </li> <li> 18. <a href="http://es.uwenku.com/question/p-nepxjhyw-bw.html" target="_blank" title="CodeMirror (JS Code Highlight) texto en textarea excede textarea ancho"> CodeMirror (JS Code Highlight) texto en textarea excede textarea ancho </a> </li> <li> 19. <a href="http://es.uwenku.com/question/p-mlgdusml-bm.html" target="_blank" title="Javascript detectar barra de desplazamiento en textarea"> Javascript detectar barra de desplazamiento en textarea </a> </li> <li> 20. <a href="http://es.uwenku.com/question/p-xuxtwrsa-bp.html" target="_blank" title="textarea :: selection y :: - moz-selection"> textarea :: selection y :: - moz-selection </a> </li> <li> 21. <a href="http://es.uwenku.com/question/p-fjfrcqmk-a.html" target="_blank" title="Codificación de caracteres de textarea"> Codificación de caracteres de textarea </a> </li> <li> 22. <a href="http://es.uwenku.com/question/p-shktugez-z.html" target="_blank" title="Asp.net MVC TextArea"> Asp.net MVC TextArea </a> </li> <li> 23. <a href="http://es.uwenku.com/question/p-dcnnrxxe-bt.html" target="_blank" title="Textarea onchange detección"> Textarea onchange detección </a> </li> <li> 24. <a href="http://es.uwenku.com/question/p-kvdszjod-bp.html" target="_blank" title="Deshabilitado Desplazable Textarea"> Deshabilitado Desplazable Textarea </a> </li> <li> 25. <a href="http://es.uwenku.com/question/p-ecsjteuv-bw.html" target="_blank" title="JavaFX TextArea onChange eventos"> JavaFX TextArea onChange eventos </a> </li> <li> 26. <a href="http://es.uwenku.com/question/p-pgrxjwye-be.html" target="_blank" title="tinyMCE textarea focusout event?"> tinyMCE textarea focusout event? </a> </li> <li> 27. <a href="http://es.uwenku.com/question/p-avtvvcxv-be.html" target="_blank" title="Firefox cache textarea value?"> Firefox cache textarea value? </a> </li> <li> 28. <a href="http://es.uwenku.com/question/p-xyptsfue-o.html" target="_blank" title="¿Por qué textarea no es una entrada [type = "textarea"]?"> ¿Por qué textarea no es una entrada [type = "textarea"]? </a> </li> <li> 29. <a href="http://es.uwenku.com/question/p-zhgjmfcp-w.html" target="_blank" title="HTML: ¿Cómo conservar el formato en textarea?"> HTML: ¿Cómo conservar el formato en textarea? </a> </li> <li> 30. <a href="http://es.uwenku.com/question/p-wfbrgfqg-q.html" target="_blank" title="WTForms-¿Cómo prepobular un campo textarea?"> WTForms-¿Cómo prepobular un campo textarea? </a> </li> </ul> </div> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1575177025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img.uwenku.com/uwenku/script/side.js?t=1644592048471"></script> <script type="text/javascript" src="http://img.uwenku.com/uwenku/plugin/highlight/highlight.pack.js"></script> <link href="http://img.uwenku.com/uwenku/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="5415218910" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Última pregunta </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://es.uwenku.com/question/p-gviusopc-bw.html" target="_blank" title="¿Cómo manejar un repositorio grande de git?"> ¿Cómo manejar un repositorio grande de git? </a> </li> <li class="side_article_list_item"> 2. <a href="http://es.uwenku.com/question/p-vuqfanhi-br.html" target="_blank" title="Bitmap.createBitmap (fuente de mapa de bits, int x, int y, int ancho, int altura) volver mapa de bits mal"> Bitmap.createBitmap (fuente de mapa de bits, int x, int y, int ancho, int altura) volver mapa de bits mal </a> </li> <li class="side_article_list_item"> 3. <a href="http://es.uwenku.com/question/p-fduasgyz-bc.html" target="_blank" title="operador C# AND con comprobación nula"> operador C# AND con comprobación nula </a> </li> <li class="side_article_list_item"> 4. <a href="http://es.uwenku.com/question/p-cvienxne-y.html" target="_blank" title="Uso knockout js con deslizadores jquery ui"> Uso knockout js con deslizadores jquery ui </a> </li> <li class="side_article_list_item"> 5. <a href="http://es.uwenku.com/question/p-kyxtvotb-v.html" target="_blank" title="Cómo contar si hay varias columnas?"> Cómo contar si hay varias columnas? </a> </li> <li class="side_article_list_item"> 6. <a href="http://es.uwenku.com/question/p-yicvmwoz-o.html" target="_blank" title="propiedades requeridas en tipos complejos opcionales de Entity Framework"> propiedades requeridas en tipos complejos opcionales de Entity Framework </a> </li> <li class="side_article_list_item"> 7. <a href="http://es.uwenku.com/question/p-wlabrgpd-bt.html" target="_blank" title="Borde alrededor de la etiqueta li"> Borde alrededor de la etiqueta li </a> </li> <li class="side_article_list_item"> 8. <a href="http://es.uwenku.com/question/p-yuuzptue-bm.html" target="_blank" title="Servidor de medios para webrtc para la conexión peer to peer"> Servidor de medios para webrtc para la conexión peer to peer </a> </li> <li class="side_article_list_item"> 9. <a href="http://es.uwenku.com/question/p-msppadhb-bm.html" target="_blank" title="¿El comando COPY correcto para cargar datos de PostgreSQL del archivo csv que tiene datos de una sola cita?"> ¿El comando COPY correcto para cargar datos de PostgreSQL del archivo csv que tiene datos de una sola cita? </a> </li> <li class="side_article_list_item"> 10. <a href="http://es.uwenku.com/question/p-fukjvqne-bh.html" target="_blank" title="Extracto de cada valor de una propiedad única de una serie de objetos en jQuery"> Extracto de cada valor de una propiedad única de una serie de objetos en jQuery </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Cuestiones relacionadas</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://es.uwenku.com/question/p-zbvcgeby-o.html" target="_blank" title="Colocar texto dentro de textarea en FireFox"> Colocar texto dentro de textarea en FireFox </a> </li> <li class="side_article_list_item"> 2. <a href="http://es.uwenku.com/question/p-plqqujrh-bp.html" target="_blank" title="Texto enriquecido en HTML5 dentro de textarea"> Texto enriquecido en HTML5 dentro de textarea </a> </li> <li class="side_article_list_item"> 3. <a href="http://es.uwenku.com/question/p-zimrzjng-z.html" target="_blank" title="Sangría de todas las líneas dentro de textarea"> Sangría de todas las líneas dentro de textarea </a> </li> <li class="side_article_list_item"> 4. <a href="http://es.uwenku.com/question/p-atazonqc-bu.html" target="_blank" title="Barra de desplazamiento Textarea"> Barra de desplazamiento Textarea </a> </li> <li class="side_article_list_item"> 5. <a href="http://es.uwenku.com/question/p-fhdwjbbc-e.html" target="_blank" title="Agregue el enlace para que aparezca dentro del recuadro textarea"> Agregue el enlace para que aparezca dentro del recuadro textarea </a> </li> <li class="side_article_list_item"> 6. <a href="http://es.uwenku.com/question/p-aymjhnnk-x.html" target="_blank" title="¿Cómo imprimir texto desde textarea?"> ¿Cómo imprimir texto desde textarea? </a> </li> <li class="side_article_list_item"> 7. <a href="http://es.uwenku.com/question/p-nizbdqmh-bh.html" target="_blank" title="Textarea resize"> Textarea resize </a> </li> <li class="side_article_list_item"> 8. <a href="http://es.uwenku.com/question/p-kdigffuc-bs.html" target="_blank" title="Cakephp textarea"> Cakephp textarea </a> </li> <li class="side_article_list_item"> 9. <a href="http://es.uwenku.com/question/p-ekxzpvpr-bc.html" target="_blank" title="Textarea Aumento de altura"> Textarea Aumento de altura </a> </li> <li class="side_article_list_item"> 10. <a href="http://es.uwenku.com/question/p-oqwqoseu-bb.html" target="_blank" title="jQuery get textarea text"> jQuery get textarea text </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://es.uwenku.com/contact">Contactanos</a></li> <li>© 2020 ES.UWENKU.COM</li> <li><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备13005482号-4</a></li> <li><script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280101193&web_id=1280101193"></script></li> <li><a href="http://www.uwenku.com/" target="_blank" title="优文库">简体中文</a></li> <li><a href="http://hk.uwenku.com/" target="_blank" title="優文庫">繁體中文</a></li> <li><a href="http://ru.uwenku.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.uwenku.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.uwenku.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.uwenku.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.uwenku.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.uwenku.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.uwenku.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.uwenku.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.uwenku.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.uwenku.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.uwenku.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f78a970f17b19a79fc477a3378096f29"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>