SyntaxHighlighterのカスタマイズ

公開日 : 最終更新日 :

カテゴリー :

前回、BloggerでSyntaxHighlighterを使うやり方を紹介しました。今回は、そのSyntaxHighlighterを少しカスタマイズする方法を紹介します。カスタマイズ自体は、WordPressのプラグイン化してあるSyntaxHighlighterはわかりませんが、素のSyntaxHighlighterなら使えるカスタマイズと思います。前回のBlogger適用も含めて3.0.83を使っています。2.X系のSyntaxHighlighterと比べて大きく変わっていますので、2.X系では使えないかもしれません。あとSyntaxHighlighterをCDNからホスティングしているやり方になります。以下がカスタマイズ方法です。

言語読み込みのオートロード

前回は、言語のJavascriptを全て読み込んでからハイライトする言語の表示する方法を書いていましたが、3.0系では、autoloaderという機能が追加され、ハイライトしたい言語のJavascriptを指定出来るようになりました。

  1. 「テンプレート」→「HTMLを編集」ボタンをクリック
  2. 「続行」ボタンをクリック
  3. </body>タグの上部に以下のコードを挿入
  4. 「テンプレートを保存」ボタンをクリック
  5. 完了

やたらごちゃごちゃしたコードになっているのは、言語のJavascriptを全部書いているからです。必要な言語を抜き出して使ってもいいですし、そのまま使ってもいいと思います。SyntaxHighlighterのサイトには、もうひとつサンプルがあるのですが、Bloggerだとうまく適用できなかったので今回は、書いていません。もう少し考えて出来るようになったら書きたいと思います。

テーマの変更

SyntaxHighlighterは、標準のテーマだけではなく様々なテーマが用意されています。テーマを変更するには以下の通りにやります。

  1. 「テンプレート」→「HTMLを編集」ボタンをクリック
  2. 「続行」ボタンをクリック
  3. <head>〜</head>タグの間に書いてある
    の「shThemeDefault.css」の部分をほかのCSSテーマ変更する
  4. 「テンプレートを保存」ボタンをクリック
  5. 完了

変更できるテーマを下に書いています。これらの中から一つ選んでを3番の部分に書き換えてください。「テーマ名 – 書き換えるCSS」の順に書いてます。

  • Default – shThemeDefalt.css
  • Django – shThemeDjango.css
  • Eclipse – shThemeEclipse.css
  • Emacs – shThemeEmacs.css
  • Fade to Grey – shThemeFadeToGrey.css
  • Midnight  – shThemeMidnight.css
  • RDark – shThemeRDark.css

とりあえずはこんな感じでまたいろいろと発見したら、ブログで紹介したいと思います。

参考

ピンバック

コメント

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

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