📚
[js] リンク先の Markdown をオシャレに表示するカスタムエレメントをつくろう
^.,.^ < Hey! 青色きつねです。
リンク先の.mdをfetchしてきてデザインを調整しつつ表示するカスタムエレメントをBlueFox(Edge拡張)のフロントために書いたよ。普通ライブラリを探すんだろうけど、野生動物には今のGoogleは難しすぎるの。
できあがったもの
こうすると、
<mark-down src="/docs/README.md"></mark-down>
こうなる。
インスタントに表示することができる。たかだか表示のためだけにSSRだなんだと色々したくない場合に便利。
使うライブラリ
MarkdownをHtmlにしてくれる
シンタックスハイライトしてくれる
その他：
ベースのデザインに使っているUiKit
DOM操作に使うライブラリ（querySelectorで代用可）
ソース
せつめいしょ
分かりやすいようにコードをちょっと削ってみます。
- fetchしてきたmd(htmlもいけます)をmarkedでパースしてdivに入れます。
- codeタグの中をいい具合に着色したいので、codeの中をhighlightしてcodeの中に入れなおします。
- ついでにcodeの中身をクリップボードに入れるボタンを作っときます
ちなみにfetchなのでローカルファイルだと動きません
window.customElements.define("mark-down", class extends HTMLElement {
constructor() {
(async () => {
super();
let div = document.createElement("div");
try {
let r = await fetch(this.attributes.src.value);
let text = await r.text();
if (r.ok) {
div.innerHTML = marked.parse(text);
}
await BlueFoxJs.Walker.walkHorizontally({
_scope_: div,
"code": async ($) => {
$.element.innerHTML = highlight.highlight(
$.element.textContent,
{
language: $.element.className
}
).value;
let button = document.createElement("button");
button.addEventListener("click", async (event) => {
navigator.clipboard.writeText($.element.textContent);
});
let menu = document.createElement("div");
menu.append(button);
$.element.parentElement.prepend(menu);
}
});
} catch (e) {
}
this.appendChild(div);
})();
}
});
GitHubに転がってるREADMEを読み込んでみる
画像は相対パスだと無理なものの、普通に使えそう
つかいどころ
ホームページやブログ… はSEOが壊滅しちゃいそう。
Webアプリとかブラウザ拡張機能には丁度いいかも。ちゃんとライブラリにしようかな
Social
Discussion