修正したWordPress Postの最新版は下記になります。
前回と前々回では、WordPressの記事をVS Codeで作成できる拡張機能であるWordPress Post拡張機能を修正したことを紹介しました。
今回はその続きとなります。
WordPress Postの残念な点
WordPress Postは下記で公開されているVS Code用拡張機能です。
この拡張機能を使うと、VS Code上でMarkdownで作成した記事をそのままWordPressに投稿することができ、大変便利です。
しかし、実際に使って見るとこの拡張機能には次のような残念な点がありました。
- 画像にサイズ指定がない
WordPress Post拡張機能によりMarkdownから生成されるHTMLのimgタグにはサイズを示す属性(widthとheight)がつきません。
このためSEO的にはマイナス要素である「Cumulative Layout Shift (CLS)」を発生させる可能性があります。 - 画像のサイズが考慮されない
Markdownに埋め込んだ画像をそのままWordPressに投稿してしまうため、画像が大きいと表示時に縮小されるにもかかわらず大きいが画像データを読み込むことになります。
これはWebページの表示が遅くなることにつながり、あまり好ましくありません。できればリサイズしたいところです。 - コードブロックから生成されるHTMLがイマイチ
Markdownでソースコードを記述するとWordPress Post拡張機能ではHTMLのpreタグとcodeタグを利用したブロックを生成してくれます。
しかし、私が利用しているWordPressテーマで利用しているSyntax Highlighterでは正しくハイライト表示してくれません。 - 生成されるHTMLがイマイチ
WordPress Post拡張機能で生成されるHTMLは整理されていないため、加工するのが少々面倒です。
WordPRessに記事を投稿してから、WordPress上でHTMLを修正することもあるので、できれば見やすいHTMLを生成して欲しいところです。
前々回はこのうち「コードブロックから生成されるHTMLがイマイチ」という点を修正しました。
そして、前回は、「画像にサイズ指定がない」と「画像のサイズが考慮されない」を修正しました。
今回はそれ以外の点について修正してみます。
なお、修正するに当たり、オリジナルのWordPress Post拡張機能のソースコードは下記にフォークして作業をしています。
生成されるHTMLの整形
「整形されるHTML」がイマイチというのは、WordPress Post拡張機能では「markdown-it」というパッケージによって生成されたHTMLをそのまま利用しているためです。
もちろん人間にとって見にくいHTMLでも文法的に正しければ、全く問題ありません。
しかし、WordPress上でHTMLを修正したいことも多々あるので、見やすいHTMLにしたいところです。
修正の方針
今回は次のような修正を行うことにしました。
- HTMLをフォーマットするかどうかを設定で選べるようにする(デフォルトは「オフ」)。
- HTMLをフォーマットする設定の場合は、HTMLをWordPRessに送信(ポスト)する直前に「js-beautify」というパッケージで加工する。
- 特定のHTMLタグの前後に空行を入れるかどうかを選べるようにする。
- 「h1～h6」の前後、「table」の前後、「pre」の前後、「div」の前後
最後の空行の挿入については、実際に加工されたHTMLをみて、空行が入った方が見やすいと思ったので、このような設定があった方が良いと考えました。
なお、新設する設定項目でデフォルト値を選択すると、オリジナルのWordPress Post拡張機能と同じ動作となるようにします。
ソースコードの修正
この修正を行ったブランチは下記になります。
package.json
package.jsonでは、拡張機能の設定項目の追加と、動作に必要なパッケージ(ライブラリ)の追加のために変更します。
設定項目の追加
設定項目の追加はpackage.jsonを変更することで行います。
今回は「contributes」→「configuration」→「properties」に下記の項目を追加しました。
"wordpress-post.formatHtml" : {
"type": "boolean",
"default": false,
"description": "Format HTML data before posting."
},
"wordpress-post.formatHtmlAddBlankLineToHeaderTag" : {
"type": "boolean",
"default": false,
"description": "Add a blank line before/after heading tag respectively when formatting HTML."
},
"wordpress-post.formatHtmlAddBlankLineToTableBlock" : {
"type": "boolean",
"default": false,
"description": "Add a blank line before/after table block respectively when formatting HTML."
},
"wordpress-post.formatHtmlAddBlankLineToPreBlock" : {
"type": "boolean",
"default": false,
"description": "Add a blank line before/after preformatted block respectively when formatting HTML."
},
"wordpress-post.formatHtmlAddBlankLineToDivBlock" : {
"type": "boolean",
"default": false,
"description": "Add a blank line before/after div block respectively when formatting HTML."
},
「wordpress-post.formatHtml」は投稿する際にHTMLをフォーマットするかどうかの設定で、デフォルトはfalse(フォーマットしない)です。
「wordpress-post.formatHtmlAddBlankLineToHeaderTag」「wordpress-post.formatHtmlAddBlankLineToTableBlock」「wordpress-post.formatHtmlAddBlankLineToPreBlock」は、HTMLタグの前後に空行を入れるかどうかの設定です。それぞれ「h1～h6」「table」「pre」の前後に対応しています。
パッケージの追加
今回はHTMLデータを整形するために「js-beautify」というパッケージを利用することにしました。
このパッケージを選択した理由は、これはたまたまググって出てきたのと、使い方も簡単そうだったからです。他のフォーマッタでも問題ないと思います。
利用するパッケージの情報はpackage.jsonの「dependencies」に次のように追加します。
"js-beautify": "^1.14.4"
なお、package.jsonの「dependencies」を変更した場合には、「npm install」を実行する必要があるようです。
「npm install」を実行すると、package-lock.jsonが更新されるので、このファイルもコミットしておきます。
context.ts
この拡張機能では設定項目関係の情報を取得する関数がcontext.tsに記述されています。
今回はこのファイルにpackage.jsonで追加した設定項目を取得するための関数を追加しました。
getFormatHtml(): boolean {
return this.getConf("formatHtml");
}
getAddBlankLineToH(): boolean {
return this.getConf("formatHtmlAddBlankLineToHeaderTag");
}
getAddBlankLineToTable(): boolean {
return this.getConf("formatHtmlAddBlankLineToTableBlock");
}
getAddBlankLineToPre(): boolean {
return this.getConf("formatHtmlAddBlankLineToPreBlock");
}
getAddBlankLineToDiv(): boolean {
return this.getConf("formatHtmlAddBlankLineToDivBlock");
}
post.ts
post.tsはこの拡張機能のメイン動作を記述しているファイルです。
このフィアルでWordPressに記事を投稿する直前に次のような処理を追加しました
if ( context.getFormatHtml() ) {
const beautify = require('js-beautify').html;
postData["content"] = beautify(postData["content"]);
// add blank line before <hN> and after </hN> respectively
if ( context.getAddBlankLineToH() ) {
let content = postData["content"];
content = content.replace(/<h1/g, '\n<h1').replace(/<\/h1>/g, '</h1>\n');
content = content.replace(/<h2/g, '\n<h2').replace(/<\/h2>/g, '</h2>\n');
content = content.replace(/<h3/g, '\n<h3').replace(/<\/h3>/g, '</h3>\n');
content = content.replace(/<h4/g, '\n<h4').replace(/<\/h4>/g, '</h4>\n');
content = content.replace(/<h5/g, '\n<h5').replace(/<\/h5>/g, '</h5>\n');
content = content.replace(/<h6/g, '\n<h6').replace(/<\/h6>/g, '</h6>\n');
postData["content"] = content;
}
// add blank line before <table> and after </table> respectively
if ( context.getAddBlankLineToTable() ) {
let content = postData["content"];
content = content.replace(/<table/g, '\n<table').replace(/<\/table>/g, '</table>\n');
postData["content"] = content;
}
// add blank line before <pre> and after </pre> respectively
if ( context.getAddBlankLineToPre() ) {
let content = postData["content"];
content = content.replace(/<pre/g, '\n<pre').replace(/<\/pre>/g, '</pre>\n');
postData["content"] = content;
}
// add blank line before <div> and after </div> respectively
if ( context.getAddBlankLineToPre() ) {
let content = postData["content"];
content = content.replace(/<div/g, '\n<div').replace(/<\/div>/g, '</div>\n');
postData["content"] = content;
}
}
この拡張機能では、Markdownから変換されたHTMLデータは「postData[“content”]」に格納されています。
そこでまずjs-beautifyを使って、このpostData[“content”]を整形します。
後は設定にしたがって、HTMLのタグの前後に空行を入れるだけです。
空行の挿入はreplace関数を利用して行っています。h1～h6を処理する部分は正規表現を駆使すればもっとスマートに記述できそうですが、いろいろ自信がないので、一番単純な実装としました。
実行
ここまで紹介した修正を行った上で、拡張機能の実行(デバッグ)を行うと、「設定」→「拡張機能」→「WordPress Post Configuration」に「Format HTML」で始まる設定項目が複数現われます。
私はこれらのすべての設定をオンにして使っています。
この状態で
## 見出し1
本文1
## 見出し2
本文2
という記事を作成して投稿すると、
<h2>見出し1</h2>
<p>本文1</p>
<h2>見出し2</h2>
<p>本文1</p>
というHTMLが生成されます。
オリジナルのWordPress拡張機能だと
<h2>見出し1</h2><p>本文1</p><h2>見出し2</h2><p>本文1</p>
と完全につながってしまうので、今回の修正によってHTMLがかなり見やすくなったと思います。
ただ、HTMLデータの効率を考えると、オリジナルのように無駄が内容が良いのは確かです。
効率を気にする場合は、WordPress側でminifyするか、今回の修正をオフにする方が良いと思います。
URI文字列のリンク化
これまでの修正でWordPress Post拡張機能の不満はだいぶ解消できたのですが、実際に使ってみて欲しくなったのがURI文字列を自動的にリンク化する機能です。
例えば、Markdownで
https://scratchpad.jp/
と記載した場合は、HTMLでは
<a href="https://scratchpad.jp/">https://scratchpad.jp/</a>
としたいと言うことです。
せっかくなのでこの修正も行ってみました。
修正の方針
この拡張機能はMarkdownをHTMLに変換するためにmarkdown-itというパッケージを利用しています。
このパッケージを調べみるとLinkifyという機能があり、これが活用できそうでしたので、次のような方針で行くことにしました。
- URI文字列を自動でリンク化するかどうかを設定できるようにする。
- markdown-itのLinkify機能を利用する。
- 自動でリンク化するのはプロトコル指定されているURI文字列のみ。
- scratchpad.jpのようにホスト名だけの文字列をURIと推定してリンク化することはない。
なお、新設する設定項目でデフォルト値を選択すると、オリジナルのWordPress Post拡張機能と同じ動作となるようにします。
ソースコードの修正
この修正を行ったブランチは下記になります。
package.json
package.jsonでは、拡張機能の設定項目の追加を行います。
今回は「contributes」→「configuration」→「properties」に下記の項目を追加しました。
"wordpress-post.enableLinkify" : {
"type": "boolean",
"default": false,
"description": "Auto-convert URL-like text to links if enabled."
},
「wordpress-post.enableLinkify」はURI文字列を自動的にリンク化するかどうかの設定で、デフォルトは「False(リンク化しない)」になっています。
context.ts
この拡張機能では設定項目関係の情報を取得する関数がcontext.tsに記述されています。
今回はこのファイルにpackage.jsonで追加した設定項目を取得するための関数を追加しました。
getEnableLinkify(): boolean {
return this.getConf("enableLinkify");
}
post.ts
post.tsはこの拡張機能のメイン動作を記述しているファイルです。
このファイルでMarkdownをHTMLに変換する処理は次のようになっていました。
postData["content"] = MarkdownIt().render(markdown.content);
この部分を今回は
const md = require("markdown-it")({
linkify: context.getEnableLinkify()
});
if ( context.getEnableLinkify() ) {
md.linkify.set({
fuzzyLink: false,
fuzzyEmail: false
});
}
postData["content"] = md.render(markdown.content);
markdown-itの初期化時にlinkifyというパラメータと渡しています。このパラメータの値はgetEnableLinkify()で決定されます。
すなわち、設定項目の「wordpress-post.enableLinkify」の値が利用され、この設定がtrue(URI文字列のリンク化を行う)である場合はmarkdown-itのlinkify機能が有効になります。
また、URI文字列のリンク化が有効な場合は、linkify機能(linkify-it)の設定を変更し
- fuzzyLink(http・httpsがない文字列をURIとして取り扱う)を無効
- fuzzyEmail(mailtoがない文字列をメールアドレスとして取り扱う)を無効
としています。
実行
ここまで紹介した修正を行った上で、拡張機能の実行(デバッグ)を行うと、「設定」→「拡張機能」→「WordPress Post Configuration」に「EnableLinkify」が現われます。
この設定項目を有効にした状態で、Markdownで
https://scratchpad.jp/
と記述すると、
投稿されたHTMLでは
<a href="https://scratchpad.jp/">https://scratchpad.jp/</a>
となります。
プルリクエスト
GitHubでフォークしたプロジェクトは、オリジナルのプロジェクトに対して修正内容をプルリクエストという形で通知することができます。
今回の修正についてはまだプルリクエストを作成しておりません。
これは前々回の修正のプルリクエストが受け入れられるかどうか不明のためです。
前々回の修正のプルリクエストが受け入れられた場合は、今回の修正のプルリクエスト化をしたいと思います。
まとめ
今回もVS Code用の拡張機能であるWordPress Post拡張機能の修正したことを紹介しました。
今回の修正ではMarkdownから生成されるHTMLをフォーマットする機能と、URIっぽい文字列を自動的にリンクする機能を追加しました。
次回もはその他の修正を紹介します。
コメント