StackEditで書いたコードをSyntaxHighlighterを使ってBloggerで表示する

ーーー
注意: Chromeでは拡張機能のText URL Linkerを無効にして使ってください。コードのURLの部分がおかしくなります。びっくりしたぁ。
ーーー

いままで結構コードをBloggerにかいてきたけど、なんだか普通の本文とおんなじようなフォントサイズで全然きれいじゃないんです。右につきぬけてるし。くそぅ、Qiitaとかめっちゃきれいにコード表示されてるのに、GoogleのBloggerではできないん? とか、とっても残念だったんですね。

で、色々調べていたら、まさに! というのがあったので試してみました。うまくいくかどうかはやってみてのお楽しみ!

しらべてみよう

コード装飾について調べてみました。

コード装飾って?

ブログとかの記事でコードの部分をきれいに表示するためのプログラムです。プログラム言語にあわせてキーワードを色付けしてくれたり、とっても見やすくなります。いろんなプログラムがあって調べたものを書いておきます。

プロダクト	概要
Highlight.js	シンプルで軽いもの。StackEdit標準対応
Google Code Prettify	Google謹製。StackEdit標準対応
Crayon Syntax Highlighter	PHPで作られたもの。WordPressプラグインが有名
SyntaxHighlighter	老舗。超有名

スペースで区切られた単語2つでSyntax Highlightとか書いてると、それはコードを装飾する機能だと思っていいです。似ているのでちょっと混乱しました。

で、この中でいいなと思ったのがSyntaxHighlighter。きれいに表示してくれるんですよ、これ。完全に好みです。

SyntaxHighlighterってどんなの?

作者はAlex Gorbatchevさんですね。名前からロシア方面の方でしょうか。現在はSan Francisco在住の模様。なおこのページではバージョン3.0.83を配布していますが、最新版はGitHub上のバージョン4みたいです。

見栄えについてはGoogleでSyntaxHighlighterで画像検索すると色々とサンプル出てくるので省略します。みなさんも一度はどこかでみたことあると思います。

ライセンスはMITライセンス、また寄付を募ってらっしゃいます。そうそうたる企業がSyntaxHighlighterを使っているので、さぞかし集まっているんだろうなぁ、と思ったらこんなところに寄付の実績が。あんまり集まってないようですが、ビジネスにできればいいのにね。OSSは難しいです。

参考記事ないの?

“stackedit syntaxhighlighter”で検索したら、一番上にでてくるのが、Blogger, StackEdit and SyntaxHighlighter - Guillaume’s Thoughtsという記事。

参考記事はStackEditを使って書いた記事をBloggerでSyntaxHighligherを有効にする方法について書いています。まんま、私がやりたいことです。簡単に訳しておきます。(* 訳注)

StackEditのSytax Highlightを無効にする

以下のコードを<head>ブロックに追加する。(* 要修正のため後述)

ほら! めっちゃ使えるブログエディターやん! (*謎関西弁)

わし、しばらくブログ書くのにええエディタ探しとってん。GhostもBloggerのエディタもwordpressも試してんけど、ちょっとちょっとわしの思とったんと違うかってん。
LaTexな、よかったで? PDFも作れるしな。せやけどhtmlつくろおもたらえらいしんどいねん。LaTexコンパイルしてhtmlにするツールな、あれ、ちょっとな。
最近な(2014年ごろ)StackEdit見つけてな、これ、Markdown書いてBloggerとかいろんなとこに記事あげれんねん。
いまではもう何でもかんでもStackEditや。ブログだけやのーてホンマにいろんな文章これでかいてんねん。ホンマなんでもMarkdownでかいて、めっちゃつかえるわー。
StackEditな、デフォルトではhighlight.jsってゆーの使ってるんやけど、まあこれも悪うはないんやけどな、まえからSyntax Highlighterつことったさかい、いまさらな。

まさにこれ! って思ったんですが、掲載されてるコードがそのままでは動かなかったんですね。なので修正しながら便利に使えるように設定とかカスタマイズをしていきます。

やってみよう!

ではやってみましょう。

StackEditのSytax Highlightを無効にする

StackEditの左のメニューから「Settings」→「Extensions」→「Markdown Extras」を選び、下の方にある「Syntax Highlighter」で「None」を選び「OK」ボタンを押します。

BloggerのHTMLテンプレートをバックアップ

ここから盛大にBloggerのHTMLテンプレートを触るので、バックアップしておきましょう。ファイル名は”template-(数字の羅列)-.BeforeSH.xml”としました。

BloggerでSytax HighlighterのHosting版を使うコードを追記する

そのままでは動かなかったのでいくつか変更を加えています。

httpsのサイトで使うため、ホスティングサイトを直接指定した。
cssやjsファイルの取得先が、参考サイトだとバージョン番号のところがcurrentになっているのですが、相手のサーバがリダイレクトしてくれます。httpだといいんですが、httpsだとリダイレクトしてくれないんです。なので、リダイレクト先のアドレスを直接書くようにしました。
StackEdit対応のJavaScriptを追記
StackEditで出力されるhtmlをSyntaxHighlighterが期待するように変更するJavaScriptを追記しています。
表示スタイルの変更
フォントサイズが大きかったり、枠がなくってのっぺりしていたのでメリハリつけるようにスタイルを追加しました。
言語指定のないコードブロックのPlain表示
言語指定のないコードブロックがあったら処理が止まってしまっていたのをPlainで表示するようにしました。

なお、StackEditのツールバーのアイコンでcodeタグにしたものはSyntaxHighlighterの処理対象外で、普通に表示されます。

追記するコード

サイトに書かれているコードをBloggerの「テンプレート」→「htmlの編集」で、htmlに追加します。<head>の中に書くこと、と指示があったのでそのようにします。
なお、JQueryは2系を使いましょう。3系では動かなかったです。

<link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushBash.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCSharp.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCpp.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCss.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushDiff.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushDelphi.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJava.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPhp.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPython.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushRuby.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushSql.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushVb.js' type='text/javascript'/>
<script language='javascript' src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' src='https://rawgit.com/creack/GolangHighlighter/master/shBrushGo.js' type='text/javascript'/>
<script language='javascript' src='https://rawgit.com/hekt/1979689/raw/7c93d3e7df76e80c87a7718bb14f0b7b4eb37997/shBrushMarkdown.js' type='text/javascript'/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script language='javascript' type='text/javascript'>
  $(function() {
    // for each pre class='prettyprint';
    $('pre.prettyprint').each(function(a, e) {
      // extract language name
      var specLangAttr = $($(this).context.innerHTML).attr('class');
      var lang;
      if (typeof specLangAttr !== 'undefined' && specLangAttr !== false) {
        lang=specLangAttr.replace('language-', '');
      } else {
        lang='plain';
      }
      // extract html from code into pre
      $(this).html($($(this).context.innerHTML).html())
      // set the pre class to 'brush: language'
      $(this).attr('class', 'prettyprint brush: ' + lang);
    })
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
  }
);
</script>

<style type="text/css"><!--
/* for SyntaxHighlighter */
.syntaxhighlighter {
  font-size: 0.8em !important;
    border:1px solid #bbb;
    padding: 3px;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
                0 0 2px rgba(255, 255, 255, 0.3) inset,
                0 0 10px rgba(0, 0, 0, 0.1) inset,
                0 1px 20px rgba(0, 0, 0, 0.1);
}
--></style>

こんな風に行をハイライトすることもできます。StackEditで```html highlight: [30, 31, 32]と書くと、30～32行目がハイライトになります。開始番号を変えるには、言語名の後ろにfirst-line: 10とかくと開始行が10になります。

バックアップ

うまくできたのでバックアップしておきましょう。ファイル名は”template-(数字の羅列)-.AfterSH.xml”にしました。

その他

SyntaxHighlighterの3系の最新版は3.0.38で、2010年7月2日で更新が止まっています。v4が楽しみです。もう使っている人もいるようです。
GoogleにもGoogle Code PrettifyというSyntax Highlihgterがあり、StackEditも対応しているようです。どちらがいいか比較してみたいですね。

SyntaxHighlighter 3.0.38のHosting版にはautoloader.jsという、コードのところに書かれた言語を読み取って、レンダリングに必要なモジュールを外部サイトから持ってきてくれる便利な機能があります。Hosting版というのは、Webサイトにこのモジュールのファイルを配置しなくても、インターネットに置いてあるファイルを使って機能を利用することができるものです。参考サイトではどうして使っていないのか謎です。

参考サイト (英語が多め)

いつもながら感謝です!

Blogger, StackEdit and SyntaxHighlighter - Guillaume’s Thoughts (2014-9-13)
かー、タイトルからしてそのまんまですわー、かー。すばりStackEditで書いたコードをSyntaxHighlighterを使ってBloggerで表示させるカスタマイズについて書かれています。しかも2年半ほど前。脱帽です。
SyntaxHighlighter 3.0.83 (2014-3-4)
SyntaxHighlighter3系最新版公式サイト。
SyntaxHighlighter v4 (2016-2-13)
SyntaxHighlighter最新版公式サイト。
Bloggerへのhighlight.jsの導入 (2015-5-6)
StackEdit使いの人がコード装飾プログラムを比較しているサイト。私のサイトなんかよりよっぽどためになります。でもSyntaxHighlighterがHaskellに対応していない、と書いてあるのですが、GitHubにHaskellのbrushが登録されていますね。公式にはないのでそういうの見つけるの、大変だったりするんですよね。なおMathJax使いでもあるようで、しっかり記事を読ませていただきます。
BloggerにソースコードをハイライトするSyntaxHighlighterを導入する (2012-02-04)
プロの技術系ライターさんのわかりやすい解説。こちらもしっかり読ませていただきます。またデザイン変更のためのCSS変更方法も書いてて、とても参考になりました。でもSyntax Highlighter Script Generatorはなぜか機能しなかった…
理系っぽいブログの設定 (2012-12-2)
MathJaxとSyntaxHighlighterを使う記事。後はStackEditの話題があれば、まさにこれ! なんですが、それはなかった。ので、この記事を書いたんですね。