blocks|key|1424005|text|在常规的textarea中不可能实现对表示的所需级别的控制。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1424006|如果您对此没有意见，可以尝试使用CodeMirror、Ace或Monaco+(在MS+VSCode中使用)。|1424007|来自重复的线程-一个必须的维基百科链接：Comparison+of+JavaScript-based+source+code+editors|1424008|entityMap|0|LINK|mutability|MUTABLE|url|http://codemirror.net/|1|https://ace.c9.io/|2|https://microsoft.github.io/monaco-editor/|3|http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors^0|4|8|0|G|A|0|R|3|1|V|6|2|0|K|1E|3|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]|$9|14|A|15|1|16]|$9|17|A|18|1|19]]|E|$]]|$1|H|3|I|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|J|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]|T|$5|M|N|O|E|$P|U]]|V|$5|M|N|O|E|$P|W]]]]

<p>It's not possible to achieve the required level of control over presentation in a regular <code>textarea</code>.</p>
<p>If you're OK with that, try <a href="http://codemirror.net/" rel="noreferrer">CodeMirror</a> or <a href="https://ace.c9.io/" rel="noreferrer">Ace</a>  or <a href="https://microsoft.github.io/monaco-editor/" rel="noreferrer">Monaco</a> (used in MS VSCode).</p>
<p>From the duplicate thread - an obligatory wikipedia link: <a href="http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors" rel="noreferrer">Comparison of JavaScript-based source code editors</a></p>


blocks|key|1424245|text|与EditArea一样，CodePress也是这样做的。两者都是开源的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1424246|entityMap|0|LINK|mutability|MUTABLE|url|http://www.cdolivet.com/index.php?page=editArea|1|http://sourceforge.net/projects/codepress/^0|1|8|0|C|9|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p><a href="http://sourceforge.net/projects/codepress/" rel="noreferrer">CodePress</a> does this, as does <a href="http://www.cdolivet.com/index.php?page=editArea" rel="noreferrer">EditArea</a>. Both are open source.</p>


blocks|key|1424172|text|我推荐使用EditArea来实时编辑语法高亮的文本区域。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1424173|entityMap|0|LINK|mutability|MUTABLE|url|http://www.cdolivet.com/index.php?page=editArea^0|5|8|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>I would recommend <a href="http://www.cdolivet.com/index.php?page=editArea" rel="noreferrer">EditArea</a> for live editing of a syntax hightlighted textarea.</p>


blocks|key|1424096|text|据我所知，Mozilla+Bespin是唯一一个具有语法突出显示和文本区回退功能的编辑器。在谷歌上搜索一下嵌入Bespin，看看如何嵌入编辑器。据我所知，目前唯一使用此功能的网站是非常alpha+Mozilla+Jetpack+Gallery+(在提交Jetpack页面中)，您可能想看看他们是如何包含此功能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1424097|还有一个blog+post+on+embedding+and+reusing+the+Bespin+editor可能会对你有所帮助。|1424098|entityMap|0|LINK|mutability|MUTABLE|url|https://bespin.mozilla.com/|1|http://jetpack.stage.mozilla.com/|2|http://almaer.com/blog/embedding-and-reusing-the-bespin-editor-component^0|5|E|0|2Q|N|1|0|4|1G|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]|$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

<p>The only editor I know of that has syntax highlighting and a fallback to a textarea is <a href="https://bespin.mozilla.com/" rel="nofollow noreferrer">Mozilla Bespin</a>. Google around for embedding Bespin to see how to embed the editor. The only site I know of that uses this right now is the very alpha <a href="http://jetpack.stage.mozilla.com/" rel="nofollow noreferrer">Mozilla Jetpack Gallery</a> (in the submit a Jetpack page) and you may want to see how they include it.</p>

<p>There's also a <a href="http://almaer.com/blog/embedding-and-reusing-the-bespin-editor-component" rel="nofollow noreferrer">blog post on embedding and reusing the Bespin editor</a> that may help you.</p>


blocks|key|1424349|text|实际上，你不能在一个文本区域中呈现标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1424350|但是，您可以通过小心地在文本区域后面放置一个div并在其中添加突出显示标记来伪造它。|1424351|JavaScript负责同步内容和滚动位置。|1424352|​|1424353|var+$container+=+$('.container');
var+$backdrop+=+$('.backdrop');
var+$highlights+=+$('.highlights');
var+$textarea+=+$('textarea');
var+$toggle+=+$('button');


var+ua+=+window.navigator.userAgent.toLowerCase();
var+isIE+=+!!ua.match(/msie%7Ctrident\/7%7Cedge/);
var+isWinPhone+=+ua.indexOf('windows+phone')+!==+-1;
var+isIOS+=+!isWinPhone+&&+!!ua.match(/ipad%7Ciphone%7Cipod/);

function+applyHighlights(text)+{
++text+=+text
++++.replace(/\n$/g,+'\n\n')
++++.replace(/[A-Z].*?\b/g,+'<mark>$&</mark>');

++if+(isIE)+{
++++//+IE+wraps+whitespace+differently+in+a+div+vs+textarea,+this+fixes+it
++++text+=+text.replace(/+/g,+'+<wbr>');
++}

++return+text;
}

function+handleInput()+{
++var+text+=+$textarea.val();
++var+highlightedText+=+applyHighlights(text);
++$highlights.html(highlightedText);
}

function+handleScroll()+{
++var+scrollTop+=+$textarea.scrollTop();
++$backdrop.scrollTop(scrollTop);

++var+scrollLeft+=+$textarea.scrollLeft();
++$backdrop.scrollLeft(scrollLeft);
}

function+fixIOS()+{
++$highlights.css({
++++'padding-left':+'%2B=3px',
++++'padding-right':+'%2B=3px'
++});
}

function+bindEvents()+{
++$textarea.on({
++++'input':+handleInput,
++++'scroll':+handleScroll
++});
}

if+(isIOS)+{
++fixIOS();
}

bindEvents();
handleInput();|code-block|syntax|javascript|1424354|@import+url(https://fonts.googleapis.com/css?family=Open%2BSans);
*,
*::before,
*::after+{
++box-sizing:+border-box;
}

body+{
++margin:+30px;
++background-color:+#fff;
++caret-color:+#000;
}

.container,
.backdrop,
textarea+{
++width:+460px;
++height:+180px;
}

.highlights,
textarea+{
++padding:+10px;
++font:+20px/28px+'Open+Sans',+sans-serif;
++letter-spacing:+1px;
}

.container+{
++display:+block;
++margin:+0+auto;
++transform:+translateZ(0);
++-webkit-text-size-adjust:+none;
}

.backdrop+{
++position:+absolute;
++z-index:+1;
++border:+2px+solid+#685972;
++background-color:+#fff;
++overflow:+auto;
++pointer-events:+none;
++transition:+transform+1s;
}

.highlights+{
++white-space:+pre-wrap;
++word-wrap:+break-word;
++color:+#000;
}

textarea+{
++display:+block;
++position:+absolute;
++z-index:+2;
++margin:+0;
++border:+2px+solid+#74637f;
++border-radius:+0;
++color:+transparent;
++background-color:+transparent;
++overflow:+auto;
++resize:+none;
++transition:+transform+1s;
}

mark+{
++border-radius:+3px;
++color:+red;
++background-color:+transparent;
}|1424355|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+class="container">
++<div+class="backdrop">
++++<div+class="highlights"></div>
++</div>
++<textarea>All+capitalized+Words+will+be+highlighted.+Try+Typing+to+see+how+it+Works</textarea>
</div>|1424356|1424357|原创笔：https://codepen.io/lonekorean/pen/gaLEMR|offset|length|1424358|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/lonekorean/pen/gaLEMR^0|0|0|0|0|0|0|0|0|4|14|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|O|3|P|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|Q|3|G|5|6|7|1A|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1B|8|@]|9|@$T|1C|U|1D|1|1E]]|A|$]]|$1|V|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

<p>You can't actually render markup inside a textarea.</p>
<p>But, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there.</p>
<p>JavaScript takes care of syncing the content and scroll position.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('textarea');
var $toggle = $('button');


var ua = window.navigator.userAgent.toLowerCase();
var isIE = !!ua.match(/msie|trident\/7|edge/);
var isWinPhone = ua.indexOf('windows phone') !== -1;
var isIOS = !isWinPhone &amp;&amp; !!ua.match(/ipad|iphone|ipod/);

function applyHighlights(text) {
  text = text
    .replace(/\n$/g, '\n\n')
    .replace(/[A-Z].*?\b/g, '&lt;mark&gt;$&amp;&lt;/mark&gt;');

  if (isIE) {
    // IE wraps whitespace differently in a div vs textarea, this fixes it
    text = text.replace(/ /g, ' &lt;wbr&gt;');
  }

  return text;
}

function handleInput() {
  var text = $textarea.val();
  var highlightedText = applyHighlights(text);
  $highlights.html(highlightedText);
}

function handleScroll() {
  var scrollTop = $textarea.scrollTop();
  $backdrop.scrollTop(scrollTop);

  var scrollLeft = $textarea.scrollLeft();
  $backdrop.scrollLeft(scrollLeft);
}

function fixIOS() {
  $highlights.css({
    'padding-left': '+=3px',
    'padding-right': '+=3px'
  });
}

function bindEvents() {
  $textarea.on({
    'input': handleInput,
    'scroll': handleScroll
  });
}

if (isIOS) {
  fixIOS();
}

bindEvents();
handleInput();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 30px;
  background-color: #fff;
  caret-color: #000;
}

.container,
.backdrop,
textarea {
  width: 460px;
  height: 180px;
}

.highlights,
textarea {
  padding: 10px;
  font: 20px/28px 'Open Sans', sans-serif;
  letter-spacing: 1px;
}

.container {
  display: block;
  margin: 0 auto;
  transform: translateZ(0);
  -webkit-text-size-adjust: none;
}

.backdrop {
  position: absolute;
  z-index: 1;
  border: 2px solid #685972;
  background-color: #fff;
  overflow: auto;
  pointer-events: none;
  transition: transform 1s;
}

.highlights {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #000;
}

textarea {
  display: block;
  position: absolute;
  z-index: 2;
  margin: 0;
  border: 2px solid #74637f;
  border-radius: 0;
  color: transparent;
  background-color: transparent;
  overflow: auto;
  resize: none;
  transition: transform 1s;
}

mark {
  border-radius: 3px;
  color: red;
  background-color: transparent;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="container"&gt;
  &lt;div class="backdrop"&gt;
    &lt;div class="highlights"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;textarea&gt;All capitalized Words will be highlighted. Try Typing to see how it Works&lt;/textarea&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Original Pen: <a href="https://codepen.io/lonekorean/pen/gaLEMR" rel="nofollow noreferrer">https://codepen.io/lonekorean/pen/gaLEMR</a></p>


blocks|key|1423905|text|为什么你要把它们表示为文本？这是我最喜欢的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1423906|http://alexgorbatchev.com/wiki/SyntaxHighlighter|offset|length|1423907|但是如果你使用的是CMS，可能有一个更好的插件。例如，wordpress有一个演进版本：|1423908|http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/|1423909|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1C|0|0|0|0|1S|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|I]]]]

<p>Why are you representing them as textareas? This is my favorite:</p>

<p><a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter" rel="nofollow noreferrer">http://alexgorbatchev.com/wiki/SyntaxHighlighter</a></p>

<p>But if you are using a CMS, there's probably a better plugin. For example, wordpress has an evolved version:</p>

<p><a href="http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/" rel="nofollow noreferrer">http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/</a></p>


blocks|key|1424448|text|这可以通过在文本区域前面添加一个覆盖code块来实现，并使用它来应用语法突出显示，正如其他几个人所提到的那样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1424449|然而，有一些边缘情况需要处理。本文将详细介绍它们：https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code|1424450|值得庆幸的是，作者将其创建为一个自定义元素https://github.com/WebCoder49/code-input|1424451|使用示例https://codepen.io/WebCoder49/pen/jOypJOx|1424452|​|1424453|📷|atomic|1424454|1424455|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code|1|https://github.com/WebCoder49/code-input|2|https://codepen.io/WebCoder49/pen/jOypJOx|3|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/98d7f1e80527ef94e15cf38b825f4910.png|imageAlt^0|I|4|0|P|2I|0|0|L|14|1|0|4|15|2|0|0|0|1|3|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|H|3|I|5|6|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|J|3|K|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|L|3|M|5|6|7|1O|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1P|8|@]|D|@$9|1Q|A|1R|1|1S]]|E|$]]|$1|Q|3|M|5|6|7|1T|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]|11|$5|U|V|W|E|$X|12]]|13|$5|14|V|15|E|$16|17|18|-4]]]]

<p>This is doable by adding an overlay <code>code</code> block infront of textarea, and use that to apply syntax highlighting as mentioned by couple of others.</p>
<p>However there are some edge cases to take care of.
This article goes in detail about them:
<a href="https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code" rel="nofollow noreferrer">https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code</a></p>
<p>Thankfully, author has created it as a custom element
<a href="https://github.com/WebCoder49/code-input" rel="nofollow noreferrer">https://github.com/WebCoder49/code-input</a></p>
<p>Usage example
<a href="https://codepen.io/WebCoder49/pen/jOypJOx" rel="nofollow noreferrer">https://codepen.io/WebCoder49/pen/jOypJOx</a></p>
<p><a href="https://i.stack.imgur.com/QGZIa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QGZIa.png" alt="demo of content editable" /></a></p>


<p>I am storing a number of HTML blocks inside a CMS for reasons of easier maintenance. They are represented by <code>&lt;textarea&gt;</code>s.</p>

<p>Does anybody know a JavaScript Widget of some sort that can do syntax highlighting for HTML within a <code>textarea</code> or similar, while still staying a plain text editor (no WYSIWYG or advanced functions)?</p>


Textarea that can do syntax highlighting on the fly?

为了便于维护，我在CMS中存储了大量的HTML块。它们由<textarea>s表示。有没有人知道某种HTML可以在textarea或类似的地方进行语法高亮显示，同时仍然是一个纯文本编辑器(没有所见即所得或高级功能)？

问可以动态高亮显示语法的Textarea？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以动态高亮显示语法的Textarea？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以动态高亮显示语法的Textarea？
EN