Bloggerテーマをカスタマイズ - SyntaxHighlighterを導入しよう

ブログなどにプログラムのソースコードなどを載せる時、構文を見やすく色分けして表示させたいと考えると思います。
これを手作業でやろうとするとかなりの作業量ですが JavaScript を使ってこれを実現してくれる「SyntaxHighlighter」というライブラリがあります。

※同様の機能を提供しているライブラリは他にも「Google Code Prettify」などがあります
※自分の好みに合ったライブラリを使いましょう


ここでは Blogger から SyntaxHighlighter を利用する為の手順を解説します。




SyntaxHighlighter とは

SyntaxHighlighterの公式サイトは以下の通りです。
https://alexgorbatchev.com/SyntaxHighlighter/

SyntaxHighlighter は JavaScript ファイルとスタイルシートのファイルで構成されていて、それらを自身のサイトから利用するという手順になります。

利用には以下のパターンが考えられます。
  • 必要なファイルをダウンロードして自身のサイトへ配置する
  • 公式サイトに置いてあるファイルを参照する
  • 公式サイト以外のCDN (content delivery network) にあるファイルを参照する
必要なファイルは公式サイトからダウンロードする事が出来るため、ダウンロードしてファイルを自身のサイトへ配置するという方法もありますが少し面倒です。
公式サイトに置かれているファイルを参照したいところですが、https でのアクセスではうまく動作しないようです。
幸い「cdnjs.com」というCDNサービスでSyntaxHighlighterが提供されています。

そんな訳でここでは cdnjs.com に置いてあるファイルを参照する方法を解説していこうと思います。



SyntaxHighlighter を使う為の設定

設定方法に関する公式サイトは以下の通りです。（英語です） https://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html


参照するURL

公式サイトの場合は以下から確認できます。
https://alexgorbatchev.com/SyntaxHighlighter/hosting.html

URLは「https://alexgorbatchev.com/pub/sh/[VERSION]/」のようになっています。
[VERSION]の部分を current にすれば常に最新を利用する事ができます。


cdnjs.com を参照する場合は以下から確認できます。
https://cdnjs.com/libraries/SyntaxHighlighter


必要なファイルを確認しよう

最低限必要なのは
  • /styles/shCore.css
  • /styles/shThemeDefault.css
  • /scripts/shCore.js
  • /scripts/shAutoloader.js
の４つです。

JavaScript ファイルはこの他にプログラム言語ごとにファイルが用意されていますが、Autoloader.js を使う事で自動的に言語に合わせた js をロードできる仕組みになっています。

言語ごとのファイル名は以下から確認できます。
https://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


スタイルシートは数種類のデザインテーマが用意されています。
shThemeDefault.css の替わりに別のスタイルシートを利用する事も可能です。

デザインテーマごとのファイル名は以下から確認できます。
https://alexgorbatchev.com/SyntaxHighlighter/manual/themes/



BloggerのHTMLヘッダーを編集

必要なファイルが確認できたらいよいよブログへ組み込んでいきます。
右側のメニューから「テーマ」を選択して「HTML編集」をクリックします。


一番下の方にある</body>を見つけましょう。
</body>の直前に以下のコードを挿入します。
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
<!--
SyntaxHighlighter.autoloader(
  'as3 actionscript3      https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAS3.js',
  'bash shell             https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.js',
  'cf coldfusion          https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushColdFusion.js',
  'csharp c-sharp         https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.js',
  'cpp c                  https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.js',
  'css                    https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js',
  'delphi pas pascal      https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDelphi.js',
  'diff patch             https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.js',
  'erl erlang             https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushErlang.js',
  'groovy                 https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.js',
  'js jscript javascript  https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js',
  'java                   https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.js',
  'jfx javafx             https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJavaFX.js',
  'perl pl                https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.js',
  'php                    https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.js',
  'plain text             https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.js',
  'py python              https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.js',
  'rails ror ruby         https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.js',
  'scala                  https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushScala.js',
  'sql                    https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.js',
  'vb vbnet               https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.js',
  'xml xhtml xslt html    https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js'
);
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//-->
//]]>
</script>

編集したら「テーマを保存」ボタンをクリックして保存します。

※SyntaxHighlighter.autoloader はページの中からどの言語が使われているかを検索して該当の js ファイルを読み込みます。つまりページ全体の読み込みが終了してから動作する必要があります。この為<body>要素の一番最後にコードを挿入しています。




記事にソースコードを書き込もう

設定が完了したらあとは記事の中にソースコードを書き込んでいきましょう。

ソースコードは<pre>要素の中に書いていきます。
<pre>要素には class 属性を追加し「brush:プログラム言語名」のように指定します。
利用できるプログラム言語名は以下を参照してください。（Brush aliasesの部分）
https://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

エディタ画面を「HTML」に切り替えましょう。



Label:

コメント

コメントを投稿

登録: コメントの投稿 (Atom)