Klassen in Markdown hinzufügen #markdown-it

Markdown kann verschiedene HTML-Tags verwenden, aber dieser Artikel handelt davon, wie man Klassen-Tags verwendet. Wir verwenden die Node.js-Paketbibliothek markdown-it-container, um die Verwendung von Markdown-Klassen-Tags zu ermöglichen.

Mit markdown-it-container können wir CSS-Klassen in Markdown hinzufügen.

Einführung

Installieren Sie zunächst markdown-it-container.

npm install markdown-it-container --save

markdown-it-container - npm

Unten ist ein Beispiel für die Verwendung von markdown-it-container zum Hinzufügen von CSS-Klassen in Markdown.

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'));

Erklärung

Der obige Code verwendet zunächst markdown-it-container, um ein Tag namens spoiler zu erstellen.

Dies ermöglicht das Hinzufügen von CSS-Klassen in Markdown.

Sie können Klassen mit :class wie folgt hinzufügen:

<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">
# hoge
## hogehoge
something
</div>