[WordPress] Markdown Editorでコードがテーブルになってしまうことへの対処方法

Markdown Editor

ライブプレビュー機能付きのMarkdownエディタです。
利用の際は「Classic Editor」をあわせて有効化する必要があります。

コードがテーブルになってしまう

このMarkdown Editorですが、便利な一方、
デフォルトでは、<pre><code>~</code></pre>が以下のような表示になります。

WP Code Highlight.jsを使ってコードをハイライトしても、こんな感じ。

F12で出てくるChromeデベロッパーツールで見てみると、
なにやら大きなテーブルになっています。

高さをムダにとるし、行番号も表示したくないので、
このような表示にならないようにしましょう。

対処方法

Markdown Editor プラグイン詳細ページに対処方法が載っています。

SYNTAX HIGHLIGHTING
By default, Markdown Editor enables syntax highlighting for code blocks.
This can be removed by adding the following line of code to your theme’s functions.php file:
add_filter( ‘markdown_editor_highlight’, ‘__return_false’ );
The click to copy button can be removed with the following line:
add_filter( ‘markdown_editor_clipboard’, ‘__return_false’ );

つまり、下記の二行を「テーマのための関数(function.php)」に追加すればよいということですね。
2行目は「クリップボードにコピー」ボタンを削除するものなので、必要な方は残しておきましょう。


add_filter( 'markdown_editor_highlight', '__return_false' );
add_filter( 'markdown_editor_clipboard', '__return_false' );

「テーマのための関数(function.php)」は、管理メニューから「外観」→「テーマの編集」で編集できます。

結果


無事コードがシンプルに表示されるようになりました。