MarkdownでHTMLを簡単に - Sublime Tex 編
初回公開:
最終更新:2018/01/01
【 目次 】
「Sublime Tex」にMarkdownを使うためののプラグインを入れてみた。
プラグインを探す
Windowsでも使えそうなプラグインをクグってみる。
- Sublime Text で Markdown を快適にする3つのパッケージ - 情報系大学生のWebメモ
- [捗]Windowsでもいけます!Sublime Text 3でMarkdownを快適に入力するためのプラグインを5つ紹介 | 捗りあん
上記を参考にインストールしたのが以下のプラグイン。
- OmniMarkupPreviewer - Markdown をプレビュー
- Monokai Extended - Markdown をシンタックスハイライト
- Markdown Extended - Markdown 内のコードをシンタックスハイライト
- Trailing Spaces - 行末のスペースをハイライト
- Table Editor - Markdown Extraによる表の編集を簡単に
Markmon + pandoc
Sublime TexからMarkdownをプレビューするには他にも、Markmonとpandocの組み合わせもあるようで Pandocを使えば、WordのドキュメントやHTML(HTMLのスライド)とか、いろんなフォーマットに変換できるらしい。
いろいろな事ができそうだが、Windowsで動くかどうかわからないし, Wordやpdfに変換する必要性もないし,なんだか面倒くさそうなのでやめた。
一応、後で必要になった時のために参考URLだけ記録しておく。
- Sublime Text 3 を最強の Markdown エディタに。 - Layman's Web Creation.
- 最強のMarkdownエディタの作り方 - ノグチカ備忘録
- SublimeText3+MarkdownでPDF文書やスライドを作る - Qiita
- プレゼン資料だって説明書だってOK、Markdownのススメ | WP-D
OmniMarkupPreviewer - Packages - Package Control
OmniMarkupPreviewerというプラグインを入れると、Sublime Textで編集中のMarkdownファイルを、HTMLに変換してどのように表示されるかWebブラウザで参照したり、HTMLに変換したファイルを保存したりできる。
ショートカット
Ctrl+Alt+O: Preview Markup in Browser. Webブラウザにて編集中のMarkdownテキストをプレビューする。 Ctrl+Alt+X: Export Markup as HTML. 編集中のMarkdownテキストをHTMLに変換してファイルに保存 Ctrl+Alt+C: Copy Markup as HTML. 編集中のMarkdownテキストをHTMLに変換してクリップボードにコピー
エディタ上でマウスを右クリックして表示されるメニューにても実行可。
カスタマイズ
メニューの「Preferences」→「Package Settings」→「OmniMarkupPreviewer」→「Settings-Default」にてDefaultの設定を確認。
リスト1(OmniMarkupPreviewer.sublime-settings)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | /* OmniMarkupPreviewer default setting, DO NOT MODIFY */ { "server_host": "127.0.0.1", "server_port": 51004, "refresh_on_modified": true, // delay after modified, in milliseconds "refresh_on_modified_delay": 500, "refresh_on_saved": true, // User defined command for launching preview in web browser // For example: // Launching preview using chrome in OS X: // ["open", "-a", "chrome", "{url}"] "browser_command": [], // User public static files should be placed into // ${packages}/User/OmniMarkupPreviewer/public/ // User templates should be placed into: // ${packages}/User/OmniMarkupPreviewer/templates/ // Requires browser reload "html_template_name": "github", // Polling interval for content changes in web browsers, in milliseconds // Requires browser reload "ajax_polling_interval": 500, // list of renderers to be ignored, case sensitive. // Valid renderers are: "CreoleRenderer", "MarkdownRenderer", "PodRenderer", // "RDocRenderer", "RstRenderer", "TextitleRenderer" // for example, to disable Textile and Pod renderer: // "ignored_renderers": ["TextitleRenderer", "PodRenderer"] "ignored_renderers": ["LiterateHaskellRenderer"], // Enable MathJax (http://www.mathjax.org/) // MathJax javascript libraries will downloaded automatically, it may take some while. // When MathJax is properly installed into OmniMarkupPreviewer/public/mathjax, you // have to reload your browser to get mathjax work. // KNOWN ISSUES: // * It may be slow base on your computer/browser performance, so you may want to // tune the following options: // "ajax_polling_interval", "refresh_on_modified" and "refresh_on_modified_delay" "mathjax_enabled": false, // Custom options for exporting "export_options" : { // follow "html_template_name" rules "template_name": "github-export", // ".": export to the same folder as markup file. // null: export to system temp folder. // NOTE: folder shall exist, or it will fallback to system temp folder. "target_folder": ".", // format string for filename timestamp "timestamp_format" : "_%y%m%d%H%M%S", "copy_to_clipboard": false, // Open with default browser or whatever customized in "browser_command". "open_after_exporting": false }, // MarkdownRenderer options "renderer_options-MarkdownRenderer": { // Valid extensions: // - OFFICIAL (Python Markdown) - // "extra": Combines ["abbr", "attr_list", "def_list", "fenced_code", "footnotes", "tables", "smart_strong"] // For PHP Markdown Extra(http://michelf.ca/projects/php-markdown/extra/) // "abbr": http://packages.python.org/Markdown/extensions/abbreviations.html // "attr_list": http://packages.python.org/Markdown/extensions/attr_list.html // "def_list": http://packages.python.org/Markdown/extensions/definition_lists.html // "fenced_code": http://packages.python.org/Markdown/extensions/fenced_code_blocks.html // "footnotes": http://packages.python.org/Markdown/extensions/footnotes.html // "tables": http://packages.python.org/Markdown/extensions/tables.html // "smart_strong": http://packages.python.org/Markdown/extensions/smart_strong.html // "codehilite": http://packages.python.org/Markdown/extensions/code_hilite.html // "meta": http://packages.python.org/Markdown/extensions/meta_data.html // "toc": http://packages.python.org/Markdown/extensions/toc.html // "nl2br": http://packages.python.org/Markdown/extensions/nl2br.html // - 3RD PARTY - // "strikeout": Strikeout extension syntax - `This ~~is deleted text.~~` // "subscript": Subscript extension syntax - `This is water: H~2~O` // "superscript": Superscript extension syntax 0 `2^10^ = 1024` // "smarty" or "smartypants": Python-Markdown extension using smartypants to emit // typographically nicer ("curly") quotes, proper // ("em" and "en") dashes, etc. // See: http://daringfireball.net/projects/smartypants/ // And: https://github.com/waylan/Python-Markdown/blob/master/docs/extensions/smarty.txt "extensions": ["tables", "strikeout", "fenced_code", "codehilite"] } } |
英文ではあるが、随所にわかりやすいコメントが記述されている。
このコメントを参考にカスタマイズ方法を検討してみる。
HTML出力のテンプレートを変更
HTML変換の際に生成されるHTML出力のテンプレートを変更するには21行目の「html_template_name」を変更すれば良いようだ。
デフォルトでは「github」というファイル(github.tpl)
が指定されている。
出力されるHTMLフォーマットはこのテンプレートファイルに記述されている。
このファイルはメニューの「Preferences」→「Browse Packages...」で表示されるデレクトリの「Sublime Text 3\Packages\OmniMarkupPreviewer\templates」に
保存されている。
このファイルを、「Sublime Text 3\Packages\User\OmniMarkupPreviewer\templates」にコピーしていろいろと修正を加えれば良さそう。
CSSや画像ファイルは「Sublime Text 3\Packages\User\OmniMarkupPreviewer\public」にファイルをおいて「/public」で参照するよう。
- 注意
-
「Sublime Text 3\Packages」デレクトリのファイルを変更してはならない。
なぜなら、「Sublime Text」のパッケージは自動的にupdateされるようで、せっかく変更を加えたファイルも上書きされて消えてしまう。
必ず、Userデレクトリにコピーした上で修正を加えよう。
「OmniMarkupPreviewer - Sublime TextのMarkdownプレビューでCSSを切り替えられるようにする - Qiita」 に、cssをプレビュー画面から切替えられる面白いカスタマイズ方法が載っていていろいろ応用できそう。
HTML変換後のファイル保存デレクトリを指定
51行目の「export_options」の「target_folder」で、HTML変換後のファイル保存デレクトリを指定できるらしい。
Python-Markdownの拡張機能を利用する。
OmniMarkupPreviewerはPython-MarkdownというPythonのMarkdownライブラリ(Markdown 2.5.2 : Python Package Index )を使用しているようで、Python-Markdownの拡張機能(Extensions — Python Markdown)を追加できる。
リスト1のextensionsの上にコメント(61行目以降)に記述してあるURLにPython-Markdownの拡張機能の説明がのっている。
このライブラリを使って自作のMarkdownを拡張したPythonプログラムをつくれるカモ。
ちなみに、extensionsのモジュールは私の環境ではC:\Users\[ユ-ザ]\AppData\Roaming\Sublime Text 3\Packages\OmniMarkupPreviewer\OmniMarkupLib\Renderers\libs
に保存されている。
【toc】 - 目次を表示
目次を表示させるには「extensions」に"toc"を追加する。
メニューの「Preferences」→「Package Settings」→「OmniMarkupPreviewer」→「Settings-User」を選択して「OmniMarkupPreviewer.sublime-settings」ファイルを以下のように修正。
ついでに、HTML出力のテンプレートファイルとHTML変換後のファイル保存デレクトリの修正箇所も示しておく。
{
"html_template_name": "HTML出力のテンプレートファイル",
"export_options" : {
"target_folder": "HTML変換後のファイル保存デレクトリ"
},
"renderer_options-MarkdownRenderer": {
"extensions": ["tables", "strikeout", "fenced_code", "codehilite",
"toc"]
}
}
【subscript,superscript】 - 下付き・上付きテキストの表示
HTMLにはSUPタグとSUBタグというのがあって上付き・下付き文字を表示できるらしい。(Super/SubScript)
下付きを表示させるには「extensions」に"subscript"を,上付きを表示させるには"superscript"を追加する。
H~2~O
は「H2O」に,2^10^ = 1024
は「210 = 1024」と表示できる。
と、ここまでは良かったのだがsubscriptを指定すると、~~打ち消し文字~~
の~
文字が下付きとバッティングして、打ち消し線として使えないという副作用が発生してしまった。
どちらかの機能を捨てざるをえないのかな?
【attr_list】 - id属性やclass属性などの属性を指定する
「extensions」に"attr_list"を追加するとid属性やclass属性、さらに任意の属性を指定する事ができる。
例えば、リンクを別Windowで表示させるためには
[リンク](http://ichitcltk.hustle.ne.jp/gudon2/index.php){: target="_blank"}
のように記述すれば良い。
attr_listの指定はmarkdown記号の後でないと記述できないようで、特定の文字列にattr_listを指定するには、強調を示す*文字列*
を利用して以下のように指定することができる。
ここではstyle属性を指定して、赤い色で表示させている。
文字列を*赤色*{: style="font-style:normal; color: red;"}で表示させます
font-styleにnormalを指定しているのは強調のemタグの機能をキャンセルするためである。
【codehilite】 - ソースのコードブロックのシンタックスハイライトを実現。
「extensions」に"codehilite"を追加。
OmniMarkupPreviewerはPython-Markdownを利用しており,さらにそのPython-Markdownの拡張機能codehiliteはPygments(Welcome! — Pygments)というシンタックスハイライトのhtmlコードを生成するライブラリを使っている。
```python # pythonのコード ```
のように記述すると、pythonのコードのシンタックスハイライトを実現してくれる。
サポートしている言語は、
Pygmentsは行番号を生成してくれる機能も持っているが、OmniMarkupPreviewerでどのように指定すれれば良いのかググッてみたがさっぱり方法がわからない。
Pygmentsの行番号の生成にはlinenumsというオプションをTrueに設定する必要があるが、それをmarkdownでどのように記述したら良いのだろうか?
多分、OmniMarkupPreviewerでは指定できないのであろう。
悩んだ末に、OmniMarkupPreviewerのソースコード(OmniMarkupPreviewer/codehilite.py at master · timonwong/OmniMarkupPreviewer · GitHub:)を修正してlinenumsという変数を強制的にTrueに変更することで解決した。(邪道ではあるが)
codehiliteの表示サンプル⇒codehiliteのサンプル
OmniMarkupPreviewerがupdateされるたびにこの修正が消えてしまうので、ダサしょっぱいがそのたび手作業で復旧させるようにしている。
pygments
pygmentsにはいろいろな使い方があるようなので、いちおう参考URLを記しておく。
- Pygments 利用ノート — 読書ノート v1.4.0dev
- Pygments を Windows にインストールして使う方法 - Web/DB プログラミング徹底解説
- Pygments による コードハイライト表示 — Sphinx Memo 2012/06/02 documentation
Table Editor
Sublime Text の Table Editor で Markdown の表を書くのが楽ちんになった - rakugakibox.netがわかりやすい。
使い方はいろいろあるので、Table Editor - Packages - Package Controlのドキュメントを参照。
テーブル内でTabキーを押すことで、テーブルを整形したり,行を追加したり,次のセル/前のセル(Shift+Tabキーで)へカーソール移動してくれる。
列の挿入はテーブル内の列挿入位置にカーソルをおいてalt+shift+→。
ちなみに、alt+shift+←キーにて列削除になる。
列移動:alt+→で右に列を右に移動,alt+←で左に移動。
行の挿入:alt+shift+↓
行の削除:alt+shift+↑
csv形式のテキストをテーブル形式に変換するには、
対象のcsvテキスト選択してCtrl+K , Shift+\。