Markdown

Markdownでクラスを追加できるようにする方法

markdown-it-containerでMarkdownでCSSクラスを追加できるようにしたりします。

npm install markdown-it-container --save

https://yuis.xsrv.jp/data/0wUwaA3EBb0D3j8SOceVdHqHvraze5qz.png

markdown-it-container – npm


var md = require('markdown-it')(); md.use(require('markdown-it-container'), 'spoiler', { validate: function(params) { return params.trim().match(/^spoiler\s+(.*)$/); }, render: function (tokens, idx) { var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/); if (tokens[idx].nesting === 1) { // opening tag return '<details><summary>' + m[1] + '</summary>\n'; } else { // closing tag return '</details>\n'; } } }); md.use(require('markdown-it-container'), 'class', { validate: function(params) { return params.trim().match(/^class\s+(.*)$/); }, render: function (tokens, idx) { var m = tokens[idx].info.trim().match(/^class\s+(.*)$/); if (tokens[idx].nesting === 1) { // opening tag return `<div class="${m[1]}">\n`; } else { // closing tag return '</div>\n'; } } }); console.log("\n"); console.log(md.render('::: spoiler click me\n*contentcontent*\n:::\n')); console.log(md.render('::: spoiler \n*contentcontent*\n:::\n')); console.log(md.render('::: spoiler\n*contentcontent*\n:::\n')); console.log(md.render('::: class warning\n*contentcontent*\n:::\n')); console.log(md.render('::: class info\n*contentcontent*\n:::\n')); console.log(md.render('::: class note gray\n*contentcontent*\n:::\n')); console.log(md.render('::: class note gray\n# hoge \n## hogehoge \n\something\n:::\n'));

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_59e6eb12-2d3f-471b-a070-f35ae935e2c3.png

<details><summary>click me</summary>
<em>contentcontent</em>
</details>

::: spoiler
<em>contentcontent</em>
:::

::: spoiler
<em>contentcontent</em>
:::

<div class="warning">
<em>contentcontent</em>
</div>

<div class="info">
<em>contentcontent</em>
</div>

<div class="note gray">
<em>contentcontent</em>
</div>

<div class="note gray">
<h1>hoge</h1>
<h2>hogehoge</h2>
something
</div>