[blog][WordPress][document]Markdown環境を整える
ブログに少し凝った装飾がしたい
これまでdocumentで簡単なMarkdown記法を書く＋WordPressアドオンを使うことで自動でHTML変換をして、ブログの装飾を整えていました。申し遅れましたが、
WordPressはHTML記法が基本です。
document(Markdown)→WordPress(HTML)→サーバー
という流れです。しかし、目次の作成やコードブロックの表現など、少し凝った装飾をしたい時、事足りません。（HTML自動変換が難しいんですね💦）そこで、WordPressもMarkdownで書けるように設定すればいいのでは？と思い環境設定してみたので内容をまとめてみます。
旧：document(Markdown)→WordPress(HTML)→サーバー
↓
新：document(Markdown)→WordPress(HTML＆Markdonw)→サーバー
という流れです。
プラグイン[Jetpack]をインストール
最近WordPressを初めた方は恐らくプラグイン[Jetpack]がインストールされているかと思います。
セキュリティ、SEO、データ分析からSNS連携までありとあらゆるツールが同梱されています。これからWordPressを始める方は何も考えずにJetpackを使い始めていいのではないでしょうか。Jetpackを使いながら進めていきます。（インストール方法は割愛します）
JetpackのMarkdownをONにする
WordPressの管理画面から、Jetpackの[設定]を開きます。
タブ[執筆]をクリックします。
[プレーンテキストのMarkdown構文で投稿やページ書き込み]をオンにして、[設定を保存]をクリックします。
これで設定ができました。見た目が変わらないので不思議ですが、こちらの投稿画面がHTMLだけじゃなくて、Markdownも書けるようになったと思ってください。
目次を設置する
結論から言うと、記事中で初めて出現した ##見出し2 の上部に自動で目次が作成される仕様になっています。（テーマ[Cocoon]を使用しています。）
documentではこのような書き方になっています。（説明が難しいです💦）しかしながら御覧の通り、記事中で初めて出現した ##見出し2 の上部に自動で目次が作成されるということがお分かりいただけますでしょうか。
コードブロックを表現する
プログラミング学習のブログなので、コードには強調表示をしたいですし、できればシンタックスハイライトなんかも適応できると夢が広がりますね。
まずはテキストのみで書いてみます。見たまんまですね。
function getHello(){
console.log(‘Hello World!’);
}
それではコードブロック（バックティック3つ’’’で囲む）で書いてみましょう。
おぉぉ。コードブロックとして背景色が付きましたね。（ちょっと事情があって画像でお届けしてます💦）さぁさぁ欲が段々出てきました。ここまでいくとコードにシンタックスハイライトを効かせたいですね。実は簡単にできるんです。
記事内のコードにシンタックスハイライトを効かせる（更新:20210125）
様々なプラグインが出てるようですが、しらみつぶしに試したところやりたいこと（Markdownで書いたコードにシンタックスハイライト）を実現できるのは[Code Prettify]でした。（[Enlighter][Code Syntax Block][Syntax-highlighting Code Block][Highlighting Code Block]は不可でした）。早速プラグインをインストールしましょう。
https://ja.wordpress.org/plugins/code-prettify/
おぉぉ地味だけどシンタックスハイライトが効いてるじゃないですか！感動。カスタマイズ方法はちょっとハードルがもう少しありそうなので今日はこの辺で。とりあえずシンプルに表示する場合はこれで良さそうです。
記事内のコードにシンタックスハイライトを効かせる（最新版）
プラグインを使わなくても、WordPressのCocoonテーマには標準でコードエリアのスタイルを適応できるが内蔵されています。
[行番号を表示]にチェックを付けると、コードに行番号が付きます。
[ハイライトスタイル]で好みのスタイルを選択することができます。
これは裏側で[hightlight.js]というファイルを読み込んでいるのですが、highlight.jsにはどんなスタイルが用意されているのかサンプルサイトが用意されています。一覧から好みのスタイルを選んでみてください。
無事に表示できました。
function getHello(){
console.log(‘Hello World!’);
}
