記事一覧

FC2 Blogでソースコードをハイライト表示する方法(SyntaxHilighter v4)

Blogなどにソースコードを記載する場合、以下のような感じで言語に応じてキーワードなどがハイライト表示されると見やすくなります。
今回は、いろいろなところで使われているオープンソースのSyntaxHilighter v4を使う事にしました。

サンプル:ソースコードのハイライト表示(C++)
void main(int argc, char* argv[])
{
    // WebCamera settings
    cv::VideoCapture cap(0);
    if(!cap.isOpened()) return;
    cap.set(CV_CAP_PROP_FRAME_WIDTH, 1280);
    cap.set(CV_CAP_PROP_FRAME_HEIGHT, 720);
    cv::namedWindow("Capture", CV_WND_PROP_AUTOSIZE | CV_GUI_NORMAL);

    // Capture
    while(cv::waitKey(1) != VK_ESCAPE)
    {
        cv::UMat frame;
        cap >> frame;
        cv::imshow("Capture", frame);
    }
}


SyntaxHilighter v4の導入手順

SyntaxHilighter v3まではビルド版が用意されていたようで、ファイルをダウンロードすれば必要なファイルがそろっている状態だったようです。(WebでSyntaxHilighterの使い方を検索しても、そのほとんどがSyntaxHilighter v3を前提に書かれています)
しかし、SyntaxHilighter v4ではソースコードの状態で配布されているようなので、自分で必要なファイルをビルドする必要があります。ここでは、SyntaxHilighter v4をビルドして導入するまでの流れを載せておきます。

大まかな手順としては、以下のような流れになります。(1~4の作業は、1回だけ行えばOK)
  1. SyntaxHilighter v4のビルド環境構築
  2. SyntaxHilighter v4のビルド
  3. ビルドしたファイルをサーバにアップロード
  4. FC2 Blogの設定
  5. あとはBlogを書くだけ



SyntaxHilighter v4のビルド環境について

SyntaxHilighter v4はGitHubでソースコードが提供されているので、そのソースからビルドを行います。なお、WindowsにNode.jsなどを導入してビルドを試してみましたがビルド途中でエラーになるようです。

そのため、ビルドにはUbuntu 17.04 desktopを利用しました。Ubuntu専用のマシンを用意するのは手間なので、Windowsに標準搭載されているHyper-VでUbuntuの仮想環境を作成しています。なお、MacOSやCentOSなどでもビルドできると思いますが、一部のコマンド(apt)が異なる可能性があるため、利用している環境に合わせて読み替えてください。

Ubuntu



SyntaxHilighter v4のビルド

Ubuntuのターミナル(端末)を起動して、以下のコマンドでSyntaxHilighter v4のビルドを行います。
$ sudo apt install npm
$ sudo apt install git
$ sudo apt install nodejs-legacy

$ npm install gulp-sass --save-dev

$ 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



ビルドしたファイルをサーバにアップロード

ビルドが終わると、syntaxhighlighter/distフォルダの中に、以下の4ファイルが作成されます。
  • index.html
  • syntaxhighlighter.js
  • syntaxhighlighter.js.map
  • theme.css

このうち、index.html以外の3ファイルを、FTPソフト、もしくはFC2 Blogの管理画面を利用してサーバ上にアップロードします。(index.htmlはサンプルなので無くても大丈夫)
私の場合は、FTPソフトを使って/js 配下にファイルをアップロードしました。

なお、FC2 Blogの場合、FTPのルートパスへのURLは「http://file.blog.fc2.com/techip/」になるので、/js 配下にアップロードしたファイルへのURLは、「http://file.blog.fc2.com/techip/js/~」のようになります。
※アップロードしたファイルのURLはユーザー単位に異なるので、各自読み替えてください。



FC2 Blogの設定

SyntaxHilighter v4を使うためには、各ページの<head>タグ内に以下のコードを追加する必要があります。FC2 Blog管理画面のテンプレートの編集を開き、<head>~</head>の間に以下の2行のコードを追加してください。
※syntaxhighlighter.js、theme.cssファイルへのURLは、各自の環境に合わせて設定してください。

<script type="text/javascript" src="http://file.blog.fc2.com/techip/js/syntaxhighlighter.js"></script>
<link type="text/css" rel="stylesheet" href="http://file.blog.fc2.com/techip/js/theme.css">



SyntaxHilighter v4の使い方

SyntaxHilighter v4では、<pre>タグを使ってソースコードを表現します。このとき、class属性で使用する言語のスタイルを設定可能です。
なお、HTMLの<>を表現する場合は、それぞれ、「&lt;」、「&gt;」にエスケープする必要があるのでご注意ください。

※利用可能な言語の種類(class="brush: 言語名")
applescript、as3、base、bash、coldfusion、cpp、csharp、css、delphi、diff、erlang、groovy、haxe、java、javafx、javascript、perl、php、plain、powershell、python、ruby、sass、scala、sql、swift、tap、typescript、vb、xml

<pre class="brush: python">
  ここにソースコード
</pre>

スポンサーリンク

  

コメント

コメントの投稿

非公開コメント