Sublime Text 2でMarkdown(Build Systemを自作するときのメモ)[追記あり]

最近Sublime Text 2を使ってる。

MarkdownのSyntaxは用意されていたけど、書いたMarkdownを見る方法が無かったので、考えてみた。

Build System

Sublime Text 2にはBuild Systemというのがあって、ショートカットキー(command + B)一発で書いてる言語に応じたビルドをしてくれる。Markdownについてはこれが非対応なので(というかプログラム言語じゃないのでビルドっていう概念じゃないのかも知れないけど)、ここを自作したい。

Tools→Build System→New Build System...

とやると、新しいJSONが開く。

{
	"cmd": ["open", "/Applications/Mou.app", "$file"],
	"selector": "text.html.markdown"
}

こんな風に書いて、Markdown.sublime-buildという名前で保存した。

上記は、とりあえずMouでこのファイルを開くようにしている。別になんでもいい。

cmd : 呼び出すコマンド。コマンドラインオプションは配列として渡せるっぽい。$fileに開いてるファイルのパスが入る。
selector : これを書くと、Tools→Build System→Automaticのときに、ファイルの種類がMarkdownのときに自動でこのビルド設定が使われるようになる。

selectorについては、書かなくてもTools→Build Systemで自分で選択すればいいんだけど、Automaticに対応させるためにはこういうのを書くらしい。selectorの調べ方は、対象の形式の適当なファイル(今回ならMarkdownなので.mdownなど)を開いて、command + option + Pを押せばステータスバーに表示される。Twitterに書いたら@Fuhdukiさんに教えてもらった。

追記 : 2012-9-8

上で書いたはてな記法のやつと同じような使い勝手になるようにしてみた。

kramdownのインストール

Rubyで書かれたMarkdownパーサー「kramdown」を入れる。gemから。

$ sudo gem install kramdown

/usr/local/bin/markdown_preview

MarkdownのファイルをHTMLに変換してそのままブラウザで開くスクリプト。シェルスクリプトで書いてみた。

#!/bin/sh

TARGET=`mktemp ${TMPDIR}markdownpreview.XXXXXXXX`
TARGET_HTML="${TARGET}.html"
mv ${TARGET} ${TARGET_HTML}

cat << 'EOF' > ${TARGET_HTML}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<style type="text/css">
			body{
				font-family: sans-serif;
				font-size: 100%;
				line-height: 150%;
				color: #333333;
				margin: 0;
				padding: 1em;
			}
			img{
				border: none;
			}
			a{
				color: #009a86;
			}
			h1{
				font-size: 120%;
				color: #ffffff;
				background: #9fbfbe;
				border-left: solid 0.5em #7da5a6;
				margin: 0 0 1em 0;
				padding: 0.3em;
			}
			h2{
				border-bottom: dotted 1px #9fbfbe;
				margin: 1em 0 0 0;
				padding: 0.2em;
			}
			h3{
				font-size: 100%;
				margin: 1em 0 0 0;
			}
			pre{
				font-size: 90%;
				color: #555555;
				background: #ebf6f7;
				border: solid 1px #d7ebed;
				padding: 0.5em 0.8em;
				overflow-x: auto;
				overflow-y: hidden;
			}
			blockquote{
				border: solid 1px #d8ebed;
				margin: 1em 0;
				padding: 0.5em;
			}
			blockquote cite{
				display: block;
				font-size: 90%;
				font-style: normal;
				text-align: right;
			}
			table{
				border-collapse: collapse;
				font-size: 90%;
				margin: 1em 0;
			}
			th{
				background: #ebf6f7;
				border: solid 1px #d7ebed;
				padding: 0.5em;
			}
			td{
				border: solid 1px #d7ebed;
				padding: 0.5em;
			}
		</style>
		<title>Markdown Preview</title>
	</head>
	<body>
EOF

kramdown $1 >> ${TARGET_HTML}

cat << 'EOF' >> ${TARGET_HTML}
	</body>
</html>
EOF

open ${TARGET_HTML}
echo ${TARGET_HTML}

実行権限も与えておいてね。

Preferences.sublime-settings

Sublime Text 2のメニューでPreferences→Settings - Userってやると(もしくはcommand + ,で)開く設定ファイルに以下の記述を追加。

    "build_env":
    {
        "PATH": "/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin"
    }

たぶんこんな感じだと思うけど、心配ならターミナルで

$ echo $PATH

すればわかると思う。

これは、さっき作ったmarkdown_previewが置いてある場所にPATHを通すための設定。

Markdown.sublime-build

{
	"cmd": ["markdown_preview", "$file"],
	"selector": "text.html.markdown"
}

markdown_previewを呼び出すようにするだけ。

おわり

スタイルをカスタムすることもできる。わかるよね。

なんというか、Markdownのリアルタイムプレビューとかもよくあるけど、そこまでは必要ないと思ってる。Markdownのいいところは、元のソースを見ただけで(HTMLに変換しなくても)かなり読みやすいテキストだということ。だから自分の場合そんな頻繁にHTML変換はしない。HTMLにしてあげないと読まないような人に見せるときに使うだけ。

だからこれくらいのシンプルな感じがちょうどいいかなーと思う。Vimのはてな記法のやつもそんな感じでずっと使ってた。

まあでも、作ってみて思ったけど、最初に書いたMouを起動するだけの方が簡単でいいかもね。微調整をMou側でやれるし。

今日覚えたこと