昨日、
当ブログに使用している、
スポンサーリンク
- SyntaxHighlighter（シンタックスハイライト）の公開されているサーバ?が著しく遅かった為、
- CSSとjavaの外部ファイル化の時にも記事（紹介）にしました。
- 備忘録としての意味も込めて簡単に投稿しておきます。
- SyntaxHighlighterのHPに行き該当バージョンのものをダウンロードします。
- ダウンロードした圧縮ファイル（zipファイルを解凍します。
- 以前CSSとjavaの外部ファイル化で紹介したように、
- ↑※ここが重要です。↑
- 以下URLのようにしてライブラリを参照していました。
- それぞれのJavaScriptやCSSの公開URLを指定するようにします。
- CSSの場合
- JavaScriptの場合
- Bloggerブログでも使用可能なようにいかソースを付け加えます。
- オプション設定を使用可能にするように
- マウスオーバーした時に表示される文字が日本語になるように以下も記載します。
- オプション設定使用可能の部分とマウスオーバーした時に日本語表示される様にしたソースを、
- 以上で終了です。
- 追記）
- SyntaxHighlighter（シンタックスハイライト）のCSSファイルである、
- GoogleDriveにアップロードした際の公開URLに変更することで、
SyntaxHighlighter（シンタックスハイライト）の公開されているサーバ?が著しく遅かった為、
≫Syntax Highlighter(シンタックスハイライト)の問題で待機中…。agorbatchev.typepad.com
サーバとして使用可能な方法を探ってみました。
Bloggerブログには、
サーバ機能がないのですが、
同じGoogleのサービスでGoogleDriveがあります。
これは以前に、
CSSとjavaの外部ファイル化の時にも記事（紹介）にしました。
≫Bloggerブログ CSS外部化する方法。ページ表示速度を高速化
≫CSS外部化に続き、GoogleDriveへのJavascriptの外部化
これを参考にして、
同じことができるのではないかと思いました。
結果、
できました。
備忘録としての意味も込めて簡単に投稿しておきます。
さて、
下準備ですが、
まずは、
SyntaxHighlighterのHPに行き該当バージョンのものをダウンロードします。
最新バージョンであれば、
上部赤い四角枠をクリックしてダウンロードします。
下部に以前のバージョンがあるので、
以前のバージョンが良ければ該当バージョンをクリックしてダウンロードします。
そして、
ダウンロードした圧縮ファイル（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に変更することで、
以下画像のように、
ちゃんと表示されるようになります。
コメント