トップページ > ブログ > WordPress > WordPressの新エディタGutenbergでMarkdownを保持する

WordPressの新エディタGutenbergでMarkdownを保持する

WordPress5.0からデフォルトのエディターとして採用されているGutenbergではMarkdown記法を使用することができます。

そのまま保存しておけばエディタでも見やすいですし、他のMarkdown対応サービスにも流用できるかと思います。

新しい Gutenberg 編集エクスペリエンス

Contents

GutenbergでMarkdownを使って高速ライティング

私もそうなんですが、行き着く先はMarkdownですよね。
素早く見出しや段落を作れたり、後からテキストエディタで見たときにも見やすくてメモにもMarkdownを使っています。

WordPressの新しいエディタのGutenbergでは、Markdownをサポートしています。
ですが、GutenbergではMarkdown記法で記述するとその場でHTMLタグに変換されてしまいます。

そのあたりが不評で人気のないGutenbergですが、Markdown記法を保持したまま保存することはできないものか調べてみました。

結論

現段階ではMarkdownを保持したまま記事を投稿することは不可能でした。
そもそも投稿する段階でHTMLタグに変換されているので、Markdown記法が残っていないようでした。

ではMarkdown記法を保持したまま記事を投稿するには?

WordPressの以前のエディタである、クラシックエディタを使用しましょう。
クラシックエディタでは、Markdownを保持したまま記事を投稿することができます。
Gutenbergでは対応していないMarkdown記法にも対応することができるので、Markdownに慣れている方であれば、Gutenbergは使わずにクラシックエディタを使い続けるのをおすすめします。

Gutenbergの投稿画面は広く、実際の記事画面に近いのがすごく魅力的な部分です。
共存する方法はあるのでしょうか。

別のMarkdownエディタを使う

Gutenbergは、Markdown記法で書かれテキストをペーストするとHTML形式に変換してくれます。
あとから更新する際に少し面倒ですが、別のエディタで編集してから投稿するのも一つの手だと思います。

個人的には↓のエディタがオススメです。

Atom

https://atom.io/

GitHubが開発したエディタで、デフォルトでマークダウンのプレビュー機能がついています。
「Ctrl(Command)+Shift+M」でMarkdownのプレビューウィンドウを開くことができて、リアルタイムで編集状態が確認できます。

Visual Studio Code

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Microsoftのエディタで、こちらもデフォルトでマークダウンのプレビュー機能がついています。
ファイル名が表示されているタブを右クリックし、「Open Preview」を選択するとプレビューウィンドウが表示されます。

Brackets

http://brackets.io/

Adobeのエディタで、「Markdown Preview」という拡張機能をメニューからインストールするとプレビューウィンドウを出すことができます。
DreamWeaverはどうしたんでしょう。

まとめ

現段階ではGutenbergでMarkdown記法で記事を書くのは、難しそうですね。
Qiitaのように2分割画面でリアルタイムプレビューができるようになってくれるといいなと思います。