2016年5月29日日曜日

AtomエディタでのMarkdownのSnippet追加について

Github製のエディタ「Atom」で、MarkdownのSnippetを追加する方法を調べました。

開いたファイルを ".md" の拡張子で保存します。
エディタにキャレットがある状態で、"cmd + option + p" を押すと、画面右上部にコンソールが表示され、そこでこのファイルの拡張子のスコープを知ることができます。

メニューバーから、Atom > Snippets を選択すると、Snippetsの設定画面が表示されるので、そこに自分に必要なSnippetを書いていきます。

Markdown の Snippet の追加

MarkdownのSnippetを追加する場合は次のように記述していきます。

'.source.gfm':
    'h1':
        'prefix': 'h2'
        'body': '## '

1行目:先ほどコンソールで確認したスコープの名前
2行目:適当な名前(何でもOK)
3行目:スニペット(実際に打ち込む値)
4行目:展開後(スニペット + tab で展開)

これで、"h2 + tab" を打ち込めば、"## " が展開されるようになります。
上記の場合は、## の後に、半角スペースも含めています。

半角スペースは必要な分だけ、そのまま記述すればOKです。

記述のルール

$1:スニペットを展開した後のキャレットの位置を指定する
\n:改行

導入例

'.source.gfm':
    'h1':
        'prefix': 'h1'
        'body': '# '
    'h2':
        'prefix': 'h2'
        'body': '## '
    'h3':
        'prefix': 'h3'
        'body': '### '
    'h4':
        'prefix': 'h4'
        'body': '#### '
    'h5':
        'prefix': 'h5'
        'body': '##### '
    'div':
        'prefix': 'div'
        'body': '<div id="$1"> \n      \n</div>'
    'span':
        'prefix': 'span'
        'body': '<span class="">$1</span>'
    'style':
        'prefix': 'style'
        'body': '<style>\n   $1 \n</style>'

Markdown上で、HTMLやCSSを使うこともあるので、これでEmmetを使っているかのように記述していくことができます。

HTH.

0 件のコメント:

コメントを投稿