すたらブログ

文系Webプログラマの備忘録

SublimeText3: OmniMarkupPreviewerのfont-familyをメイリオにしたい

(最終更新: 2016-08-19)

目次


要望

SublimeText3のパッケージ、OmniMarkupPreviewerを愛用しています。
Ctrl + Alt + oでマークダウンファイルのHTMLプレビューを表示し、
Ctrl + Alt + xでHTMLファイルに書き出してくれます。

ただ、Windowsでは日本語の表示にMS Pゴシックが適用されてしまいます。
そこで、既存のテンプレートから新規作成して、プレビュー用と書き出し用それぞれのCSSfont-familyメイリオを追加します。

また、メディアクエリを使って印刷の場合は文字色を真っ黒にし、文字サイズを大きくします。
順序付きリスト(<ol>)のlist-style-typeを全てdecimalにします。


既存のテンプレートをコピーする

テンプレートファイルの注意書きによると、既存のテンプレートをそのまま編集するとパッケージの更新の際に上書きされ、編集した内容が消えてしまうようです。
そこで、既存のテンプレートをコピーします。

Do NOT Modify this template, create a new one for customization
It will get overwritten upon update

コピー元

下記の場所にある3つのファイルをコピーしてください。
SublimeText3のメニューからPreferences > Browse Packagesと選ぶことで簡単に下記のパスを開けます。

C:\Users\%USERNAME%\AppData\Roaming\Sublime Text 3\Packages\
  └ OmniMarkupPreviewer\
      ├ template\
      │   ├ github.tpl
      │   └ github-export.tpl
      └ public\
          └ github.css

コピー先

Packages\直下にある、ユーザ設定を保管するUser\内に貼り付けます。
コピー元とは微妙にパスが異なっているので注意してください。
3つのファイルをそれぞれ下記のように名称変更してください。

C:\Users\%USERNAME%\AppData\Roaming\Sublime Text 3\Packages\User\
  └ OmniMarkupPreviewer\
      ├ template\
      │   ├ github-meiryo.tpl
      │   └ github-meiryo-export.tpl
      └ public\
          └ github-meiryo.css

テンプレートを編集する

読み込むCSSを変更します。

github-meiryo.tpl

(変更前)
<link rel="stylesheet" type="text/css" href="/public/github.css">

(変更後)
<link rel="stylesheet" type="text/css" href="/public/github-meiryo.css">

github-meiryo.cssgithub-meiryo-export.tplのスタイル指定を上書きする記述を追加します。
実際の例は下記をご覧ください。


OmniMarkupPreviewerのUser設定

最後に、SublimeText3のメニューからPreferences > Package Settings > OmniMarkupPreviewer > Settings - Userと選択し、下記のように設定を記述します。

{
    "html_template_name": "github-meiryo",
    "export_options" : {
        "template_name": "github-meiryo-export",
        "timestamp_format": ""
    }
}

完了

これで完了です。
正直、MacTypeを入れたWindowsならばMS Pゴシックでもなめらかに表示されるので今回の設定は不要なのですが…。


ソースコード入手

GitHubで管理することにしました。


関連記事