ページ

▼

2013-08-27

【Google Blogger】ソースコードをきれいに表示してくれるSyntaxHighlighterをブログにウィジェットで導入！

前々から気になっていたんですけど、ブログに載せるソースコードがイマイチきれいじゃないな、と。色々なブログを見ていると、とてもきれいにソースコードを表示していて、あんな風にきれいに表示するにはどうしたらいいんだろうかと思ってました。ソースコード ビュー ライブラリ「SyntaxHighlighter」を使って行番号や行ごとへの背景色で見やすくしていたんですね。でも、この「SyntaxHighlighter」、ダウンロードして自分のブログ・サーバにプログラムをアップロードしないといけないんですよね。このブログを書いているGoogle Bloggerではファイルのアップロードが出来ません。「SyntaxHighlighter」を使うのは無理だなと諦めていたら、「Syntax Highlighter Scripts Generator」なるBlogger Widgetsがありました。


「Syntax Highlighter Scripts Generator」をBloggerに導入

「Syntax Highlighter Scripts Generator」はGoogle Bloggerにソースコードのきれいに表示してくれる機能を追加できるウィジェットを生成してくれます。導入の手順は他のWidgetsと変わりません。
  1. テーマ・言語を選択
    2.  WAY2BLOGGINGサイトのSyntax Highlighter Scripts Generatorページにアクセスします。スクリプト作成設定用に表示テーマとソースコードでハイライト表示させたい言語（複数選択可）を選び、Generateボタンをクリックします。


    ●テーマの選択（サンプル）

    1. Default
    2. RDark
    3. Midnight
    4. MDUltra
    5. Fade To Grey
    6. Emacs
    7. Eclipse
    8. Django

      9. テーマの見本はこちらのサイトで確認できます。

  2. 生成されたスクリプトをコピー
    3.  Generateボタンをクリックすると、スクリプト表示ページ遷移します。生成されたスクリプトを直接コピーするか、Copy To ClipBoardボタンでクリップボードにコピーします。


  3. BloggerのHTMLにスクリプトを挿入
    4.  Bloggerの「テンプレート」→「HTMLの編集」でHTMLのソースを表示します。 <head>から </head>の間にコピーしたスクリプトを挿入します。ここでは </head>の前に入れました。


    生成されたスクリプトをBloggerのHTMLにそのまま移植して「テンプレートを保存」ボタンをクリックすれば、設定終了です。ただ、このままだとソースコードを表示したときに右上に「？」マークが表示されます。「？」マークをクリックすると「SyntaxHighlighter」のバージョン情報など書かれた画面が別ウインドウで表示されます。少し登録したソースコードに書き加えるだけで、「？」マークは外すことができます。

    ●ソースコード表示画面の右上にある「？」マーク


    ●「？」マークをクリックすると「SyntaxHighlighterについて」を表示


  4. 「？」マークを外す
    5.  BloggerのHTML編集画面で挿入したプログラムの下の方に1行プログラムを挿入しましょう。挿入した最後の行</script>の2行前、下のプログラムの15行目に1行プログラム[SyntaxHighlighter.defaults['toolbar'] = false;]を追加しました。この行を挿入することで「？」マークを非表示にすることができます。
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.defaults['toolbar'] = false;
 SyntaxHighlighter.all();
</script>


News Source Site

時刻:

0 件のコメント:

コメントを投稿