ソースコードの表示に、SyntaxHighlighterの代わりにPrism.jsを使ってみる

前回SyntaxHighlighterを使ってみましたが、RustやGoに対応しておらず、最近更新されていないっぽいので他の物を探していたところ、 Prism.jsを見つけました。
SyntaxHighlighterより軽いらしく、さらにRust、Goを含む非常に多数の言語にも対応しているとのこと。
そんなに多くの言語は使わないんですが、GoやRustは比較的新しいのでシンタックスに追加や変更などが多く、それへの対応も期待できそうなのでこれを使っていくことに決めました。
こちらのサイトを参考にさせてもらいました。
くわしくは参考サイトを見てもらえればわかりますが、自分がつまずいた所はソースコードが一行になって表示されたことです。
参考サイトにも書いているように、ソースコードには実体参照変換が必要になります。
このサイトでHTML実体参照変換をしたんですが、改行オプションあたりをデフォルトから変更しなければならないのかと思って色々試したんですが、原因は別でした。
自分の使っているSeesaa ブログの場合だと、設定にある改行HTMLタグ変換を”変換しない”にすればよく、このサイトのHTML実体参照変換はデフォルトのままでOKでした。
他のブログでも同じ設定があると思います。(同じことでつまずいていた人がいました)
ただこれをすると普通の文章の改行に<BR>を手動で入れないといけないのが面倒くさいです。
しかし、Prism.jsに【FC2ブログ自動改行対応】と【カスタムマーキング機能】を追加してみました。のようにPrism.jsをほんのちょっとだけ修正するだけで対応できるようです。
実は今回の文章はここまで手動でタグを打っていて、今さっき対処方法知ったばかりだったりします。
今更削除するのも面倒くさいので今回はこのままにします。
後は、Prism.jsをダウンロードするときのカスタマイズで、Pluginsの"Remove initial line feed"にチェックを入れるのをお勧めします。 Prism.jsを使うタグの後に改行してソースコードを書くと、タグの後の改行が1行目になってソースコード本体は2行目から始まってしまいます。
一行目の空行をなくすには、タグとソースコードの間の改行をなくすか、”Remove initial line feed”を使うと1行目の空行をなくせます。

Prism.jsによる、Hello world(C++)のソースコード表示

#include <iostream>

int main() {
    using namespace std;
    cout << "Hello, World!" << endl;
    return;
}

Prism.jsによる、Hello world(Go)のソースコード表示

package main

import "fmt"

func main() {
    fmt.Println("Hello, 世界")
}

Prism.jsによる、Hello world(Rust)のソースコード表示

fn main() {
    println!("Hello World!");
}

この記事へのコメント

最近のトラックバック