14

所以我一直在努力在文本区域中使用 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 中突出显示的 textarea 中。

4

3 回答 3

26

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

但是请注意，它不使用textarea任何一种，可能出于@isagalaev 提到的相同原因。

于 2014-12-18T19:03:52.373 回答
21

简单的答案是 highlight.js 不能在 textarea 中工作，因为它的内容不是页面的一部分，而且它本身不能有任何样式。如果你想要一个带有 highlight.js 的浏览器中的文本编辑器，你可能应该查看contenteditable，这样你就可以在每次更改时调用hljs.highlight()它的内容。但是我不知道有任何成功的实施。

于 2014-09-05T17:43:06.160 回答
0

我从使用页面了解到，它将突出显示标签内的<pre><code>代码。不是来自任何其他容器。

在您的示例中，它将突出显示 textarea 本身的 html，因为它位于<pre><code>标签内，而不是 textarea 的内容。

于 2014-08-21T20:19:39.453 回答