スポンサーリンク

2014年4月19日土曜日

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に変更することで、

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

スポンサーリンク


スポンサーリンク

この記事が気に入ったらいいね!
お願いします(#^.^#)

↓↓↓

最新情報をお届けします

言えないことはTwitterで!!


こんな記事も書いてます



関連性の高い記事


0 コメント:

コメントを投稿

次の投稿 前の投稿 ホーム
Related Posts Plugin for WordPress, Blogger...