SyntaxHighlighterのVersion 4を試してみた
SyntaxHighlighter V4
ブログとかでよく見かけるコードをハイライトするSyntaxHighlighter、５年くらい前にはてなブログで使って見ようと一度検討して見送った経緯があるのですが、あらためて使って見ようと思い試してみました。
確かバージョン３くらいまではzipファイルをダウンロードして、jsファイルとcssファイルを配置するだけでよかったような、、、いつの間にか黒い画面でgit cloneとかgulpとか使って自分でビルドしなきゃいけなくなったらしく、それの覚え書きです。
jsファイルとcssファイルのビルド
下のコマンドで、projectディレクトリ直下のdistディレクトリに、syntaxhighlighter.jsとdefault.cssができます。
- $ mkdir project
- $ cd project
- $ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
- $ cd syntaxhighlighter
- $ npm install
- $ ./node_modules/gulp/bin/gulp.js setup-project
- $ ./node_modules/gulp/bin/gulp.js build --brushes='all' --theme=default
- user@localhost
Building Options
| オプション | 説明 |
|---|---|
| --brushes | "all"とか"css,javascript"とか。 Official brushesはたくさんあります。 Brushes and Themes |
| --theme | 選べる公式テーマは9種類、default, django, eclipse, emacs, fadetogrey, mdultra, midnight, rdark, swiftからどれか一つ |
| --compat | バージョン3と互換性を持たせるようですが、試してません |
| --output | 初期値 dist 出力先ディレクトリです |
| --help | ヘルプ |
jsファイルとcssファイルの設置、コードの記述
このあとは今までと設置の仕方、コードの記述の仕方はバージョン3の頃と変わってないんじゃないかと思います。
グローバルコンフィグsyntaxhighlighterConfigは、syntaxhighlighter.jsを読み込む前に指定します。
- <link type="text/css" rel="stylesheet" href="./path/to/default.css">
- <script type="text/javascript">
- syntaxhighlighterConfig = {
- className: 'custom-class-name'
- };
- </script>
- <script type="text/javascript" src="./path/to/syntaxhighlighter.js">
- <pre class="brush: js; auto-links: false; first-line: 10; highlight: [2, 4]">
- function testFunction(){
- }
- </pre>
httpd.conf
Global Configuration
| プロパティ | 説明 |
|---|---|
| className | 初期値 null ハイライトしたいテーブルに任意のクラスを付与できます |
Per Element Configuration
※ コードを見ると他にも、title、quick-code、collapseというオプションがあるようですが、公式に記載されているものだけ載せています。
| プロパティ | 説明 |
|---|---|
| auto-links | 初期値 true URL形式のテキストを検出します |
| first-line | 初期値 1 スタートの行番号です |
| gutter | 初期値 true 行番号の有無を指定します |
| highlight | 初期値 null 行のハイライトを[1, 2, 4]みたく、配列で指定します |
| html-script | 初期値 false 公式インストラクションにshBrushXml.jsをロードする必要があるというのは、ビルドオプションの--brushにxmlを加えておくこと、という意味だと思います |
| smart-tabs | 初期値 true タブの自動挿入だと思うのですが動作確認できませんでした |
| tab-size | 初期値 4 タブサイズです |
SyntaxHighlighterのデモ
ビルドするとできるdist/index.htmlがデモになっているのですが、、9種類のCSSの切り替えスイッチをつけて、同じくいつの間にかなくなっていたコピーボタンをつけて置いておきました。
おわり
いろいろと調べて試してみた結果、やっぱり今回もはてなブログで使うのはやめておくことにしました。
参照サイト
ingwer-design.com/blog
バージョン3の頃の記事ですが、参考になります。
ingwer-design.com/blog
同じくバージョン3の頃の記事ですが、特にオプション関係が参考になります。
