Highlight.js в textarea

Итак, я старался использовать 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

Возможно, вы захотите посмотреть http://ace.c9.io/, который выделяет синтаксис, но специально предназначен для редактирования.

Заметьте, однако, что он не использует textarea либо, возможно, по тем же причинам, что и @isagalaev.

Ответ 2

Простым ответом является то, что highlight.js не будет работать в текстовом поле, потому что его содержимое не является частью страницы, и оно просто не может иметь никаких стилей. Если вам нужен текстовый редактор в браузере с highlight.js, вы, вероятно, должны изучить contenteditable, чтобы вы могли называть hljs.highlight() его содержимое при каждом изменении. Однако я не знаю об успешной реализации этого.

Ответ 3

Я понимаю из страницу использования, что будет выделять код внутри тегов <pre><code>. Не из любого другого контейнера.

В вашем примере он выделит html самой текстовой области, так как она находится внутри тегов <pre><code>, а не содержимое текстового поля.

Ответ 4

Ace - правильный ответ, он, вероятно, лучше всего работает как IDE.

Одна вещь, чтобы иметь в виду, это ее размер. Это более 400 КБ. Вот почему мы интегрировали CodeFlask (20-30 КБ)