WordPressでMarkdownを使えるJetpackプラグイン

Markdown記法とWordpressでMarkdownを使えるJetpackプラグインについて。

Markdownとは何か?

HTMLを簡潔に書けるマークアップ言語です。

HTMLと比べてタグの表現がシンプルで、閉じタグを書く必要がありません。HTMLのすべての要素を置き換えられるわけではありませんが、Markdownが対応していない部分はHTMLを直接書くことができます。

Markdownのサンプル

変換後のHTML

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で書いた後に変換ボタンを押さないといけない
  • 1回変換されると2回目以降はHTMLとして表示される

Jetpackは保存時にHTMLへ自動変換されて、HTMLとMarkdownの両方が保存されるので、2回目以降も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つまでです。

リスト要素の中にブロック要素を入れる場合は同じ分だけインデントする・・・と書いてある様に読めるんですが、うまく動きませんでした。どちらも3項目目のリスト番号が1番に戻ってしまいます。よく分かりません。

単なるテキストであればどちらでも問題ありませんでした。

markdown=”1″でブロック要素内のMarkdownが解釈される

ブロック要素に markdown="1"という属性を付けると、その中のコードがMarkdownとして解釈されます。ちなみに、これを書いているときに、エスケープしていない状態だと <pre>タグの中まで変換されて少し困りました。

変換前

変換後

id/class指定

見出しに {#header1}の様にして、classやidを指定できます。

リンクや画像にidやクラスを指定したい場合は次の様にしてください。

他の属性を指定しようとするとそのまま表示される

次の様に、id/class以外の属性も指定できると書いてあるんですが、こうしようとすると、変換されずにそのまま表示されてしまいます。

コードブロック

うちだとプラグインが競合しておかしな事になってますが、多分動きます。JetpackのMarkdownとCrayonが競合してしまうようです。Markdown記法ではなく、 <pre>タグで囲めば回避できます。

コードブロックのidとクラス指定です。

テーブル

標準的なMarkdownよりも少し簡略化した書き方ができます。

コードブロックと同じようにid/classを付与できないか試してみましたが無理なようです。

ここまで書いたけれど飽きた

自分用の記法の確認、メモもかねて書き始めましたが、他はどう考えても自分が使わないものばかりなので中断。

個人的にはコードブロックよりもテーブルにid/classを指定できる様にして欲しかったですね。正直、コードブロックは <pre>タグで囲ってもそんなに手間はかかりませんし。

コメント

タイトルとURLをコピーしました