rehypeを使ってHTMLを書き換える
背景
例えばブログサービスで投稿者には WYSIWYG なエディタで HTML を自由に書いてもらい、 実際のブログ上では その HTML を WebAPI で受け取り、出力しているとします。
ただ、そのブログサービスはリニューアルを行ったので、 DB に保存された html のままでは綺麗に表示されません。
jQuery で各々変換する方法もありますが、今回は WebAPI (Node.js) の時点で html を強引に書き換えることで対応したいとします。
rehype とは
https://github.com/rehypejs/rehype
HTML プロセッサです。 https://unifiedjs.com/ の plugin の 1 つで https://unifiedjs.com/ の思想については HP をご覧いただければ幸いです。
markdown を react component へ変換する際に https://remark.js.org/ を 使われたことがある方は多いと思われますが、こちらも unifiedjs の plugin の 1 つです。
rehype を使って書き換えるメリット
下記をメリットとして採用しました。
- 1 要素に対する操作が重複しにくくなる
- pluggable な関数として定義するので、apply, purge が容易
- virtual dom への変換が容易
html を書き換えるとは
今回は例として syntaxhighlighter から prismjs 用の code に変換することを目的とします。
syntaxhighlighter の記法は下記のようになっています。
<pre class="brush: markdown; gutter: true; first-line: 37"> # rehype を使って HTML を書き換える ## 背景 例えばブログサービスで投稿者には WYSIWYG なエディタで HTML を自由に書いてもらい、 実際のブログ上では その HTML を WebAPI で受け取り、出力しているとします。 </pre>
prismjs の記法は下記になります。
<pre class="code line-numbers" data-first=37> <code class="language-markdown"> # rehype を使って HTML を書き換える ## 背景 例えばブログサービスで投稿者には WYSIWYG なエディタで HTML を自由に書いてもらい、 実際のブログ上では その HTML を WebAPI で受け取り、出力しているとします。 </code> </pre>
やってみた
下記の環境で確認しております。
x is ? v1.0.0 via ⬢ v13.12.0
? # cat package.json
{
"name": "x",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"opts-parser": "^4.0.0",
"rehype-parse": "^6.0.2",
"rehype-stringify": "^7.0.0",
"unified": "^9.0.0"
}
}
processor を定義します。
rehype-parseで HTML を HAST に変換して、- HAST をごにょごにょして
rehype-stringifyを使って処理した HAST を HTML に戻します
const unified = require("unified");
const parse = require("rehype-parse");
const stringify = require("rehype-stringify");
const processor = unified()
.use(parse, { fragment: true }) // HTMLをHASTに変換する
.use(myRehypePlugin) // カスタムプラグインを適用
.use(stringify); // HASTを HTML(String) に変換する
最終的に process で 処理したい html をうけとり、コールバックを定義すれば完了です。
const fs = require("fs");
const rawContent = fs.readFileSync(0, "utf-8");
processor.process(rawContent, (err, vfile) => {
if (err) {
console.error(err);
return;
}
process.stdout.write(vfile.contents);
});
use に渡す関数は node, vfile, done を引数とする関数を返すようにします。
// node, vfile, done を受け取る関数を返す
function myRehypePlugin() {
return function (node, vfile, done) {
try {
visit(convertCode, node, null, 0);
done();
} catch (err) {
done(err);
}
};
}
// hastの要素を訪問する関数
function visit(visitor, node, parentNode, index) {
if (visitor(node, parentNode, index)) {
return;
}
if (!node.children) {
return;
}
for (let i = 0; i < node.children.length; i++) {
visit(visitor, node.children[i], node, i);
}
}
実際にゴニョゴニョする様子です。
const brushOptionParser = require("opts-parser");
function convertCode(node) {
// syntaxhighlighter のコードだけをいじるという強い意思
if (
node.type === "element" &&
node.tagName === "pre" &&
node.properties &&
node.properties.className &&
node.properties.className.indexOf("brush:") >= 0
) {
return convertPrismFromSyntaxHighlighter(node);
}
return false;
}
function convertPrismFromSyntaxHighlighter(node) {
const prismProps = {
className: ["code"]
};
const attrs = brushOptionParser.parse(node.properties.className.join(""));
if (attrs.gutter && attrs.gutter !== "false") {
prismProps.className.push("line-numbers");
}
if (attrs.firstLine) {
prismProps["data-start"] = attrs.firstLine;
}
if (attrs.highlight) {
prismProps["data-line"] = attrs.highlight.join(",");
}
const prismCode = {
type: "element",
tagName: "pre",
properties: prismProps,
children: [
{
type: "element",
tagName: "code",
properties: {
className: [`language-${attrs.brush}`]
},
children: node.children
}
]
};
let filenameElem;
if (attrs.title) {
filenameElem = {
type: "element",
tagName: "p",
properties: {
className: ["file-name"]
},
children: [
{
type: "element",
tagName: "code",
children: [
{
type: "text",
value: attrs.title
}
]
}
]
};
}
node.tagName = "div";
node.properties = {};
if (filenameElem) {
node.children = [filenameElem, prismCode];
} else {
node.children = [prismCode];
}
return true;
}
