Highlight.js в текстовом поле

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


javascript html highlight highlight.js syntax-highlighting
person Kivi Freak    schedule 13.10.2013    source источник

Ответы (3)


arrow_upward
25
arrow_downward

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

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

person Pierre-Antoine    schedule 18.12.2014
comment
Это правильный ответ. Highlight js предназначен для выделения фрагментов кода (для объяснения или иллюстрации кода в html-документах). Редактор ace предназначен для редактирования кода онлайн. Это полнофункциональное, полноценное и просто крутое приложение. - person lol; 01.11.2015
comment
Что делать, если у ace нет нужного языка? - person Aleksey Kontsevich; 01.11.2018

arrow_upward
20
arrow_downward

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

person isagalaev    schedule 05.09.2014

arrow_upward
0
arrow_downward

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

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

person RubenCaro    schedule 21.08.2014
comment
На самом деле, на странице использования специально сказано, что вы можете использовать любые теги вместо <pre><code> для разметки своего кода, но <textarea> действительно отличается, поскольку его содержимое не находится в DOM. - person isagalaev; 05.09.2014