2016年5月30日月曜日

Atom EditorでMarkdownをするための初期設定

Github製の高機能テキストエディタ「Atom」でMarkdownを使いこなすための初期設定をご紹介します。

ショートカットキーはMacのものを書きましたが、Windowsでもほぼ同じです。適宜読み替えて下さい。

インストールしたPackage


AtomエディタでMarkdownを始めるときに、必須のパッケージを紹介します。

まず初めに、快適かつ実用的にMarkdownを使っていくために必須のPackageは、以下の10個です。
  • emmet-symplified
  • markdown-preview-plus
  • mathjax-wrapper
  • mathjax-wrapper
  • autocomplete-mathjax
  • markdown-pdf
  • markdown-scroll-sync
  • markdown-table-formatter
  • markdown-toc
  • markdown-writer

Markdown関連のみに特化したものなので、それ以外のコードの場合は別途、他のPackage をインストールして下さい。

次に、各Packageの解説をしていきます。


emmet-symplified


Atomでは、標準で、“ctrl + shift + m” によってMarkdownをプレビューする機能が搭載されています。

emmetでは通常、このショートカットが別の機能に割り当てられていて、正常にプレビューしなくなるので、普通の「emmet」の代わりに、「emmet-symplified」を入れることで、このショートカットキーのキーコンフリクトを修正してくれるので、従来のまま、“shift + cmd + m” でMarkdownをプレビューすることがきでます。


markdown-preview-plus


Atomをインストールすると、デフォルトで、「markdown-preview」というPackageがインストールされているのですが、Markdownをさらに使いやすくするために、「Markdown-preview」を無効化(Disable)にして、「Markdown-previewer-plus」を導入します。

これを導入すれば、Markdown内でMathjaxによるLatexでの数式のレンダリングができるようになるのと、Pandocが使えるので、Markdownをpdfなどでレンダリングできるようになります。

mathjax-wrapper


「markdown-previewer-plus」と同時に、「mathjax-wrapper」をインストールすることで、Markdown内でLatexが認識されるようになります。

“ctrl + shift + m” でMarkdownをプレビューしたあとに、“ctrl + shift + x” で Latex をレンダリングできます。

設定により、“ctrl + shift + x” のショートカットを省略できるので、プレビューを表示した段階で、数式も自動でレンダリングされます。


autocomplete-mathjax


mathjaxのautocomplete機能が追加されます。

「autocomplete-plus」というPackageに依存していますが、これは、デフォルトでインストールされています。
markdown-pdf

「markdown-pdf」は、Markdownで記述されたファイルをPDF化するためのPackageですが、「markdown-previewer」を無効化している状態では使用できません。

「markdown-previewer-plus」を使用している場合は、このPackageではなく、「markdown-themable-pdf」というPackageを使うと、「ctrl + shift + E」で、PDF化できます。

設定では、CSSのを好みに合わせて選択できます。


markdown-scroll-sync


このPackageは、入力画面とプレビュー画面を同期し、どちらかをスクロールすればもう一方も自動でスクロースしてくれるという機能です。
markdown-table-formatter

Markdownでのテーブルの記述をサポートしてくれるPackageです。


markdown-toc


MarkdownでのTOC(Table of Contents、目次)を自動生成するためのPackageです。
markdown-writer

Enterやtabの挙動を設定したり、直接、MarkdownからBlogへの投稿を設定したりできます。



その他インストールしたPackage一覧



  • tag
  • auto-complete
  • livestyle-atom
  • fie-icons
  • highlight-line
  • highlight-selected
  • minimap
  • pigments
  • colorpicker
  • project-manager
  • show-ideographic-space
  • tabs-to-spaces


Markdownでおすすめのテーマ


UI Theme: One Dark Syntax Theme: Monokai



MarkdownのプレビューのCSS設定


CSSは、設定 > テーマ > スタイルシート から設定することができます。

Markdownのプレビュー画面に割り当てられているクラスは、「markdown-preview」ですので、このクラスに対してCSSを記述して行きます。

CSS自体は普通に記述していけばいいのですが、色に関するものは、「!important」を付けないと反映されません。

下記の設定は、 AtomでカッコよくMarkdown PreviewするためのCSS で紹介されていた設定を参考にさせていただいたものに、自分用に修正を加えています。


Markdownでのスニペットの設定


Markdownで使える独自のスニペットを作る方法は、前回の記事に書いてあるので、そちらを参考にしてみてください。

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

HTH.

0 件のコメント:

コメントを投稿