Markdown形式とwordpres, VSCODEの連携

このブログの作成はwordpressを使って、中身ではwordpressに標準で内蔵されてるgutenbergエディタになってます。記述はmarkdown形式を用いていますが、gutenbergでは自動で変換してくれます。

各種リンクは後述がないところはこのサイトか公式サイトにしています。

wordpressのgutenbergエディタ

グーテンベルグといいますが、wordpressの標準エディタになって1年以上経つかな。その間により洗練されて、より使いやすくなってますね。markdown形式は部分的サポートなのですが、そのサポートがだんだん完璧になってきてます。完結で書きやすいmarkdown形式を身につけると作業効率が格段に上がります。

markdown形式

markdown (リンクはwikipedia) ははてなブログでも利用できるけど、このwordpressでもgutenbergでもサポートされてるし、wordpressのマストプラグインのjetpackでもサポートされています。wordpressのクラシックエディタでも、jetpackを入れれば部分的なサポートがあります。

以前はクラシックエディタ＋jetpackで書いていましたね。比較的早い段階でグーテンベルクに切り替えたのですけどね。

エディタ

そして、記事を書くときはPC内に記事をセーブしています。oneDriveを使ってクラウドにおいて、PC上ではVSCODEを使っているし、iPadのエディタ(GoCoEdit)を利用しています。

• VSCODEはマイクロソフトが作ってるオープンソースのエディタでWin/Mac/Linuxに対応してるし、動作が軽いのが特徴ですね。同種のエディタのatomと比べても非力なPCでも使いやすいことが気に入ってますね。
• GoCoEditはiOS/iPadOSで利用できるプログラミングをすることを意識した有料エディタですが、十分な柔軟性を持ったものです。各種クラウドサービスに対応してる。

どちらも、markdown形式も利用できる利点があるのです。もちろん、SSH経由でサーバーに直接接続して、必要なファイルの修正も可能ですしね。初期設定がやや敷居が高いことを覗ければ作業効率は大変良くなります。

VSCODEとmarkdown

そのままでも使えるのですが、便利な拡張を何個か入れておくとさらに良いです。それ以外にもスニペットが使えますからね。記事用に独自のcssをいじるときや定型文の登録で有効だと思うけど、スニペットは未着手なところです。使い方が洗練されてきたらまたそのときにでも新しい記事にしてみます。

アフィリエイトブログでよく見かける吹き出し形式なんてのも定型文ですから、スニペット登録できれば効率が上がると思いますが、試してないので断言しません。笑

プラグイン

僕が入れてるプラグインは次のものです。

• Markdown All in One
• Markdown Preview Enhanced
• Markdownlint
• Excel to Markdown table

の３つです。特にPreview Enhancedは一番必要です。なぜならgutenbrgにコピペするときにそのままではうまく行かないけど、このプレビューをコピペ(CTRL-A, CTRL-C)して、gutenbergエディタへペーストするとうまくブロック単位に変わってくれるからです。ここの部分は私の環境でのVSCODEの長所でもあるが弱点にもなってます。

Plain Textと認識させてmarkdown形式の内容をコピペするとうまく動作するのですが、VSCODEがmarkdownと認識するとプレビューからコピペしないとうまく行かないんですね。なぜかわかりません。ただ、こんプレビューからのコピペはhtml形式に変換されたものをコピペに使うようで、gutenbergで一部対応してないmarkdown形式のフォーマットも変換後にgutenbergに載せるので完璧なmarkdown形式に対応するという利点もあります。

atomエディタでmarkdown形式を扱うときはVSCODE-gutenbergのときに起こる変換されないことは起きないです。なんでだろうね。理解ができたときには記事を修正しますし、知ってる方がいたらコメントを残していただければ助かります。

Markdown all in Oneはテーブルコンテンツも作ってくれるし、ショートカットをいくつか増やしてくれます。さり気なく便利な拡張機能です。

Markdown Preview Enhancedは先に書いたように、このプレビュー画面をコピペすればwordpressにそのまま同じものを載せられます。

MarkdownlintはエディタでMarkdown形式を書いてるときに適切な記述ができてるかの自動チェックをしてくれるもの。

Excel to Markdown tableはmarkdownでテーブルを書くのは面倒なのでエクセル形式をExcelやlibre calcからコピペするときに便利だからです。VSCODEにペーストするときはALT-SHIFT-Vです。

test1	test2	test3
1	2	3
4	5	6

こんな単純なものでもコピペで作れちゃいますからね。

当然この記事もVSCODEエディタでmarkdown形式の記事にしてMarkdown Preview Enhancedのプレビュー画面をコピーしてwordpressのgutenbergエディタへペーストして作っています。

最終更新日 : 2021-01-24