web-dev-qa-db-ja.com

textareaの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で強調表示されたテキスト領域にコードを入力することをお勧めします。

javascripthtmlsyntax-highlightinghighlighthighlight.js
11
Kivi Freak

http://ace.c9.io/ を参照することをお勧めします。これは構文の強調表示を行いますが、特に編集を目的としています。

ただし、おそらく@isagalaevで言及されているのと同じ理由で、textareaも使用しないことに注意してください。

21
Pierre-Antoine

簡単な答えは、highlight.jsはそのコンテンツがページの一部ではなく、それ自体でスタイルを持つことができないため、テキストエリアでは機能しないということです。ハイライト.jsを使用するブラウザーでテキストエディターが必要な場合は、変更のたびにコンテンツに対してhljs.highlight()を呼び出すことができるように、おそらく contenteditable を調べる必要があります。しかし、私はこれがうまく実装されていることを知りません。

18
isagalaev

使用ページ から、<pre><code>タグ内のコードが強調表示されることがわかりました。他のコンテナからではありません。

あなたの例では、textarea自体のhtmlが強調表示されます。これは、textareaのコンテンツではなく、<pre><code>タグ内にあるためです。

1
RubenCaro