AtomでMarkDown記法を使いこなす!MarkDownエディタはAtomがおすすめ

atom_markdown

文章を作成する時、MarkDown記法って便利ですよね。私はWordPressのブログ記事を作成するのにMarkDownを利用しています。

MarkDown記法とは、整形された文章がhtmlタグを使わずに書けるものと思っていただければ十分です。かんたんな記法を覚えるだけです。具体的な書き方は後半に出てきます。

MarkDownエディタは多数あるのですが、断然、Atomがおすすめです!

スポンサーリンク

Atomとは

GitHub製のフリーのテキストエディタです。Sublime Text、Brackets等と並ぶ高機能なテキストエディタです。標準でMarkDownに対応しています。すでにメインエディタとして使っている方も多数います。エディタとして使う価値が十分あります。

なぜAtomなのか

MarkDownエディタは多数あります。その中でもAtomが優れているのは以下の点です。

  • MarkDownを書きながらリアルタイムプレビューが可能
  • MarkDown内にHTMLタグ、CSSの記述(混在)が可能
  • プレビュー自体にCSS適用が可能。WordPress等のブログ記事と同じ見た目にできる。

リアルタイムプレビューできるので、書きながら意図した見た目になっているか即座に確認できます。ブログ記事の下書きをしてるときなど、重宝します。

プレビューの見た目をカスタマイズできるのもポイントです。ブログ記事と同じCSSを適用すれば、リアルタイムでブログ記事完成まで確認できます。ブログ記事を下書きして保存、プレビュー画面に移動といった面倒がありません。

Atomのインストールと設定

Atom公式サイトはこちら。ダウンロードすればすぐに使えます。より使いやすくするために少しだけ設定しましょう。

日本語化

メニュー等が英語なので、苦手な方は日本語化しましょう。パッケージをインストールするだけです。

Macの場合

  • Atomを開く
  • Atom-Preferenceを開く
  • 左メニューのInstallを選択
  • 右の検索窓に「japanese-menu」と入力してEnterキーを押す
  • 検索結果からjapanese-menuを探し、Installボタンをクリック

wpatom01

Windowsでもほぼ同じ手順です。

MarkDownプレビュー用にCSSを設定する

プレビューの見た目を変更できます。通常のスタイルシートなので、すでにWordPress投稿表示で指定しているCSSを利用できます。以下、日本語化している前提の説明です。

  • Atom-環境設定を開く
  • 左メニューのテーマ選択
  • スタイルシートリンクをクリック

wpatom02

styles.lessファイルが開くので、.markdown-previewというクラスに対してスタイルを設定します。

CSS設定サンプル

.markdown-preview {
  h1, h2, h3, h4, h5 {
    font-weight: normal;
  }
  h1 {
    font-size : 28px;
    margin:10px 0px;
  }
}

改行を認識させる

MarkDown記法の改行は半角スペース2個です。そのままだと通常の改行で改行されませんので、通常の改行で改行される設定を行います。

  • Atom-環境設定を開く
  • 左メニューのパッケージ選択
  • markdown-previewを探し、設定ボタンをクリックする

wpatom03

設定画面が開くので、Break On Single Newlineにチェックを入れる

wpatom04

MarkDown記法の書き方

MarkDown記法は、半角記号と半角スペース1個がルールです。よく使うものを抜粋します。

h1~h6(見出し)

#を使います。#の数でh1~h6まで表します。

# h1
## h2
### h3
#### h4
##### h5
###### h6

h1

h2

h3

h4

h5
h6

p(段落)

前後に改行があると自動的にpタグで囲まれます。

ul(箇条書きリスト)

-,+,*のいずれかでリストになります。どれでも結果は同じです。リスト中でインデントすることで階層構造になります。

- リスト
  - ネストされたリスト
  - ネストされたリスト
- リスト
- リスト
  
  • リスト
    • ネストされたリスト
    • ネストされたリスト
  • リスト
  • リスト

ol(番号付きリスト)

1.など、半角数字と半角ピリオドで表します。
1.リスト1
2.リスト2
3.リスト3
  1. リスト1
  2. リスト2
  3. リスト3

em,strong(強調)

*,_のいずれかで囲みます。

*em*
**strong**

em
strong

br(改行)

連続した半角スペース2個で表します。

blockquote(引用)

先頭に>を付けます。

> 引用です。

引用です。

a(ハイパーリンク)

[]内に表文字列()内にURLを記載します。

[Google](http://google.co.jp)

Google

img(画像)

ハイパーリンクの前に!マークを付けます。

![Alt属性の内容](http://example.co.jp/img/img01.jpg)

MarkDown記法は他にもあります。MarkDown記法で検索すると解説サイトが多数あります。 例えばこちらのサイトなど。

MarkDown中にHTMLタグやCSSを記述できます。普通のHTMLと同じように<div class="main"></div>など書けば、プレビューにも表示されます。

MarkDownの記述とHTML変換

準備ができたらさっそくMarkDown記法で書いていきましょう。プレビューはCtrl+Shift+Mで右に分割表示されます。

以下の画像はMarkDownでこの記事を書いている途中です。

wpatom05

HTMLとして保存することもできます。プレビュー画面上を右クリックして、"Copy As HTML"でクリップボードにHTMLが保存されます。

拡張子.mdでファイルを保存しておくと、次に開いた時もマークダウンとして認識されます。

MarkDownをHTMLに変換した際の注意事項

AtomでMarkDownをHTMLに変換した場合、少しだけ注意事項があります。これらは設定ではどうしようもないので個別に対応してください。

h1〜h6タグにIDが自動付与される。

h1等のタグにはIDが付与されてしまいます。そのままでも問題ないですが、気になる方は削除してください。

URLはaタグが自動付与される。

これが少しめんどうです。HTML変換後に削除するか、URLは最初のhを外しttp://~にして、あとで一括置換でhを付与するかしてください。

preタグの変換が微妙

preタグで書いた中身が思った変換にならないことがあります。変換後、preタグ部分はよく確認してみてください。

HTML変換はオンラインで行う

私は上記の内容から、MarkDownからHTMLへ変換するのはMarkdown to HTMLを利用しています。変換する必要がある場合、使ってみてください。

まとめ

Atomを使えば快適にMarkDownを作成できます。ぜひ、使ってみてください。

スポンサーリンク

この記事が気に入っていただけたらシェアお願いします。励みになります。
prev WordPressをhttps化する方法とさくらサーバーでの注意事項 next XAMPPはもう古い?!VCCWでWordPressローカル開発環境を構築する方法

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です