Markdown記法とWordpressでMarkdownを使えるJetpackプラグインについて。
Markdownとは何か？
HTMLを簡潔に書けるマークアップ言語です。
HTMLと比べてタグの表現がシンプルで、閉じタグを書く必要がありません。HTMLのすべての要素を置き換えられるわけではありませんが、Markdownが対応していない部分はHTMLを直接書くことができます。
Markdownのサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
# 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 1段落目 1行開けると次の段落になります。 本文中の[リンク](url)や*強調(en)*、**強い強調(strong)**などもMarkdownで書けます。 > 引用文 + リスト1 + リスト2 + リスト3 1. 番号付きリスト1 2. 番号付きリスト2 3. 番号付きリスト3 本文中の`プログラム`はバッククォート <pre>タグは半角スペース4つかタブで表します |
変換後のHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6> <p>1段落目</p> <p>1行開けると次の段落になります。</p> <p>本文中の<a href="url">リンク</a>や<em>強調</em>、<strong>強い強調</strong>などもMarkdownで書けます。</p> <blockquote> 引用文 </blockquote> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <ol> <li>番号付きリスト1</li> <li>番号付きリスト2</li> <li>番号付きリスト3</li> </ol> <p>本文中の<code>プログラム</code>はバッククォート</p> <pre> <pre>タグは半角スペース4つかタブで表します </pre> |
Markdownの文法
Markdownの変換ツールやサービスによって文法に違いがありますが、基本的なタグに関しては同じように書けます。
Markdown文法まとめ – Qiita
Markdown quick reference – WordPress.com(英語)
翻訳 GitHub Help – GitHub Flavored Markdown – Qiita
PHP Markdown Extra(英語)
Markdownを試せるオンラインエディタ
ブラウザ上で使えるMarkdownエディタがあるので、まずはそれで試してみてください。サンプル(README)が入力された状態ですから、実際の文章での使い方をイメージしやすいと思います。
StackEdit(画面上の「Start writing now!」を押すとエディタが起動します)
https://stackedit.io/
Dillinger
https://dillinger.io/
WordPressのMarkdown対応はJetpackプラグインがおすすめ
WordPressではJetpackプラグインでMarkdownに対応できます。JetpackからMarkdown機能を切り離したJP MARKDOWNというプラグインもあるのですが、現在はメンテナンスされていないのでJetpackプラグインの方をおすすめします。
Jetpackプラグインとは
JetpackはWordpress.com(WordPressを使ったブログサービス)を開発・運営しているAutomattic社が、本家Wordpress(インストール型)向けに作った多機能プラグインです。
私が積極的に有効化しているのは次の機能です。
- Markdown対応
- ダッシュボード内で表示できるアクセス解析
- セキュリティ機能
- 総当たり攻撃対策
- 二段階認証
- 投稿時のソーシャルネットワーク共有
いろいろと入っているので便利と言えば便利なんですが、類似のプラグインを使っている場合は競合するので機能をオフにしておく必要があります。
その他の機能にに関してはJetpackのプラグインページやNETAONEなどで確認してください。
JetpackのMarkdown対応
MarkdownはJetpackをインストールするだけで使えます。
WordPressのMarkdownプラグインにもいろいろあって、次の様なプラグインは使いづらいので避けたいですね。
- Markdownで書いた後に変換ボタンを押さないといけない
- １回変換されると２回目以降はHTMLとして表示される
Jetpackは保存時にHTMLへ自動変換されて、HTMLとMarkdownの両方が保存されるので、２回目以降もMarkdownで編集できます。
文法はMarkdown Extraらしいけれど使えないものがある
Jetpackのドキュメントを読むとMarkdown Extra対応だと書いてあります。
Jetpack uses Markdown Extra by Michel Fortin. It includes some features not originally available in Markdown, including improved support for inline HTML, code blocks, tables, and more. Code blocks can use three or more back ticks (
`), as well as tildes (~~~).See the WordPress.com Markdown Quick Reference page for the most useful formatting and features offered by Markdown Extra. For more detailed information, see the original reference guide for Markdown, and the Markdown Extra page.
ただ、Markdown Extraについて実際に試してみたところ、使えるものと使えないものがありましたので、その結果を紹介したいと思います。
インラインHTML
MarkdownではHTMLを直接書くことができますが(インラインHTML)、オリジナルの規則よりも制限が緩和されています。
オリジナルのMarkdownでは前後に空行を挟んで、開始タグと終了タグはインデントしてはいけないという制限がありますが、その制限がなくなっています。
ただし、コードブロックとして扱われてしまうので、インデントは3つまでです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# テーブルとして表示される <table> <tr><th>ID</th><th>名前</th></tr> <tr><td>001</td><td>山田</td></tr> <tr><td>002</td><td>佐藤</td></tr> <tr><td>003</td><td>田中</td></tr> </table> # preタグで囲まれてコードブロックになる <table> <tr><th>ID</th><th>名前</th></tr> <tr><td>001</td><td>山田</td></tr> <tr><td>002</td><td>佐藤</td></tr> <tr><td>003</td><td>田中</td></tr> </table> |
リスト要素の中にブロック要素を入れる場合は同じ分だけインデントする･･･と書いてある様に読めるんですが、うまく動きませんでした。どちらも3項目目のリスト番号が1番に戻ってしまいます。よく分かりません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
# 問題ない? 1. 1項目目 2. <table> <tr><th>ID</th><th>名前</th></tr> <tr><td>001</td><td>山田</td></tr> <tr><td>002</td><td>佐藤</td></tr> <tr><td>003</td><td>田中</td></tr> </table> 3. 3項目目 # 間違い? 1. 1項目目 2. <table> <tr><th>ID</th><th>名前</th></tr> <tr><td>001</td><td>山田</td></tr> <tr><td>002</td><td>佐藤</td></tr> <tr><td>003</td><td>田中</td></tr> </table> 3. 3項目目 |
単なるテキストであればどちらでも問題ありませんでした。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
# インデントを揃える場合 1. 1項目目 2. 2項目目 2項目目 2項目目 2項目目 2項目目 3. 3項目目 # 詰める場合 1. 1項目目 2. 2項目目 2項目目 2項目目 2項目目 2項目目 3. 3項目目 |
markdown=”1″でブロック要素内のMarkdownが解釈される
ブロック要素に markdown="1"という属性を付けると、その中のコードがMarkdownとして解釈されます。ちなみに、これを書いているときに、エスケープしていない状態だと <pre>タグの中まで変換されて少し困りました。
変換前
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div> **テキストとして解釈されます** </div> <div markdown="1"> **Markdownとして解釈されます** </div> <table> <tr> <td markdown="1">**テーブルでも使えます**</td> </tr> </table> |
変換後
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div> **テキストとして解釈されます** </div> <div> <strong>Markdownとして解釈されます</strong> </div> <table> <tr> <td><strong>テーブルでも使えます</strong></td> </tr> </table> |
id/class指定
見出しに {#header1}の様にして、classやidを指定できます。
|
1 2 3 4 5 |
# id付き見出し {#header1} # class付き見出し {.class1} # idのリンクを張れます(特別な変換をしてるわけではないですが) [header1へのリンク](#header1) |
リンクや画像にidやクラスを指定したい場合は次の様にしてください。
|
1 2 3 4 5 6 7 8 |
[link](url){#id1 .class1} {#id2 .class2} # 文中でも問題なし 登録は[ここ](url){#id1 .class1}をクリック # 強調などでは動作しない **hoge**{#id1 .class1} |
他の属性を指定しようとするとそのまま表示される
次の様に、id/class以外の属性も指定できると書いてあるんですが、こうしようとすると、変換されずにそのまま表示されてしまいます。
|
1 2 |
## Le Site {lang=fr} ## Le Site {.main .shine #the-site lang=fr} |
コードブロック
うちだとプラグインが競合しておかしな事になってますが、多分動きます。JetpackのMarkdownとCrayonが競合してしまうようです。Markdown記法ではなく、 <pre>タグで囲めば回避できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
~~~~~~~~~~~~~~~~~~~~~ print "hoge" ~~~~~~~~~~~~~~~~~~~~~ `````````````````` x = x + 1 `````````````````` ~~~ x = 1 print x ~~~ |
コードブロックのidとクラス指定です。
|
1 2 3 4 5 6 7 |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .html <a href="http://www.google.com">Google</a> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {.html #example-1} HTML means <i>Hyper Text Markup Language</i>. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
テーブル
標準的なMarkdownよりも少し簡略化した書き方ができます。
|
1 2 3 4 5 6 7 8 9 10 11 |
# 普通の書き方 |ヘッダー | ヘッダー| |---|---| |内容 | 内容| |内容 | 内容| # 左右を省略できる ヘッダー | ヘッダー --- | --- 内容 | 内容 内容 | 内容 |
コードブロックと同じようにid/classを付与できないか試してみましたが無理なようです。
ここまで書いたけれど飽きた
自分用の記法の確認、メモもかねて書き始めましたが、他はどう考えても自分が使わないものばかりなので中断。
個人的にはコードブロックよりもテーブルにid/classを指定できる様にして欲しかったですね。正直、コードブロックは <pre>タグで囲ってもそんなに手間はかかりませんし。
