WordPessのコードプレビュー埋め込みプラグインは、テーマと使ったりインデントがバグったりトラブルが多くてなかなか使いにくい。
「WP Githuber MD」というプラグインでWordPressのエディターをMarkdown方式にして、ノーションの記事をそのまま貼り付けられるようにしたので解説。
この記事冒頭のアイキャッチ画像のようなエディターが使えるようになる。
入れておくべきWordPressのプラグイン
①WP Githuber MD←マークダウンの書き方が使えるようになるプラグイン
②WP External Links←外部サイトのみを新しいタブで開くように書き換えてくれるプラグイン
どちらも有効化するだけで設定は不要。
③Classic Editor←旧エディターで投稿ができるプラグイン
これだけ設定が必要。
Classic Editorの設定
プラグインの画面からClassicEditorの設定をクリック。
ユーザーにエディターの切り替えを許可：はい
に変更する。
これを忘れると、Markdownをオフにして普通に書きたいときに強制的にブロックエディターにされてしまってうざい。
notionの記事のエクスポート
該当の記事をnotionで開き、タイトルにカーソルが乗っている状態でCtrl+ Aを2回押す。
Macならcmd+ Aを2回になると思う。
WordPressに貼り付ける
投稿画面に貼り付ける。
赤枠の部分はいらないので削除する。
ちなみに残念ながら、画像は表示できないので手動で挿入する必要がある。
そもそも画像が大量にある記事なら、マークダウン方式は使うべきではない。
注意点
なにもない改行は無視される？
行間が詰まるから、要所要所水平線（横棒）を入れた方がいい。
「-」を3つ入れると
↓水平線
↑水平線
になるはず。
コードのハイライト方法
↓ダメな例
console.log('hoge')そのまま貼り付けただけだと、言語の指定が「jsx」とかいうわけわからんやつになることがある。
↓良い例
console.log('hoge')これなら色がつく。
マークダウンのコードブロックの書き始めに「```javascript」のように言語を指定すればちゃんとハイライトしてくれる。
一括で置き換えたいなら、VScodeなどのエディターに貼り付けて編集すれば楽かも。
うまくいかない場合
外部リンクを新しいタブで開いてくれない
これは冒頭に書いたプラグインの「WP External Links」を有効化するだけで解決する。
javascriptがハイライトされない
注意点 > コードのハイライト方法
で解説したように、言語指定がjsxになっていると思われる。
記事によっては従来のエディターで書きたい
Markdwonモードを投稿画面から個別にオフにできる。
↑この右上の「Enable Markdown」ってやつをオフにする。
はじめは表示されないので、下書き保存や公開をした後に選べるようになる。
もしEmable Markdownをオフにしたときに、ブロックエディターになってしまうのであれば
プラグイン「Classic Editor」の設定を忘れている。
↓この設定が必要
ユーザーにエディターの切り替えを許可：はい
一度でもブロックエディタで編集してしまうと、バグる。
クラシックエディタ―で編集した場合でも、もう1度オンに戻したらレイアウトがおかしくなっていることもある。
基本はMarkdownか従来方式か、記事によってどっちかで統一すべき。
