導入する！
その0
Git Bash(Windowsの場合)とNode.js(LTSのほうが良い?)をインストールする.その1
Git Bushを起動して、syntaxhighlighterを保存するローカルディレクトリに移動し、以下のコードを続けて入力する.$ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git $ cd syntaxhighlighter $ npm install次のような感じ
その2
続いて、以下のコードを入力する.ko-ika@PC MINGW64 ~/Blogger/syntaxhighlighter (master) $ ./node_modules/gulp/bin/gulp.js setup-projectそのまま通れば(その3へ)問題ないが、次のエラーが出るかもしれない.(私の場合はこうなった.)
[hh:mm:ss] TypeError: loadReposFromCache(...).error is not a functionこの時は、 /syntaxhighlighter/build/setup-project.js を開いて、39行の error を catch に変える. つまり、39行目を次のようにして上書き保存する.
const loadRepos = () => loadReposFromCache().catch(loadReposFromGitHub).then(R.map(R.pick(['clone_url', 'name'])));そして、Git Bashで、その2の初めのコードを再び入力する(うまくいくはず). 無事成功すると、 /syntaxhighlighter/repos/ 下に新たなファイルフォルダーがダウンロードされる.
その3
次に、 ./node_modules/gulp/bin/gulp.js build を使う. この時に、 --brushes と --theme を指定する.--brushes
Xという言語をハイライトさせたいのなら、 --brushes=X という風にする. コンマで区切ることで複数指定することもできる: --brushes=X,Y どの言語が対応しているかは、 /syntaxhighlighter/repos/ 下にある brush-X という名前のフォルダーを探せばわかる(Xには、具体的な言語が入る、javascriptとか). また、 --brushes=all とすれば、 /syntaxhighlighter/repos/ 下にある言語すべてをハイライトできる.--theme
Xというテーマを使いたかったら、 --theme=X という風に指定する。 使用できるテーマは、以下のサイトに載ってる(多分). 次のサイトは、画像もあって役に立つ. /syntaxhighlighter/repos/ 下にあるフォルダー theme-X を探してもらえば、対応しているテーマが分かる.使用例
例えば、javascriptとcssをハイライトさせたくて、テーマはdefaultにしたい場合、Git Bashに次のように入力する.ko-ika@PC MINGW64 ~/Blogger/syntaxhighlighter (master) $ ./node_modules/gulp/bin/gulp.js build --brushes=javascript,css --theme=defaultこれが通れば問題ないので、その6まで行ってほしいが、次のエラーが出るかもしれない. 多分出る.
[hh:mm:ss] TypeError: Promise.props is not a function
その4
/syntaxhighlighter/build/bundle.js を開いて、33行目の 'songbird' を 'bluebird' に変えて、上書き保存する.
const Promise = require('bluebird');
そして、再び ./node_modules/gulp/bin/gulp.js build --brushes=javascript,css --theme=defaultを走らせる.
ERROR in ./src/core.js Module not found: Error: Cannot resolve module 'brush-javascript' in C:\Users\ko-ika\Blogger\syntaxhighlighter\src @ ./src/core.js 241:14-41
その5
上のエラー中の、Module not found: Error: Cannot resolve module 後の2つの'で囲まれたファイルフォルダーを手動でインストールする.ko-ika@PC MINGW64 ~/Blogger/syntaxhighlighter (master) $ npm install folder-name上の例では、以下のようにする.
ko-ika@PC MINGW64 ~/Blogger/syntaxhighlighter (master) $ npm install brush-javascript ko-ika@PC MINGW64 ~/Blogger/syntaxhighlighter (master) $ npm install brush-cssそして、 ./node_modules/gulp/bin/gulp.js buildを走らせる. 特にエラーは出ないで、終了すると思う. もし、うまくいかなかったら、次も試してみる.
npm install opts-parser npm install syntaxhighlighter-match npm install syntaxhighlighter-html-renderer npm install syntaxhighlighter-regex
その6
syntaxhighlighter/dist ディレクトリ下にいくつかのファイルが生成されているが、その中の、 syntaxhighlighter.js と theme.css を各自のサーバーにアップロードする。あとは、ブログのHTMLをいじるだけ(ここから先は、こちらの記事のその2と似ている). Boggerのトップページのサイドメニューの「レイアウト」をクリックし、「HTML編集」ボタンを押す.
</head>タグの上に以下のコードを挿入する.
<script src='[path]/syntaxhighlighter.js' type='text/javascript'/> <link href='[path]/theme.css' rel='stylesheet' type='text/css'/>コード中の[path]は、syntaxhighlighter.jsと、theme.cssをアップロードしたフォルダー名を指定する. 同じフォルダーでなくてもよい. 例えば、https://foo.com/styles/theme.css、https://foo.com/scripts/syntaxhighlighter.jsなど.
