WPをMarkdown×Highlight.jsでエンジニアに優しくしてみた

WPをMarkdown×Highlight.jsでエンジニアに優しくしてみた

技術記事を書くときはQiitaにしてたのですが、ブログもリッチエディターじゃなくてMarkdownがいいなって思い始めてきたのでWordPressにMarkdown×Highlight.jsを導入してエンジニアに優しい感じにしてみました。

Markdown Editor

まずは、調べて最初に出てきたMarkdown Editorを入れてみました。
書き心地はよかったんですが、機能が少ないのとコードを綺麗に書けなかったのですぐにアンインストール。

次に色々プラグイン検索の画面で探していると、WP Editor.mdといういい感じのエディタを見つけたのでそれにしてみました。
機能もしっかりしていて、けっこういい感じに書けてます。何よりデフォルトのエディタに比べてだいぶ軽量なのでかなり快適に記事を書くことができます。

写真とかも自動で挿入してくれます。

Highlight.js

こちらは、自動でシンタックスハイライトを入れてくれるツワモノです。しかも軽量。

package main

import(
    "fmt"
)

func main() {
    fmt.Println("hello")
}

Markdownのコードブロックの書き方に沿って書くといい感じにしてくれます。しかも自動でparseしてくれるので、自分でクラスをつける必要がありません。

導入も簡単で、WP Code Highlight.jsをインストールするだけで
使えるようになります。

こちらの記事を参考に設定等いろいろ変更できます。

残念なところ

完璧なように見えるこの二つの組み合わせですが、少し残念なところがあります。

コードのブロックを書くところで言語を指定すると、parseするときに勝手にWP Editor.mdがclass名を付与してしまい、それがHighlight.jsと互換性がないのでシンタックスハイライトが入らなくなってしまいます。

あとは、parseのときにファイル名の処理もしてくれないのでそこも残念です。
とはいえ、だいぶ便利になったので当分はこの組合せでいこうかなと思っています。