Markdownの練習

blogtext

最近いろんなWebサービスで Markdown（マークダウン）で内容を書くことが増えたのですが、これがすごく便利。
WordPress であれば Jetpack（2.8 以降）を使えば容易に実装可能です。

<!--more-->

## 使い方

まずはJetpackをインストール、WordPress.comアカウントとの連携をしておきます。

あとはJetpackの設定ページから Markdown モジュールを有効化するだけです。

<a href="http://gatespace.jp/wp-content/uploads/2014/07/67fc1898e9bf42785e0c603e23eacab5.png"><img src="http://gatespace.jp/wp-content/uploads/2014/07/67fc1898e9bf42785e0c603e23eacab5.png" alt="スクリーンショット 2014-07-01 23.38.38" width="712" height="582" class="aligncenter size-full wp-image-1815" /></a>

* <a href="http://jetpack.me/" target="_blank">http://jetpack.me/</a>
* <a href="http://jetpack.me/support/markdown/" target="_blank">http://jetpack.me/support/markdown/</a>

コメント欄で使いたい場合は設定 → ディスカッションから設定します。

<a href="http://gatespace.jp/wp-content/uploads/2014/07/2d3eb730fba134a6730a2f838d9cbd4b.png"><img src="http://gatespace.jp/wp-content/uploads/2014/07/2d3eb730fba134a6730a2f838d9cbd4b.png" alt="スクリーンショット 2014-07-01 23.39.01" width="555" height="96" class="aligncenter size-full wp-image-1816" /></a>

カスタム投稿タイプでも Markdown を使いたい場合は以下のコードを `functions.php` に記述してください。
（コード内の `POST_TYPE` を適用したいカスタム投稿タイプ名にし、複数ある場合はその分増やしてください）

https://gist.github.com/gatespace/c6406d4c8d607586bdc8

## Jetpackでの Markdown 記法

代表的な記法は WordPress.com に記載されています。

* <a href="http://en.support.wordpress.com/markdown-quick-reference/" target="_blank">http://en.support.wordpress.com/markdown-quick-reference/</a>

上記以外に使える記法は公式サイトをご覧ください。

* <a href="http://daringfireball.net/projects/markdown/" target="_blank">http://daringfireball.net/projects/markdown/</a>
* <a href="https://michelf.ca/projects/php-markdown/extra/" target="_blank">https://michelf.ca/projects/php-markdown/extra/</a>

個人的に便利なのはデフォルトの TinyMCE でサポートされていない、`<hr>`、`<dl>`、`<dt>`、`<dd>`かな。
リストタグも簡単にかけるのが便利です。

## ソースコードのハイライト

Markdownで書いたソースコードのハイライトも出来ます。
Jetpack単体では実現できませんので、プラグイン<a href="https://wordpress.org/plugins/syntaxhighlighter/" target="_blank">「SyntaxHighlighter Evolved」</a>や<a href="https://wordpress.org/plugins/crayon-syntax-highlighter/" target="_blank">「Crayon Syntax Highlighter」</a>など `<pre>` タグ部分をハイライトしてくれるプラグインをインストール有効化しておきます。

* <a href="https://wordpress.org/plugins/syntaxhighlighter/" target="_blank">https://wordpress.org/plugins/syntaxhighlighter/</a>
* <a href="https://wordpress.org/plugins/crayon-syntax-highlighter/" target="_blank">https://wordpress.org/plugins/crayon-syntax-highlighter/</a>

あとは
~~~~
```css
#button {
	border: none;
}
```
~~~~
のように書くとハイライトされます。
```css
#button {
	border: none;
}
```
対応している言語は次のリンク先を参考に。

* <a href="http://en.support.wordpress.com/code/posting-source-code/" target="_blank">Posting Source Code &#8212; Support &#8212; WordPress.com</a>

- - - -

今回の記事はすべで Markdown で書いてあります。
元の投稿データは Gist においておきますので、見比べてみてください。

* <a href="https://gist.github.com/gatespace/5d3c3b62adb08ea078f1" target="_blank">https://gist.github.com/gatespace/5d3c3b62adb08ea078f1</a>