Sublime Text3 + OmniMarkupPreviewerでMarkdown記法で書いたテキストをリアルタイムプレビューする

前置き

今まで何度かMarkdown記法が楽と聞いたことはあったのですが、実際にMarkdown記法を使ったことがありませんでした。はてなブログではMarkdown記法でエントリがかけるらしいので、サイト移転を機に使っていこうと思います。

幸い普段テキストエディタとして使っているSublime Text3にプラグインを入れるとMarkdown記法で書いたテキストをリアルタイムプレビュー出来るので環境を整備してみました。

sublime text3のインストール

(もしsublime text3がインストールされてないなら)ここからパッケージをDownloadしてインストール

Package Controlを有効にする

詳しくはこちらに書いてある通り

コンソールを表示
Menu -> View -> Show Console

以下の文字列をコピペしてEnter

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

コマンドパレットを表示する

"Command + Shift + P"を同時押し

パッケージ選択

installと入力すると補完されて"Package Controll: Install Package"が選択されるのでそのままEnter

リポジトリに自動接続後、インストール可能なパッケージが表示されたら
"OmniMarkupPreviewer"を選択しEnter
(途中まで入力すると自動補完される)

プレビュー表示

シンタックスをMarkdownに設定する
(これを忘れるとプレビューされない)

Menu -> View -> Syntax -> Markdown -> Markdown
以後は"Command + Option + O"でブラウザ上でリアルタイムプレビューが可能

感想

• リアルタイムプレビューは便利だけどマルチモニタじゃないと不便かも。
• Markdown記法自体はWiki記法に似てるので割とすんなり馴染む感じ。
• 慣れるまでは手元にチートシート置いておきたい

Markdown記法 チートシート - Qiita

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ