highlight.jsの使い方

Question

highlight.jsを使いブログにコードを貼り付けようとしているのですが
cssはうまくいくのですがhtmlはうまくいかずcssが適用されてしまいます。

<pre><code>
ここにコードを記述
</pre></code>

調べて見たところ
HTMLのソースコードを表示したい場合はHTMLエスケープされたコードじゃないとだめらしいですが
それ以外になんかいい方法ないでしょうか？

Answer 1

とりあえず、HTMLコードの順序がおかしいですね。

<pre><code>
ここにコードを記述
</pre></code>

↓

<pre><code>
ここにコードを記述
</code></pre>

これでだめでしょうか？
私のサイトでは、正常に動作しているのですが……
正常に動作していないスクリーンショットなどございますか？

追記

失礼しました。

HTMLのソースコードを表示したい場合はHTMLエスケープされたコードじゃないとだめらしいですが

それ以外になんかいい方法ないでしょうか？

こちらの部分を見落としておりました。

そうですね、エスケープを行わないとやはり<code>タグ内といえどHTMLと解釈されてしまいます。
なので、JavaScriptなどで<code>タグの中身を簡単にエスケープしてしまえばいいかと思います。

↓エスケープのサンプル

//コードエリア
$("code").html(function(){
	var txt = $(this).html();
	
	//クォーテーションの置換
	txt = txt.replace(/["]/g, """);	//"
	
	//<>の置換
	txt = txt.replace(/[<]/g, "&lt;");
	txt = txt.replace(/[>]/g, "&gt;");
	
	//（最後に）全ての改行コードを<br>に変更
	txt = txt.replace(/[\n\r]/g, "<br>");
	txt = txt.replace("<br>", "");		//最初の行の「<br>」を削除
	
	$(this).html(txt);
});

Comments

[eq_space]

すばらしい回答ありがとうございます！
jsでこんな制御できるんですね。
js勉強します笑

[nnahito]

あ、これ、jqueryというプラグインをつかってますので、その所よろしくお願いします。
あれ……？Highlightjsって、jquery入りましたっけ？
jqueryを使ってたらこのコメントは無視してください！