SublimeText3: OmniMarkupPreviewerのfont-familyをメイリオにしたい
(最終更新: 2016-08-19)
目次
要望
SublimeText3のパッケージ、OmniMarkupPreviewerを愛用しています。
Ctrl + Alt + o
でマークダウンファイルのHTMLプレビューを表示し、
Ctrl + Alt + x
でHTMLファイルに書き出してくれます。
ただ、Windowsでは日本語の表示にMS Pゴシックが適用されてしまいます。
そこで、既存のテンプレートから新規作成して、プレビュー用と書き出し用それぞれのCSSのfont-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を変更します。
(変更前) <link rel="stylesheet" type="text/css" href="/public/github.css"> (変更後) <link rel="stylesheet" type="text/css" href="/public/github-meiryo.css">
github-meiryo.css
とgithub-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で管理することにしました。
- GitHub: my template OmniMarkupPreviewer
- 保存する場所:
C:\Users\%USERNAME%\AppData\Roaming\Sublime Text 3\Packages\User\OmniMarkupPreviewer\