Markdownを活用してwordpressの記事をさくっと書く

Markdown

最近ブログを始めたばかりのエバテツです!

wordpressで記事を書きやすくするためにMarkdownを活用してみたので紹介します。
 

Markdownとは

Markdown(マークダウン)は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、

  • 手軽に文章構造を明示できること
  • 簡単で、覚えやすいこと
  • 読み書きに特別なアプリを必要としないこと
  • それでいて、対応アプリを使えば快適に読み書きできること

などです。Markdownはジョン・グルーバー(John Gruber)によって2004年に開発され、最初は Daring Fireball: Markdown で公開されました。その後、多くの開発者の手を経ながら発展してきました。

情報源: Markdownとは · 日本語Markdownユーザー会
 

導入

プラグインをインストールします。

私は暫定的にMarkdown on Save Improvedこちらを使っていますが、いいのがあれば乗り換えるつもりです。

インストールすると記事画面にチェックボックスが現れ、markdownを適用しない場合にチェックをいれます。

既存の記事に関しては、チェックが入っている状態なので、影響はなさそうです。
 

書き方

実際に書き方と出力結果を見るとわかりやすいです。

まずは記法から、

# タイトル(h1)
## タイトル(h2)
### タイトル(h3)

**太字**

> 引用

`ソースコード`

```
ソースコード
(複数行)
```

[リンク文言](https://ebatetsu.com)

- リスト(黒丸)
- リスト(黒丸)
- リスト(黒丸)

1. リスト(数字付)
2. リスト(数字付)
3. リスト(数字付)

---
線

出力結果はこんなイメージです。

<h1>タイトル(h1)</h1>
<h2>タイトル(h2)</h2>
<h3>タイトル(h3)</h3>

<p><strong>太字</strong></p>

<blockquote>
<p>引用</p>
</blockquote>

<p><code>ソースコード</code></p>

<pre><code>ソースコード
(複数行)
</code></pre>

<p><a href="https://ebatetsu.com">リンク文言</a></p>

<ul>
<li>リスト(黒丸)</li>
<li>リスト(黒丸)</li>
<li>リスト(黒丸)</li>
</ul>

<ol>
<li>リスト(数字付)</li>
<li>リスト(数字付)</li>
<li>リスト(数字付)</li>
</ol>

<hr>
<p>線</p>

このようにmarkdawnを使えばhtmlを書かずに直感的に書くことができます。
他にも記法があるので下記を参照してみてください。
Markdown記法 サンプル集
もちろんhtmlで書くことも可能です。

ソースコードに関しては見やすくするためにもPrism.jsを使用してシンタックスハイライトしています。
wordpressのプラグインでも実現可能ですが、wordpressプライグインを必要最低限にして軽くしたいためjsで対応することにしました。
 

まとめ

メリット

  • 文書構造を直観的に書くことができる
  • htmlの知識がなくてもかける
  • 学習コストが低い

デメリット

  • classを付与できない
  • リンクを別タグで開くことができないのでwordpressのエディタ機能かhtmlを直接書いて実装しなければならない