WP Editor.md の導入感想

2020.12.18

普段 markdown でメモをとることが多いため、このブログも markdown で記述できるように WP Editor.md プラグインを入れてみました。使い勝手などをメモしておこうと思います。

選定理由

以下を満たすものを探して、初めは WP Githuber MD を使っていました。

  • 数式が KaTeX で描画される。
    • 普段の markdown の viewer も KaTeX で描画されるものを使用しているため、慣れているものを使いたいと考えています。
  • google 検索ですぐに引っかかる程度には有名。

ただ、インラインコードがハイライトされないため、こちらの記事 を参考に CSS を追加したのですが、今度は数式ブロックの方も背景がグレーになってしまいました。

その後、試しに WP Editor.md を入れたところ、上記の CSS 追加でインラインコードのみ背景をグレーにできたため、こちらを使うことにしました。

導入方法

WordPress の「プラグイン」 → 「新規追加」 → WP Editor.md で検索 → インストール

設定

WP Editor.md はデフォルトのままです。
上述の 参考記事 を元にWordPress の「外観」 → 「カスタマイズ」 → 「追加CSS」に以下を追加しました。

code {
    background-color: #eee;
}

また、KaTeX のフォントがデフォルトだと大きく感じたため、KaTeX のドキュメント を参考にフォントサイズを変更しました。通常の文字の 1.1 倍になるように以下を加えました。

.katex { font-size: 1.1em; }

動作確認

数式

インラインは \sum_i a_i のようになります。
数式ブロックは以下のようになります。

\sin ^2 x + \cos ^2 x = 1

コード

インラインは c = a * b + 1 のような形になります。
コードブロックは以下のように描画されます。

int func(int a, int b)
{
    int c = a * b + 1;
    return c;
}

画像

ドラック & ドロップで貼り付けられました。

感想

とりあえず、使いたい機能は揃っているようです。
気になる点が出てきたら WP Githuber MD に戻ることを含めていろいろ試行錯誤してみようと思います。