シンタックスハイライト

シンタックスハイライトとは

サイトや何かを作って公開するときに、コードのハイライト表示ができると見やすいですが、どうやら色々ライブラリがあるようです。

Google様が出しているgoogle-code-prettifyというライブラリがありました。

<pre>で囲んでおけば、他のライブラリにおきかえる時にさほど困らなそうなので使ってみます。

いきなり失敗

コード内の< >とかはエスケープしなくてはいけないらしいです。

修正したc言語のシンタックスハイライトはこんな感じ↓。

#include "stdio.h"
int main(argc, *argv[]) {
    int i;
    for(i = 0; i<argc; i++){
        printf("%s\n",argv[i]);
    }
    return 0;
}

for文の<がうざい。皆さんいちいち置換とかしてるのでしょうか?

見た目はよく見かける物になった。行番号表示する人いるけど、コピペするとき行番号が含まれて不便なんだよね。

そもそもコードのハイライト表示は必要なんだろうか?<pre>タグとの差はコメントとか予約語の色が変わるだけだし・・・ エスケープ無しでコード貼れると便利なんだが。

エスケープ無しでコードを貼る

htmlだとどうしても< >等のエスケープが発生してしまうので、javascriptの変数に改行を含む文字列を入れてしまえないか考えてみました。

<pre id="code"> </pre>
<script>
    var str = (function() {/*
#include "stdio.h"
int main(argc, *argv[]) {
    int i;
    for(i = 0; i<argc; i++){
        printf("%s\n",argv[i]);
    }
    return 0;
}
*/}).toString();
str = str.slice(15);
str = str.slice(0,-3);
document.getElementById("code").firstChild.nodeValue=str;
</script>

↑の結果が↓

 

うまくいきました。<pre id="code"> </pre>のタグの間にスペースがあります。 何か文字がないと、nodeValueが作られないためです。

strをパースして予約語に色付けたりすればGoogle様越えが可能?まぁ今は面倒なのでしばらくはこのままにしておきます。

あれ? /*コメント*/ このパターンだめじゃん。Chromeさんがコメントのネストを判定してくれませんでしたので、お手上げです。

//コメントは使えます。↓は実験結果です。(+slice改善版)

<pre id="code2"> </pre>
<script>
    var str = (function() {/*
#include "stdio.h"
int main(argc, *argv[]) {
    // コメント
    int i;
    for(i = 0; i<argc; i++){
        printf("%s\n",argv[i]);
    }
    return 0;
}
*/}).toString().match(/\/\*\n*([^]*)\*\//)[1].replace(/\n*$/, "");
    document.getElementById("code2").firstChild.nodeValue=str;
</script>
 

google-code-prettifyは使わない

google-code-prettifyだけではないけど、ソースをコピペで貼れないライブラリはいらん。

バグがあって更新するときにイチイチ置換とか無理。

ここのサイトでは /**/ コメントは使わないことにします。

あ、そうそう、prettyprintのtag preにnodeValue=strではうまくいきませんでした。

追記

</script>が含まれていると、正常に動きませんでした。