在textarea中突出显示.js
[英]Highlight.js in textarea
问题描述
So i have been struggeling to use highlight.js in a text area since obviously this doesn't work: 
所以我一直在文本区域使用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>
I'm pretty sure there's an easy answer to this so i won't explain it in too detail but at the end i would prefer to have code typed into the textarea highlighted in JavaScript. 我很确定这是一个简单的答案，所以我不会详细解释它，但最后我宁愿将代码输入到用JavaScript突出显示的textarea中。
3 个解决方案
解决方案1
20 2014-12-18 19:03:52
You might want to look at http://ace.c9.io/ , which does syntax highlighting, but is specifically aimed at editing. 您可能希望查看http://ace.c9.io/ ，它会进行语法突出显示，但专门针对编辑。
Note however that it does not use textarea either, probably for the same reasons mentioned by @isagalaev. 但请注意，它也不使用textarea ，可能出于与@isagalaev提到的相同的原因。
解决方案2
16 2014-09-05 17:43:06
The simple answer is that highlight.js won't work in a textarea because its content is not part of the page and it simply can't have any styles by itself. 简单的答案是highlight.js不能在textarea中工作，因为它的内容不是页面的一部分，它本身就不能有任何样式。 If you want a text editor in a browser with highlight.js you probably should look into contenteditable so you could call hljs.highlight() on its content on every change. 如果你想在带有highlight.js的浏览器中使用文本编辑器，你可能应该考虑到contenteditable，这样你就可以在每次更改时调用hljs.highlight() 。 However I'm not aware of any successful implementation of this. 但是我不知道有没有成功实现这一点。
解决方案3
1 2014-08-21 20:19:39
I understand from the usage page that it will highlight the code inside the <pre><code> tags. 我从使用情况页面了解到它将突出显示<pre><code>标签内的代码。 Not from any other container. 不是来自任何其他容器。
In your example, it would highlight the html of the textarea itself, as it is inside the <pre><code> tags, and not de contents of the textarea. 在您的示例中，它将突出显示textarea本身的html，因为它位于<pre><code>标记内，而不是textarea的de内容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.