ページ

▼

2012/02/04

BloggerにソースコードをハイライトするSyntaxHighlighterを導入する

たまにブログなどで綺麗にソースコードを表示しているサイトを見かけますよね？
ソースコードを文法的に色を変えて(シンタックスハイライトして)表示していて綺麗ですね。
ブログなどでシンタックスハイライトするにはSyntaxHighlighterというのを使います。

まずはSyntax Highlighter Scripts Generatorで必要な言語を選択してください。
ちなみにココでハイライトのテーマも選ぶことができます。
SyntaxHighlighter - Themesで事前に好みのテーマを確認できるから要チェックです。

Generateボタンを押したらテキストエリアにコードが表示されるからコピペしましょう。
<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/shBrushJava.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
例えば、これはJavaだけを選択してGenerateボタンを押した時のコードです。
このように2行目に選択したテーマのCSSがあり、4行目以降にに選択した言語のJSファイルがあります。

これをそのまま使用しても良いのですが、表示少し微妙なのでCSSを少し編集します。
まずはhttp://alexgorbatchev.com/pub/sh/current/styles/shCore.cssにアクセスして、
中身をコピーしてエディタなどに貼り付けて編集しましょう。

縦スクロールバーを消す

.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で最後の行が横スクロールバーに隠れるのを防ぐ

.syntaxhighlighter.ie {
  font-size: .9em !important;
  padding: 1px 0 20px 0 !important; // 1px->20pxに変更
}
DevAchieve: BloggerをIEで開くと最新版でもIE7として表示されることによる問題で説明したコードを削除した場合、
IE8以上ならばこの問題は発生しないのでCSSを変更する必要はありません。

以上でshCore.cssの編集が完了しました。
ファイルのアップロードに対応したブログサービスならばコレを保存して、
ブログにアップロードして上で生成したコードの1行目のURLと差し替えればOK！
Bloggerはファイルのアップロードができないので、
設定画面＞テンプレート＞カスタマイズ＞アドバンス＞CSSを追加、に
書き換えたCSSを貼り付けてブログに適用しましょう。

右上の"？"の非表示にする

<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タグ
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.defaults['toolbar'] = false;
 SyntaxHighlighter.all();
</script>
7行目のオプションを設定しておくことによって非表示にすることができます。
これで設定は以上です。
このコードを</head>の直前に貼りつければ導入は終了です。

次の記事ではSyntaxHighlighterの使い方を説明します。
次の記事：DevAchieve: ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす