Bloggerでシンタックスハイライトを使う方法

公開日 : 最終更新日 :

カテゴリー :

ソースコードをWEBサイトで綺麗にみせる方法として、シンタックスハイライトがあります。主にsyntaxhighlighterかgoogle-code-prettifyが有名です。特に、syntaxhighlighterは、更新も速くWordpress用のプラグイン等の派生ソフトがあります。そしてなにより高機能でしょう。今回は、Bloggerでsyntaxhighlighterを使う方法を紹介します。syntaxhighlighterはJavascriptで制作されていて、普通にダウンロードして呼び出す方法はBloggerでは使えません。しかし、syntaxhighlighterの制作者Alex GorbatchevさんがCDNを配信してくださっていますので、Blogger用にはこれを使います。使い方は以下の通りです。

テンプレート側の設定

  1. 「レイアウト」→「HTMLを編集」ボタンをクリック
  2. 「続行」ボタンをクリック
  3. <head>〜</head>の間に以下のコードを入力
  4. </body>の上に以下のコードを入力
  5. 上記のコードと</body>の間に以下のコードで使いたい言語が書いてあるJavascriptを選択する
  6. 「テンプレートを保存」ボタンでHTMLの編集は完了

投稿での使い方

  1. 投稿作成画面で左上にある「HTML」ボタンをクリック
  2. 表示させたいソースコードを
    のどちらかを記入
  3. 公開

注意点

  • 「brush:***」の「***」は表示させたい言語を指定します。
  • 「ソースコード」と書いているところは「<」と「>」をエスケープをする必要があります。特に、<pre class=〜では絶対にエスケープが必要です。<script type=〜は、必要ないみたいですが、うまくいかないこともあるらしいのでエスケープするのがおすすめです。
  • 「<」のエスケープは「&lt;」
  • 「>」のエスケープは「&gt;」

今回は、HTMLに追加していく方法をとりましたが、「レイアウト」でガジェットの追加をするやり方でやる方法もあるみたいです。syntaxhighlighterは、様々な言語のソースコードを綺麗に表示できるJavascriptですが、言語を読み込ませるときに、設定した言語.jsを全部読み込んでいるので効率が悪いです。あと、表示するソースのデザインも複数あるので、それを設定する方法を次回やりたいと思います。

参考

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>