JavaScript について久しぶりに書きます。このシリーズでも使わせていただいている SyntaxHighlighter ですが、ココログでもコードを表示できる他、カスタマイズすることもできます。
そこで今回は、SyntaxHighlighter の最新版 (4.0) を使っていろいろやってみようと思います。
まず、GitHub にある SyntaxHighlighter のビルドのインストラクション（指示）にしたがって SyntaxHighligher をビルドしてみようと思います。
最初は git コマンドを使うので、Git Shell を立ち上げます。
Windows PowerShell Copyright (C) 2016 Microsoft Corporation. All rights reserved. ~\Documents\GitHub> git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git Cloning into 'syntaxhighlighter'... remote: Counting objects: 3500, done. remote: Total 3500 (delta 0), reused 0 (delta 0), pack-reused 3500 Receiving objects: 100% (3500/3500), 5.94 MiB | 1.81 MiB/s, done. Resolving deltas: 100% (1762/1762), done. ~\Documents\GitHub>
次に node.js のコマンドを使うので、Node.js コマンドプロンプトを立ち上げ、コマンド npm install を実行します。
npm ERR! node -v v0.10.13 npm ERR! npm -v 1.3.2 npm ERR! path C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\node_modules\bab el-preset-es2015\node_modules\babel-plugin-transform-es2015-function-name\node_m odules\babel-helper-function-name\node_modules\babel-template\node_modules\babyl on\lib\index.js npm ERR! fstream_path C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\node_mod ules\babel-preset-es2015\node_modules\babel-plugin-transform-es2015-function-nam e\node_modules\babel-helper-function-name\node_modules\babel-template\node_modul es\babylon\lib\index.js pm ERR! fstream_type File npm ERR! fstream_class FileWriter npm ERR! code ENOENT npm ERR! errno 34 npm ERR! fstream_stack C:\Program Files (x86)\nodejs\node_modules\npm\node_modul es\fstream\lib\writer.js:284:26 npm ERR! fstream_stack Object.oncomplete (fs.js:107:15) npm http GET https://registry.npmjs.org/regenerator-runtime npm http 304 https://registry.npmjs.org/regenerator-runtime npm ERR! npm ERR! Additional logging details can be found in: npm ERR! C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\npm-debug.log npm ERR! not ok code 0 C:\Users\Nonki\Documents\GitHub\syntaxhighlighter>
どうやら、エラーになってビルドがうまくいかなかったようです。そこで、Node.jp の最新版をインストールし直し、npm cache clean コマンドを実行してから、再び npm install を実行しました。
| `-- webpack-core@0.6.9 | +-- source-list-map@0.1.8 | `-- source-map@0.4.4 `-- yargs@3.32.0 +-- camelcase@2.1.1 +-- cliui@3.2.0 | `-- wrap-ansi@2.1.0 +-- decamelize@1.2.0 +-- os-locale@1.4.0 | `-- lcid@1.0.0 | `-- invert-kv@1.0.0 +-- string-width@1.0.2 | +-- code-point-at@1.1.0 | `-- is-fullwidth-code-point@1.0.0 | `-- number-is-nan@1.0.1 +-- window-size@0.1.4 `-- y18n@3.2.1 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch okidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@ 1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"} ) C:\Users\Nonki\Documents\GitHub\syntaxhighlighter>
こちらはうまくいったようなので、次に進み、node .\node_modules\gulp\bin\gulp.js setup-projectnode コマンドを実行します。今度は、git clone https://github.com/syntaxhighlighter/brush-php.git でエラーになってしまいました。調べてみると、Windows 10 でのビルドはうまくいかないようでした。そこで、上記と同じことを Mac でやってみました。Node.js インストール後、実行したコマンドは以下の通りです。
git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git cd syntaxhighlighter npm install ./node_modules/gulp/bin/gulp.js setup-project
Mac では問題なくビルドできました。最後に以下のコマンドを実行しました。これで、dist フォルダに syntaxhighlighter..js と theme.css が作成されます。
NONKI-Mac-mini:syntaxhighlighter nonki$ ./node_modules/gulp/bin/gulp.js build --compat --brushes=css,cpp,csharp,java,javascript,vb,xml --theme=default [19:18:47] Requiring external module babel-register [19:18:47] Using gulpfile ~/Documents/syntaxhighlighter/gulpfile.babel.js [19:18:47] Starting 'build'... [19:18:50] Theme: default [19:18:50] Brushes: css, cpp, csharp, java, javascript, vb, xml [19:18:50] Hash: 5910dbdf4bb31d0abb6a Version: webpack 1.15.0 Time: 2392ms Asset Size Chunks Chunk Names syntaxhighlighter.js 145 kB 0 [emitted] main syntaxhighlighter.js.map 224 kB 0 [emitted] main chunk {0} syntaxhighlighter.js, syntaxhighlighter.js.map (main) 137 kB [rendered] [0] ./src/index.js 1.18 kB {0} [built] [1] ./src/core.js 7.16 kB {0} [built] [2] ./repos/opts-parser/opts-parser.js 1.5 kB {0} [built] [3] ./repos/syntaxhighlighter-regex/index.js 1.16 kB {0} [built] [4] ./repos/syntaxhighlighter-regex/xregexp.js 67.8 kB {0} [built] [5] ./repos/syntaxhighlighter-match/index.js 659 bytes {0} [built] [6] ./repos/syntaxhighlighter-match/lib/match.js 1.19 kB {0} [built] [7] ./repos/syntaxhighlighter-match/lib/apply-regex-list.js 1.05 kB {0} [built] [8] ./repos/syntaxhighlighter-match/lib/matches.js 2.67 kB {0} [built] [9] ./repos/syntaxhighlighter-html-renderer/index.js 9.67 kB {0} [built] [10] ./src/utils.js 2.3 kB {0} [built] [11] ./src/transformers/index.js 538 bytes {0} [built] [12] ./src/transformers/trim.js 316 bytes {0} [built] [13] ./src/transformers/blogger_mode.js 186 bytes {0} [built] [14] ./src/transformers/strip_brs.js 181 bytes {0} [built] [15] ./repos/unindenter/unindenter.js 955 bytes {0} [built] [16] ./repos/retabber/retabber.js 1.4 kB {0} [built] [17] ./src/dom.js 6.76 kB {0} [built] [18] ./src/config.js 311 bytes {0} [built] [19] ./src/defaults.js 1 kB {0} [built] [20] ./src/html_script.js 1.72 kB {0} [built] [21] ./~/process/browser.js 5.45 kB {0} [built] [22] ./repos/brush-base/brush-base.js 2.78 kB {0} [built] [23] ./repos/brush-css/brush.js 4.86 kB {0} [built] [24] ./repos/brush-cpp/brush.js 4.51 kB {0} [built] [25] ./repos/brush-csharp/brush.js 1.8 kB {0} [built] [26] ./repos/brush-java/brush.js 1.37 kB {0} [built] [27] ./repos/brush-javascript/brush.js 1.05 kB {0} [built] [28] ./repos/brush-vb/brush.js 1.56 kB {0} [built] [29] ./repos/brush-xml/brush.js 1.54 kB {0} [built] [30] ./~/domready/ready.js 1.13 kB {0} [built] [31] ./src/dasherize.js 526 bytes {0} [built] [32] ./src/compatibility_layer_v3.js 478 bytes {0} [built] [19:18:50] Finished 'build' after 2.75 s NONKI-Mac-mini:syntaxhighlighter nonki$
このようにして作成した、theme.css と syntaxhighlighter.js について、下記のようにココログの設定を行ってみたのですが、結局うまくいきませんでした。他の原因も考えられるのですが、SyntaxHighlighter 4.0 はまだ開発途中と判断し、3.0.83 をダウンロードし、上記のようなビルドは行わず、ココログの設定 | 基本情報 | ブログのサブタイトルの下に <script> タグを設定しました。
<link type="text/css" rel="stylesheet" href="http://www.nonkit.com/javascript/css/shCoreEclipse.css"> <link type="text/css" rel="stylesheet" href="http://www.nonkit.com/javascript/css/shThemeEclipse.css"> <script type="text/javascript" src="http://www.nonkit.com/javascript/js/XRegExp.js"></script> http://www.nonkit.com/javascript/js/shCore.js http://www.nonkit.com/javascript/js/shBrushCpp.js http://www.nonkit.com/javascript/js/shBrushCSharp.js http://www.nonkit.com/javascript/js/shBrushCss.js http://www.nonkit.com/javascript/js/shBrushJava.js http://www.nonkit.com/javascript/js/shBrushJScript.js http://www.nonkit.com/javascript/js/shBrushVb.js http://www.nonkit.com/javascript/js/shBrushXml.js <script type="text/javascript"> SyntaxHighlighter.config.stripBrs = true; SyntaxHighlighter.all(); </script>
【図36 ココログの設定】
これでココログの記事の中でコードを表示できるようになります。コードは以下のタグで挟みます。
<pre class="brush: vb"> </pre>
SyntaxHightligher 自身は JavaScript で書かれていますが、さまざまなプログラミング言語をサポートしています。例えば、以下のプログラムは私が書いた Visual Basic のコードです。結果のとおり、<p> タグが残ってしまいます。サブタイトルの下に設定した、SyntaxHighlighter.all(); の前に、SyntaxHighlighter.config.stripBrs = true; を置いたことにより、<br> タグは削除できていますが、<p> タグはうまく削除できません。また、右上の?を押すと本来、SyntaxHighlighter についてのバージョン情報などが表示されるはずなのですが、今のところ @ABOUT@ と表示されてしまします。
Imports System.IO
Module FDump
Sub Main()
' get filename from arguments
Dim filename As String = System.Environment.GetCommandLineArgs(1)
' open input file
Dim stdin As FileStream = New FileStream(filename, FileMode.Open, FileAccess.Read)
' output a line
Dim b, i As Integer
b = stdin.ReadByte()
i = 0
While 0 < b
If i Mod 256 = 0 Then
Console.WriteLine("")
Console.WriteLine("Addr +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +A +B +C +D +E +F")
Console.Write("---- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --")
End If
If i Mod 16 = 0 Then
Dim h As String
Console.WriteLine("")
h = Hex(i \ 16)
Console.Write(Left("000", 4 - h.Length) & h & " ")
End If
Console.Write(Hex(b) & " ")
i += 1
b = stdin.ReadByte()
End While
Console.WriteLine("")
#If DEBUG Then
Console.WriteLine("")
Console.WriteLine("Press any key to continue...")
Console.ReadKey()
#End If
End Sub
End Module
ココログでの表示は上記のように多少問題が残っていますが、次回は Small Basic 用に設定をカスタマイズしてみたいと思います。
（つづく）
のんきさんの年月記 