コンパイラかく語りき

import { Fun } from 'programming'

マークダウンエディタとしてSublimeTextを使う

どうも!chuckです。前回に引き続きマークダウンについて勉強していきます。今回はSublimeTextにてプラグインを導入したので、そのやり方などを。

 

chuckwebtips.hatenablog.com

 

 

SublimeTextでマークダウンを書くプラグイン

導入するプラグインについては全面的にこちらのサイト様にお世話になりました。

マークダウンエディタとして使う方法 [Sublime Text 3 の参考書(実践編)Wiki]

死ぬほどわかりやすかった…(´;ω;`)

 

まずパッケージコントローラよりプラグインをインストールします。

パッケージコントローラって??という人は↓↓ 

chuckwebtips.hatenablog.com

 

今回インストールしたプラグインは5つ。

f:id:chuck0523:20150707060945p:plain

 

 1,Monokai  Extended 

いわゆるセットシンタックス。SublimeTextがマークダウンを認識してカラーリングしてくれます。

使い方はまず「preferences -> Color Scheme -> Monokai Extended -> Monokai Extended」を選択。

f:id:chuck0523:20150707062453p:plain

 

そしてSet Syntax: Markdownを選択して、シンタックスをマークダウンにします。

f:id:chuck0523:20150707062406p:plain

 

その結果がこちら。

f:id:chuck0523:20150707062154p:plain

マークダウンのシンタックスに従ってカラーリングされています。

 

2,Markdown Extended

次にマークダウン以外のコードもハイライトします。

パッケージコントロールよりMarkdown Extendedをインストール。すると、Set SyntaxにMarkdown Extendedが追加されます。

f:id:chuck0523:20150707062917p:plain

 

シンタックスを設定する前のコードがこちら。

f:id:chuck0523:20150707063745p:plain

JavaScriptのコードが認識されていません。Markdown Extendedを選択すると、

f:id:chuck0523:20150707063751p:plain

きちんとコードが認識されてカラーリングされています。(でもいちいち```javascriptって書くのはめんどくさいようなも(文句))

 

3,Trainling Space

HTMLと違ってマークダウン記法では半角スペースやタブが意味を持ちます。半角スペース2個で改行となるので、これもカラーリングして見やすくしておきたいところです。

そこで役に立つのがTrailingSpaceプラグイン。TrailingSpaceをインストールすると、このように半角スペースとタブがカラーリングされます。

f:id:chuck0523:20150707064423p:plain

 

4,OmniMarkdownPreviewer

マークダウンとして書いたものをHTMLとしてリアルタイムで確認できるツールがOmniMarkdownPreviewerです。このプラグインの使い方はカンタンで、ただインストールするだけ!

そしてマークダウンファイルを開いた状態で「cmnd+alt+o」を押すと、ブラウザで確認画面が立ち上がります(すごい!)

 

f:id:chuck0523:20150707065610p:plain

このようにマークダウンがHTMLへと変換されているのがわかります。

 

5,table editor

マークダウンで表を書きやすくするためのプラグインを入れます。table editorをインストールして、プラグインを有効化します。

f:id:chuck0523:20150707070414p:plain

表を作成するには以下のように記述します。

||

|-

縦棒2つと縦棒+ハイフン。ハイフンの直後にカーソルを置いた状態でタブを押すと、テーブルに展開されます。

f:id:chuck0523:20150707070557p:plain

 

f:id:chuck0523:20150707070607p:plain

詳しい使い方はこちら。

vkocubinsky/SublimeTableEditor · GitHub

 

まとめ的な

さて、これでSublimeTextでマークダウンを記述する準備が整いました。次回からは実際にマークダウンを書いていこうと思います。

 

参考にしたサイト様

web-layman.com

webmem.hatenablog.com

ありがとうございましたm(_ _)m