「エンジニアが成長できる環境を提供する」株式会社リヴェラの様子をご紹介します!

「エンジニアが成長できる環境を提供する」株式会社リヴェラの様子をご紹介します!

WordPressでMarkdownする話

2018.05.30

WordPressでMarkdownする話 はコメントを受け付けていません。

WordPress初心者のらんくるです。
某Qiitaやら某teratailなんかで主流(というか常識)になりつつあるMarkdown記法がWordPressでも使えるとの話を聞いたので。。。
(ガッツリHTMLタグ書き込むつもりでいました笑)
自分向けの備忘も込めてまとめてみました。

大切なこと
Markdown記法を使うときは上下行を改行する
全角スペースだとMarkdownしてくれない
WordPress単体だとMarkdown記法は使えないのでプラグインを利用すること

まあHTMLだったりCSSフレームワーク(Bootstrapなど)の基本事項を押さえておけばOKです!

今回の環境
WordPress 4.9.6
Jetpack by WordPress.com 6.1.1 (設定画面でMarkdownを有効にしておいてください)

その1.見出し

#△見出し文字(△=半角スペース)

これで上の「その1.見出し」みたいになります。ページ上部に目次もつけてくれるし便利!
ちなみに#は増やすと見出しが小さくなり、上部の目次は1.1、1.1.1・・・のように下に下がっていきます。

2つ

3つ

4つ

5つ
6つ

ってな具合になります。

その2.ソースコード記載でよく見るやつ

//よく見るやつ
int hogeCount;
boolean isHuga;
コードっぽくしたい文字列の上と下に「`」を3つ、はじめの3つの直後にプログラミング言語名(任意)を入力します。
※「’」( Shift + 7 )ではなく「`」( Shift + @ )なので要注意!夜中に寝ぼけてこのミスをしたのは秘密

開始タグの後にプログラミング言語名(Javaとか)を記載すると言語に合わせたコードスタイルに合わせて色を付けてくれます。上記の例はJavaです。(Java以外未検証です…)

その3.リスト

頭文字リスト

  1. いち
  2. さん

i. いち
ii. に
iii. さん

壱. いち
弐. に
参. さん

これはあんまり見た目の変化はありません。
算用数字でナンバリングされてるやつをよく見かけますね。

頭文字.△リストの内容

で上記の表示になります。

算用数字は連番じゃなくても勝手に連番にされちゃいます。

  1. こんな
  2. かんじ
  3. でっす

これ実はこう書いてます

2. こんな
5. かんじ
9. でっす

文字なしリスト

  • abc
  • cde
  • fgh
  • ijk
  • lnm
  • opq

所謂箇条書きってやつです。

「*△リストの内容」「-△リストの内容」で箇条書きになります。
また、適宜インデントを入れ、上の階層と記号を変えることで上記のようにリストにもインデントを入れてくれます。

その4.引用

うちのボスはいつもジンジャーハイボールばかり飲みます

これは簡単で、文字列の頭に「>」を置くだけです。2つで2重引用になります。

今書いてます!!!
> Markdownの記事書いてください。

最後に

HTMLタグと共存できる(混ぜるとサニタイジングされたりしてイメージ通りの挙動しないこともありますが)のが良いですね。
今回は取り上げたのはJetpack by WordPress.comプラグインをインストールすることで利用可能になるMarkdown記法のうちメジャーなものです。
一般的なMarkdownとでは記法に差異があったりする(##強調文字##でボールドになったりするやつです。)のでそっちの記事とか他にもJetpackでこんなの使える!便利!みたいなのも機会があったら投稿してみようと思います!

関連記事

コメントは利用できません。

エンジニア募集中!

株式会社リヴェラ Webページ

カテゴリー