2016年1月28日木曜日

Windows 10 で Atom を Markdown エディタとして使う

Windows 10 で Atom を Markdown エディタとして使うために行なった作業のメモ。

Atom については、

などをどうぞ。

Atom で Markdown のプレビューを表示する

Atomは標準でMarkdownプレビュー機能が付いています。

Markdownを書いて下のショートカットキーを叩くことで、リアルタイムプレビュー機能が立ち上がります。

control + shift + M

Ref. 【Mac】Atom凄い!Markdownをリアルタイムでプレビューしながら書ける!HTML出力もできる! - 和洋風 KAI (2015-05-08)

md ファイルを開いた状態で、 [Ctrl] + [Shift] + [M] のショートカットを叩くと、画面右側にプレビュータブが表示される。

Atom のエディタのフォントを変更する

Ctrl + , で出てくるSettingsのFont Familyという欄で指定します。

使いたいフォント名を"で囲う。

Ref. Atomでフォントを複数指定してコードも日本語も綺麗にするメモ - Qiita (2015-04-16)

メニューバーから [File] - [Settings] をクリックするか、 [Ctrl] + [,] のショートカットを叩くと、 [Settings] ダブが開く。 少しスクロールすると、 [Editor Settings] という項目が現れるので、その項目以下にある [Font Family] でフォントを指定する。

わたしは "Source Code Pro","MeiryoKe_Gothic" と設定した。

Atom のプレビュータブのフォントを変更する

Ctrl + ,で設定画面を開きます。 ThemesのChoose a Theme下にあるyour stylesheetをクリックしましょう。

表示されたstyles.lessをこれから編集します。 styles.lessはユーザが自由に定義できるスタイルシートです。

Ref. AtomでカッコよくMarkdown PreviewするためのCSS - TANKSUZUKI.COM (2015-04-22)

わたしは、 Markdown のプレビュータブのフォントだけ変更できれば良かったので、開かれた styles.less ファイルの末尾に、

// Styles for the markdown preview.
.markdown-preview {
   font-family: "Source Code Pro", "MeiryoKe_PGothic";
}

とだけ追記し、保存。 保存後、すぐに Markdown のプレビュータブに変更が反映された。

Atom のエディタで不可視文字を表示する

メニューバーから [File] - [Settings] をクリックするか、 [Ctrl] + [,] のショートカットを叩くと、 [Settings] ダブが開く。 下の方にスクロールすると、 [Show Invisibles] という項目が現れるので、これにチェックを入れる。

なお、この項目の少し上に、このオプションで可視化可能な不可視文字をどういった文字で表現するかに関する設定がある。

  • [Invisibles Cr]
  • [Invisibles EoL]
  • [Invisibles Space] - いわゆる半角スペースが対象。いわゆる全角スペースは対象外。
  • [Invisibles Tab] - ハードタブが対象。

0 件のコメント:

コメントを投稿