文本区域中的Highlight.js世界你好

问题描述 投票：0回答：4
javascript html syntax-highlighting highlight highlight.js
4个回答
31
投票

您可能想看看 http://ace.c9.io/，它具有语法突出显示功能，但专门针对编辑。

但请注意，它也不使用 

textarea
，可能出于@isagalaev 提到的相同原因。

25
投票

简单的答案是，highlight.js 无法在文本区域中工作，因为它的内容不是页面的一部分，而且它本身不能有任何样式。如果您想在浏览器中使用带有highlight.js的文本编辑器，您可能应该查看contenteditable，这样您就可以在每次更改时对其内容调用

hljs.highlight()
。但是我不知道有任何成功的实施。

0
投票

我从使用页面了解到，它将突出显示

<pre><code>
标签内的代码。不是来自任何其他容器。

在您的示例中，它将突出显示文本区域本身的 html，因为它位于 

<pre><code>
标签内，而不是文本区域的内容。

0
投票

您可以使用 highlighted-code 来突出显示文本区域

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highlighted Code Example</title>
</head>

<body>
  <textarea is="highlighted-code" cols="80" rows="12" language="javascript" tab-size="2" auto-height>console.log("highlighted code textarea");</textarea>
  <script type="module" defer>
    (async ({ chrome, netscape }) => { if (!chrome && !netscape) await import('https://unpkg.com/@ungap/custom-elements'); const { default: HighlightedCode } = await import('https://unpkg.com/highlighted-code'); HighlightedCode.useTheme('github'); })(self);
  </script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.