javascript - 可以即时进行语法突出显示的文本区域？

Question

为了便于维护，我在 CMS 中存储了许多 HTML 块。它们由<textarea>s 表示。

有没有人知道某种 JavaScript Widget，它可以在一个textarea或类似的范围内为 HTML 进行语法突出显示，同时仍然保持纯文本编辑器（没有 WYSIWYG 或高级功能）？

score 244 · Accepted Answer

在常规的textarea.

如果您对此感到满意，请尝试CodeMirror或Ace 或Monaco（用于 MS VSCode）。

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

score 32 · Accepted Answer

这是我对程序员的类似问题（在线代码编辑器）所做的回复：

首先，你可以看看这篇文章：
维基百科——基于 JavaScript 的源代码编辑器的比较。

更多信息，这里有一些似乎符合您要求的工具：

EditArea ―作为Yii 扩展的 FileEditor 的演示― ( Apache Software License, BSD, LGPL )

这是 EditArea，一个免费的源代码 javascript 编辑器。它允许编写格式良好的源代码，具有行编号、选项卡支持、搜索和替换（使用正则表达式）和实时语法突出显示（可定制）。
CodePress ― Joomla 的演示！CodePress 插件― ( LGPL ) ― 它在 Chrome 中不起作用，看起来开发已经停止。

CodePress 是基于 Web 的源代码编辑器，具有用 JavaScript 编写的语法突出显示功能，可在文本在浏览器中输入时实时着色。
CodeMirror ―众多演示之一― （MIT 风格的许可证 + 可选的商业支持）

CodeMirror 是一个 JavaScript 库，可用于为类似代码的内容（计算机程序、HTML 标记等）创建一个相对舒适的编辑器界面。如果已为您正在编辑的语言编写了模式，则代码将被着色，并且编辑器将选择性地帮助您缩进
Ace Ajax.org Cloud9 Editor ― Demo ― ( Mozilla tri-license (MPL/GPL/LGPL) )

Ace 是一个用 JavaScript 编写的独立代码编辑器。我们的目标是创建一个基于 Web 的代码编辑器，以匹配并扩展现有本地编辑器（如 TextMate、Vim 或 Eclipse）的特性、可用性和性能。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。Ace 是作为Cloud9 IDE的主要编辑器和 Mozilla Skywriter (Bespin) 项目的继任者而开发的。

score 19 · Accepted Answer

19

CodePress这样做，EditArea也是如此。两者都是开源的。

于 2011-02-06T04:59:55.323 回答

score 11 · Accepted Answer

11

我建议使用EditArea实时编辑语法高亮文本区域。

于 2010-06-14T22:41:02.803 回答

score 10 · Accepted Answer

您可以在 a 中突出显示文本，在其后面<textarea>使用小心放置的 a。<div>

查看在 Textarea 中突出显示文本。

score 8 · Accepted Answer

更新： Bespin 现在是 ACE，此处评分最高的答案提到了这一点。请改用 ACE。

必须选择 Mozilla 的Bespin。它是使用 HTML5 功能构建的（因此它既快速又快速，但不支持旧版浏览器），但使用起来绝对令人惊叹，并且击败了我遇到的所有东西 - 可能是因为 Mozilla 支持它，而且他们开发了 Firefox，是的。 .. 还有一个jQuery 插件，其中包含一个扩展，使它更容易与 jQuery 一起使用。

score 2 · Accepted Answer

我所知道的唯一具有语法高亮和回退到文本区域的编辑器是Mozilla Bespin。谷歌搜索嵌入 Bespin 以了解如何嵌入编辑器。我知道现在唯一使用这个的网站是非常 alpha 的Mozilla Jetpack Gallery（在提交 Jetpack 页面中），您可能想看看它们是如何包含它的。

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

score 2 · Accepted Answer

您实际上无法在文本区域内呈现标记。

但是，您可以通过在 textarea 后面小心放置一个 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

score 2 · Accepted Answer

总而言之，这些是我们可以使用的：

高亮.js
棱镜.js &
微光.js
谷歌漂亮打印
Pygments.org
海立达
微光.js
否则你可以尝试一个轻量级的自定义 - https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/

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