1. HOME
  2. ブログ
  3. BloggerでSyntaxHighlighterを使う

BloggerでSyntaxHighlighterを使う

投稿日 2013/03/08

ブログとか始めると結構早い段階で導入する人も多いSyntaxHighlighter
僕もMTの頃から使っていてBloggerにも開設とほぼ同時に設置しました
そのまま1年以上放置していたのですが、今回条件を見直してautoloaderを使う方式に変更したのでメモ

SyntaxHighlighterについてはすでに多くの解説ページがありますが、僕のところでは以下の条件での設置例になります
  • Blogger
  • SyntaxHighlighter3.0系
  • autoloader使用

SyntaxHighlighter3.0系には各言語用のハイライト定義ファイルのオートロード機能があります
必要な定義ファイルだけをロードしてくれるのでページの負荷も減って便利です
<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/shThemeDefault.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/shAutoloader.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
テンプレート -> HTMLの編集
最小限必要なコードを、<head>タグ内に記述する
</head>の直前とかが一般的かな
5行目についてですが、shBrushXml.jsは予め読み込んでおかないとオプションのhtml-scriptが使えません
html-scriptを使わないのなら4行だけの記述でもいいですが、使うかもしれないとか分からないとかなら記述したほうが無難だと思います

<script language="javascript" type="text/javascript">
    function path() {
      var args = arguments, result = [];
      for (var i = 0; i < args.length; i++)
        result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
      return result
    };
 
    SyntaxHighlighter.autoloader.apply(null, path(
      'applescrip             @shBrushAppleScript.js',
      'actionscript3 as3      @shBrushAS3.js',
      'bash shell             @shBrushBash.js',
      'coldfusion cf          @shBrushColdFusion.js',
      'cpp c                  @shBrushCpp.js',
      'c# c-sharp csharp      @shBrushCSharp.js',
      'css                    @shBrushCss.js',
      'delphi pascal          @shBrushDelphi.js',
      'diff patch pas         @shBrushDiff.js',
      'erl erlang             @shBrushErlang.js',
      'groovy                 @shBrushGroovy.js',
      'java                   @shBrushJava.js',
      'jfx javafx             @shBrushJavaFX.js',
      'js jscript javascript  @shBrushJScript.js',
      'perl pl                @shBrushPerl.js',
      'php                    @shBrushPhp.js',
      'text plain             @shBrushPlain.js',
      'py python              @shBrushPython.js',
      'ruby rails ror rb      @shBrushRuby.js',
      'sass scss              @shBrushSass.js',
      'scala                  @shBrushScala.js',
      'sql                    @shBrushSql.js',
      'vb vbnet               @shBrushVb.js',
      'xml xhtml xslt html    @shBrushXml.js'
    ));
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.defaults['toolbar'] = false;
   SyntaxHighlighter.defaults['auto-links'] = false;
   SyntaxHighlighter.all();
</script>
SyntaxHighlighter.autoloaderの記述は公式サイトに書いてあるものをそのまま流用しました
-> SyntaxHighlighter.autoloader

  • 35行目：Bloggerで使うので
  • 36行目：？を無効（非表示）にする
  • 37行目：コード内のリンクを無効
35行目は書いたほうがいいけど、36と37行目は任意です

SyntaxHighlighter.autoloaderの記述にはガジェットを利用します
レイアウト -> ガジェットの追加 -> HTML/JavaScript

タイトルは空欄のままで、コンテンツのエリアに上記のコードをそのまま貼り付けます
配置場所は、下か端っこがいいです

BloggerでSyntaxHighlighterを使う -1

モバイル環境でモバイルテンプレートを使っている場合
-> SyntaxHighlighter モバイルテンプレートでの表示

使い方は僕のところでは説明を省かせてもらいますが、cssについて少しだけ
ChromeやIEで縦スクロールバーを消したいとか、あとデザインをもっと自分のイメージ通りにしたいとか色々あると思います

そういうときcssをカスタマイズするのですが、Bloggerはファイルのアップが出来ません
皆さん、いろんな方法で実現しているのですが僕はDropboxを使っています
-> SyntaxHighlighterのcssの置き場にDropboxを使う

BloggerでSyntaxHighlighterを使う -2

基本的にデフォルトのまま使用していますが、一般的なshCore.css設定例です

縦スクロールバーを非表示にする
07行目を追加
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important;
}

IEで最後の行が隠れるのを回避
03行目、1pxを20pxに変更
.syntaxhighlighter.ie {
  font-size: .9em !important;
  padding: 1px 0 20px 0 !important;
}

SyntaxHighlighterには設定やオプションがたくさんあるので、いろいろ試して自分好みのSyntaxHighlighterを作ってみてください

TOP