Bloggerテーマの作成(3) markdown-itのライブデモを再現する-p--q

とりあえずライブデモが再現できるようにします。

オプションの設定

<script>
const options = {
  linkify: true,
  typographer: true
};
const md = window.markdownit(options);
let post_elems = document.querySelectorAll("div.post-body");
post_elems.forEach(e => {
  e.innerHTML = md.render(e.textContent);
});
</script>

linkifyを有効にしてURLの文字列にリンクをつけます。

typographerを有効にしてmarkdown-it/replacements.jsにあるように置換します。

+- → ±

こういう変換などをやってくれます。

プラグインのインストール

ライブデモで使われているプラグインは次の9つです。

絵文字を表示させます。

下付き文字を表示させます。

上付き文字を表示させます。

<ins> 要素にして追加された文字列の範囲を表します。

markdown-it-mark

<mark> 要素にして文字列をハイライトします。

markdown-it-footnote

脚注をつけます。

markdown-it-deflist

<dl> 要素で説明リストを表します。

markdown-it-abbr

<abbr>要素で略語や頭字語を表します。

markdown-it-container

カスタムコンテナを作成できます。レンダラーを定義しないときはコンテナ名を渡すとそれをクラス名としたdivタグになります。

jsdelivrですべて選択して導入します。

一番上のscriptタグひとつですべてのスクリプトを取得できます。

<script src="https://cdn.jsdelivr.net/combine/npm/markdown-it@12/dist/markdown-it.min.js,npm/markdown-it-emoji@2/dist/markdown-it-emoji.min.js,npm/markdown-it-sub@1/dist/markdown-it-sub.min.js,npm/markdown-it-sup@1/dist/markdown-it-sup.min.js,npm/markdown-it-ins@3/dist/markdown-it-ins.min.js,npm/markdown-it-mark@3/dist/markdown-it-mark.min.js,npm/markdown-it-footnote@3/dist/markdown-it-footnote.min.js,npm/markdown-it-deflist@2/dist/markdown-it-deflist.min.js,npm/markdown-it-abbr@1/dist/markdown-it-abbr.min.js,npm/markdown-it-container@3/dist/markdown-it-container.min.js"></script>
<script>
const options = {
  linkify: true,
  typographer: true
};
const md = window.markdownit(options)
  .use(window.markdownitEmoji)
  .use(window.markdownitSub)
  .use(window.markdownitSup)
  .use(window.markdownitIns)
  .use(window.markdownitMark)
  .use(window.markdownitFootnote)
  .use(window.markdownitDeflist)
  .use(window.markdownitAbbr)
  .use(window.markdownitContainer, "warning");
let post_elems = document.querySelectorAll("div.post-body");
post_elems.forEach(e => {
  e.innerHTML = md.render(e.textContent);
});
</script>

これでプラグインも実行されます。

ライブデモをBloggerエディタで投稿する

markdown-it demo

このライブデモのページの左側のマークダウンをコピーします。

BloggerエディタのHTMLビューにペーストします。

[\<ins>]と [\<mark>]の部分はそれぞれ[\<ins>]と[\<mark>]というようにHTMLエンティティで置換が必要です。

これで再現できました。

全く同じ見た目にするにはCSSの設定が必要です。

プラグインを整理する

自分が使いそうな上記の5つのプラグインだけ登録することにしました。

HTML/JavaScriptガジェットに貼り付けるコンテンツは次のようになります。

<script src="https://cdn.jsdelivr.net/combine/npm/markdown-it@12/dist/markdown-it.min.js,npm/markdown-it-sub@1/dist/markdown-it-sub.min.js,npm/markdown-it-sup@1/dist/markdown-it-sup.min.js,npm/markdown-it-ins@3/dist/markdown-it-ins.min.js,npm/markdown-it-footnote@3/dist/markdown-it-footnote.min.js,npm/markdown-it-container@3/dist/markdown-it-container.min.js"></script>
<script>
const options = {
  linkify: true,
  typographer: true
};
const md = window.markdownit(options)
  .use(window.markdownitSub)
  .use(window.markdownitSup)
  .use(window.markdownitIns)
  .use(window.markdownitFootnote)
  .use(window.markdownitContainer, "warning");
let post_elems = document.querySelectorAll("div.post-body");
post_elems.forEach(e => {
  e.innerHTML = md.render(e.textContent);
});
</script>

Bloggerテーマの作成(3) markdown-itのライブデモを再現する

オプションの設定

プラグインのインストール

ライブデモをBloggerエディタで投稿する

プラグインを整理する

0 件のコメント:

コメントを投稿

ブログ検索 by Blogger

Translate

最近のコメント

全記事