BloggerブログにてSyntaxHighlighter(シンタックスハイライト)を導入する方法

昨日、
当ブログに使用している、

SyntaxHighlighter（シンタックスハイライト）の公開されているサーバ?が著しく遅かった為、

≫Syntax Highlighter(シンタックスハイライト)の問題で待機中…。agorbatchev.typepad.com

サーバとして使用可能な方法を探ってみました。

Bloggerブログには、
サーバ機能がないのですが、
同じGoogleのサービスでGoogleDriveがあります。

これは以前に、

CSSとjavaの外部ファイル化の時にも記事（紹介）にしました。

≫Bloggerブログ CSS外部化する方法。ページ表示速度を高速化
≫CSS外部化に続き、GoogleDriveへのJavascriptの外部化

これを参考にして、
同じことができるのではないかと思いました。

結果、
できました。

備忘録としての意味も込めて簡単に投稿しておきます。

さて、
下準備ですが、

まずは、

SyntaxHighlighterのHPに行き該当バージョンのものをダウンロードします。

≫SyntaxHighlighter - Download

最新バージョンであれば、
上部赤い四角枠をクリックしてダウンロードします。

下部に以前のバージョンがあるので、
以前のバージョンが良ければ該当バージョンをクリックしてダウンロードします。

そして、

ダウンロードした圧縮ファイル（zipファイルを解凍します。

その解凍したファイル内容を、
GoogleDriveにそのままアップロードします。

そして、

以前CSSとjavaの外部ファイル化で紹介したように、

『web上で一般公開』
の設定をします。

そして、
使用するJavaScriptファイルのURLをコピーしておきます。
（複数の場合はその数分）

ここからも
以前紹介したCSSとjavaの外部ファイル化と同じように、
GoogleDriveで共有設定にした際のURL
https://drive.google.com/file/d/○○○○○○○○○○○○○○/edit?usp=sharing
の○の部分と、

以下URLの様に上記URLの○の部分をくっつけます。
https://googledrive.com/host/○○○○○○○○○○○○○○○/

↑※ここが重要です。↑

上記の初めのURLのままでは、
公開されないので、
https://drive.google.com/host/
の後に英数字列をつなげます。

これまでは、

以下URLのようにしてライブラリを参照していました。

http://alexgorbatchev.com/pub/sh/current/styles/xxxx.css
http://alexgorbatchev.com/pub/sh/current/scripts/xxxxx.js
※xxxx部分はそれぞれ対応するライブラリファイルを記述して下さい。

（上記URLはバージョンアップにも対応していて、
最新バージョンへリダイレクトされるようです。）

これを、
先程GoogleDriveを使って取得した（得た）、

それぞれのJavaScriptやCSSの公開URLを指定するようにします。

例えば以下のように、

CSSの場合

<link href='https://googledrive.com/host/○○○○・・・/' rel='stylesheet' type='text/css'/>

JavaScriptの場合

<script src='https://googledrive.com/host/○○○○・・・/' type='text/javascript'/>

そして、
最後に、

Bloggerブログでも使用可能なようにいかソースを付け加えます。

SyntaxHighlighter.config.bloggerMode = true;

さらに、

オプション設定を使用可能にするように

SyntaxHighlighter.config.clipboardSwf = ';https://googledrive.com/host/○○○○・・・/';

swfファイルのURL

そして、

マウスオーバーした時に表示される文字が日本語になるように以下も記載します。

SyntaxHighlighter.config.strings.expandSource = 'ソースを展開';
SyntaxHighlighter.config.strings.viewSource = 'プレーン表示’;
SyntaxHighlighter.config.strings.copyToClipboard = 'クリップボードへコピー';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation = 'クリップボードへコピーしました';
SyntaxHighlighter.config.strings.print = '印刷';
SyntaxHighlighter.config.strings.help = 'help';
SyntaxHighlighter.all();

そして、

オプション設定使用可能の部分とマウスオーバーした時に日本語表示される様にしたソースを、

以下の様にします。

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'https://googledrive.com/host/○○○○・・・/';
SyntaxHighlighter.config.strings.expandSource = 'ソースを展開';
SyntaxHighlighter.config.strings.viewSource = 'プレーン表示';
SyntaxHighlighter.config.strings.copyToClipboard = 'クリップボードへコピー';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation = 'クリップボードへコピーしました';
SyntaxHighlighter.config.strings.print = '印刷';
SyntaxHighlighter.config.strings.help = 'help';
SyntaxHighlighter.all();
</script>

取り急ぎ、

以上で終了です。

最後に、
テンプレートのheader内に上記ソースを入れて、
テンプレートの保存をします。

追記）

そのままですと、
SyntaxHighlighter（シンタックスハイライト）に、
マウスオーバーした際に、

• ”クリップボードにコピー”
• ”プレーン表示”
• ”印刷”
• ”ヘルプ”

などの以下画像のようにのが表示されないので、

SyntaxHighlighter（シンタックスハイライト）のCSSファイルである、

shCore.cssの以下画像部分を、

GoogleDriveにアップロードした際の公開URLに変更することで、

以下画像のように、
ちゃんと表示されるようになります。