C++やSwiftなどのソースコードを綺麗に記載できるSyntaxHighlighter v4の導入方法を紹介します。
SyntaxHighlighter OfficialSite
現在バージョン4がGithubに公開されていますが、導入方法の解説サイトがあまりなかったため備忘録も兼ねて記載します。
バージョン3ではダウンロードしたZIPにある特定のファイルをアップロードするだけで使えていましたが、バージョン4は少々手間がかかりました。
目次
環境
今回はブログの設定のため関係はないかもしれませんが念のため記載。
- macOS Sierra 10.12.5
- FC2ブログ
インストール準備
node, npmコマンドをインストール
まずはSyntaxHighlighterをインストールするために必要なコマンドを用意します。
Macであれば既にhomebrewがインストールされているので、それを用いて必要なコマンドを準備していきましょう。
ターミナルを立ち上げてコマンドを順番に入力していきます。
$ brew install nodebrew $ nodebrew -v $ echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bash_profile
バージョン管理ツールであるnodebrewをインストールします。
-vでインストールしたバージョンが表示されていればインストール成功です。
環境変数のパスを設定するためechoコマンドを実行し、ターミナルを再起動します。
パスを設定することでどこからでもnodebrew内のコマンドが実行できるようになりました。
次にnodeコマンドをインストールします。
$ nodebrew install-binary latest $ nodebrew ls $ nodebrew use v8.2.1 $ node -v
latestを実行することで最新版をインストールします。
lsコマンドで使用できるバージョンが確認できます。
useコマンドを実行し、最新バージョンを使用する状態にします。
-vコマンドを実行し、バージョンが表示されていればインストール成功です。
ここまで問題なく成功していれば、npmコマンドもインストールできています。
$ npm -v
SyntaxHighlighterのインストールとセットアップ
SyntaxHighlighterのGithubからダウンロードし、インストールとセットアップを行います。
$ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git $ npm install $ ./node_modules/gulp/bin/gulp.js setup-project $ ./node_modules/gulp/bin/gulp.js build --brushes=all --theme=default
成功するとsyntaxhighlighter/dist内に複数のファイルが生成されています。
これで準備は完了です。
FC2ブログへ設定
必要なファイルをアップロード
syntaxhighlighterをFC2ブログへ設定します。
インストールしたsyntaxhighlighter/dist内にある以下のファイルを、FC2ブログのファイルアップロードから登録します。
- syntaxhighlighter.js
- theme.css
テンプレートにコードを設定
FC2ブログのテンプレートの設定から使用しているテンプレートを選択し、htmlタグのhead内に以下のコードを追記します。
</head>の直前に追記すれば良いかと思います。
syntaxhighlighter.jsとtheme.cssのパスはユニークパスなのでファイルアップロードからパスを確認し修正してください。
またPC用とスマートフォン用の両方に設定することをお忘れなく。
※SyntaxHighlighter.config.bloggerMode=true;で改行機能をブログ用にしておりますが設定しても反映されないため現状はなくても良い。
FC2への設定が完了しました。あとは記事に書くだけです。
記事へ記載
記事に以下のタグを記載することでソースコードが表示されます。
<pre class=”brush:使用言語”>ソースコード</pre>
例. C言語のサンプルコード
<pre class=”brush:cpp”>
#include “stdio.h”
int main(void)
{
printf(“HelloWorld!!\n”);
return 0;
}
</pre>
以下のように表示されます。
#include "stdio.h"
int main(void)
{
printf("HelloWorld!!\n");
return 0;
}
表示するソースコードの種類はbrushで色々と設定できるようです。
以下のページから設定できる種類を確認できます。
SyntaxHighlighter – Bundled Brushes
また注意点として、FC2ブログ記事の詳細設定の改行扱いを「HTMLタグのみ」に設定してください。
参考
以下のサイトを参考にさせていただきました。有難うございました。
Qiita – MacにNode.jsをインストール
達人ドヤリストへの道 – syntax highlighter v4 導入メモ
