文本区域中的 Highlight.js
Posted
技术标签:
【中文标题】文本区域中的 Highlight.js【英文标题】：Highlight.js in textarea 【发布时间】：2013-10-21 05:39:40 【问题描述】：所以我一直在努力在文本区域中使用 highlight.js，因为显然这不起作用：
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<form>
javascript Injection: <br>
<pre>
<code>
<textarea name="js_execute" cols="50" rows="10" "></textarea>
</code>
</pre>
<input type="button" name="Inject_Execute_Button" value = "Inject" onclick="executeJS()" >
</form>
<script type="text/javascript">
function executeJS()
alert("Wohoo");
</script>
<style type ="text/css">
</style>
</body>
</html>
我很确定这个问题有一个简单的答案，所以我不会详细解释它，但最后我更愿意将代码输入到 JavaScript 中突出显示的文本区域中。
【问题讨论】：
【参考方案1】：我从the usage page 了解到，它将突出显示<pre><code> 标记内的代码。不是来自任何其他容器。
在您的示例中，它将突出显示 textarea 本身的 html，因为它位于 <pre><code> 标记内，而不是 textarea 的内容。
【讨论】：
其实使用页面上特别说“你可以使用任何标签代替<pre><code>来标记你的代码”，但是<textarea>确实不同，因为它的内容不在DOM中。
【参考方案2】：
简单的答案是 highlight.js 不能在 textarea 中工作，因为它的内容不是页面的一部分，而且它本身不能有任何样式。如果你想要一个带有 highlight.js 的浏览器中的文本编辑器，你可能应该查看contenteditable，这样你就可以在每次更改的内容上调用hljs.highlight()。但是我不知道有任何成功的实现。
【讨论】：
【参考方案3】：您可能想查看http://ace.c9.io/，它会突出显示语法，但专门用于编辑。
但请注意，它也不使用textarea，可能与@isagalaev 提到的原因相同。
【讨论】：
这是正确答案。 Highlight js 用于高亮代码sn-ps（用于解释或举例说明html文档中的代码）。 ace 编辑器用于在线编辑代码。它功能齐全，功能齐全，简直就是一个涂料应用程序。 如果ace没有必要的语言怎么办？以上是关于文本区域中的 Highlight.js的主要内容，如果未能解决你的问题，请参考以下文章