为什么要将它们表示为文本区域?这是我最喜欢的:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

但如果你使用的是CMS，可能有更好的插件。例如，wordpress有一个进化的版本:

http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

在常规的文本区域中，不可能实现对表示的所需级别的控制。

如果你觉得没问题，试试CodeMirror或Ace或Monaco(在MS VSCode中使用)。

来自重复的线程-一个强制性的维基百科链接:基于javascript的源代码编辑器的比较

我所知道的唯一具有语法高亮显示和回退到文本区域的编辑器是Mozilla Bespin。谷歌来嵌入Bespin，以了解如何嵌入编辑器。目前我所知道的唯一使用这个功能的网站是alpha Mozilla Jetpack Gallery(在提交Jetpack页面中)，你可能想看看他们是如何包含它的。

还有一篇关于嵌入和重用Bespin编辑器的博文可能会对您有所帮助。

我推荐使用EditArea进行语法高亮文本区域的实时编辑。

更新:Bespin现在是ACE，这里评分最高的答案提到了它。使用ACE代替。

我得选Mozilla的Bespin。它是用HTML5的特性构建的(所以它又快又快，但不支持传统浏览器)，但使用起来绝对令人惊叹，打败了我遇到的所有东西——可能是因为它是Mozilla支持的，他们开发了Firefox，所以是的……还有一个jQuery插件，它包含一个扩展，使它更容易使用jQuery。

CodePress做到了这一点，EditArea也是如此。两者都是开源的。

以下是我对程序员的类似问题(在线代码编辑器)的回答:

首先，你可以看看这篇文章: Wikipedia -基于javascript的源代码编辑器的比较。

为了了解更多，这里有一些工具似乎适合你的要求:

EditArea ― Demo as FileEditor who is a Yii Extension ― (Apache Software License, BSD, LGPL) Here is EditArea, a free javascript editor for source code. It allow to write well formated source code with line numerotation, tab support, search & replace (with regexp) and live syntax highlighting (customizable). CodePress ― Demo of Joomla! CodePress Plugin ― (LGPL) ― It doesn't work in Chrome and it looks like development has ceased. CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it's being typed in the browser. CodeMirror ― One of the many demo ― (MIT-style license + optional commercial support) CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a mode has been written for the language you are editing, the code will be coloured, and the editor will optionally help you with indentation Ace Ajax.org Cloud9 Editor ― Demo ― (Mozilla tri-license (MPL/GPL/LGPL)) Ace is a standalone code editor written in JavaScript. Our goal is to create a web based code editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse. It can be easily embedded in any web page and JavaScript application. Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter (Bespin) Project.

你可以突出显示<textarea>中的文本，使用一个<div>小心地放在它后面。

检查突出文本在文本区域。

你不能在文本区域中渲染标记。

但是，你可以通过小心地在文本区域后面放置一个div并在那里添加高亮标记来伪造它。

JavaScript负责同步内容和滚动位置。

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 && !!ua.match(/ipad|iphone|ipod/); 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': '+=3px', 'padding-right': '+=3px' }); } function bindEvents() { $textarea.on({ 'input': handleInput, 'scroll': handleScroll }); } if (isIOS) { fixIOS(); } bindEvents(); handleInput(); @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; } <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>

原笔:https://codepen.io/lonekorean/pen/gaLEMR

总之，以下是我们可以选择的:

Highlight.js Prism.js & Microlight.js 谷歌prettyprint Pygments.org Hilite.me Microlight.js 否则，你可以尝试一个轻量级的定制- https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/

为了节省您的时间和精力，最好在这些范围内进一步调查。

这是可行的，通过添加一个覆盖的代码块在textarea的前面，并使用它来应用语法高亮提到的一对夫妇。

然而，有一些边缘情况需要注意。 本文将详细介绍它们: https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code

值得庆幸的是，作者将其创建为自定义元素 https://github.com/WebCoder49/code-input

使用的例子 https://codepen.io/WebCoder49/pen/jOypJOx