Sublime Text2 | Markdown Preview Pluginの設定をカスタマイズしてgithub.cssおよびRubyのsyntax highlightを適用する

概要

Markdown Preview Pluginの設定をカスタマイズしてgithub.cssおよびRubyのsyntax highlightを適用する

詳細

Markdown Preview Pluginの設定をカスタマイズしてgithub.cssおよびRubyのsyntax highlightを適用します。

設定

Markdown PreviewのSetting - Userのjsonを以下の設定にすればいいはずなのですが動作せず。
syntax highlightはきくけど、github.cssがうまく適用されない。
動いていた時期もあったのですが、いつだかのアップデート以降私の環境では動作しなくなってしまった。

{
  "enable_highlight": true,
  "css": "github.css"
}

仕方ないので「html_template」を利用して同様の機能を自作します。
まず、Markdown PreviewのUser設定のjsonは以下のようにします。

{
"html_template": "・・・Packages\\User\\markdown_template\\template.html"
}

「・・・」の部分はSublime TextのPackageフォルダへのパス。

そしてひな形となるtemplate.htmlを作成します。

template.html

「・・・」の部分はSublime TextのPackageフォルダへのパス。
※Windows7環境で試しました

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Markdown Preview</title>
  <link rel="stylesheet" href="・・・\Packages\User\markdown_template\styles\default.css">
  <link rel="stylesheet" href="・・・\Packages\User\markdown_template\github.css">
  <script src="・・・\Packages\User\markdown_template\highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
{{ BODY }}
</body>
</html>

サンプルMarkdown(テキスト)

# tmp


# head1
## head2
### head3

| header | header | header | 
|:--:|:--:|:--:|
|column|column|column|
|column|column|column|
|column|column|column|

~~~ruby
class Hoge
  def hoge
    "hoge"
  end
end
~~~

~~~bash
echo hoge
pwd
ls
find . -name *.rb | xargs grep "hoge"
~~~

* list
* list
* list

1. numbered list
1. numbered list
  1. numbered list
  1. numbered list
1. numbered list

*italic*
**bold**