読者です 読者をやめる 読者になる 読者になる

HYLOGICS

今後は各分室にコンテンツを移して、ここは雑記や暮らしを中心としたライフログ的な何かにしていく予定です。

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

雑記

f:id:kirine:20141205011529p:plain

前置き

今まで何度か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

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

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