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

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>中的文本，使用一个<div>小心地放在它后面。

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

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

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

http://alexgorbatchev.com/wiki/SyntaxHighlighter

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

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

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

但是，你可以通过小心地在文本区域后面放置一个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

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