markdown-it-info

The markdown-it plugin that enables easy creation of Qiita and Zenn-style admonition boxes within Markdown documents.

• Setup
• Quick Usage
• Usage
• Features
• Extensions
• Acknowledgments

Setup

Install via npm:

npm install markdown-it-info

Use with markdown-it:

const 
    md = require('markdown-it')(),
    plugin = require("markdown-it-info");

md.use(plugin,{options});

Params:

• options:
  • admonitionStyle - Optional value to change the CSS style sheet. Default is “default”, others are “qiita” and “zen”.
  • defaultType - Optional value to change the default type of the box. Default is “info”, others are “warn”, “warning”, “alert” and “question”.
  • defaultTitle - Optional value to change the default title of the box. Default is “Enter the title here”.

Quick Usage

Input in Markdown:

:::note info TITLE
CONTENT
:::

Rendering in HTML:

<div class="default-admonition info">
<p class="default-admonition-title">TITLE</p>
<p>CONTENT</p>
</div>

Usage

This is a markdown-it plugin that allows you to easily create an “Admonition Box”.

Normally, the “default-admonition” class is assigned, but “qiita-admonition” and “zenn-admonition” can be assigned by changing the admonitionStyle.

This plugin alone only gives a class, but the included stylesheet will decorate the box.

admonitionStyle is "default":

admonitionStyle is "qiita":

admonitionStyle is "zenn":

Features

markdown-it-info's key features include:

• Add admonition boxes with Syntax like Qiita and Zenn
• Support multiple box types (e.g. info, warn, alert, question)
• Enable Markdown syntax within boxes (lists, emphasis, strikethrough, code spans, links, images, code blocks)
• Supports nesting of boxes within each other

These features enhance the readability and visual appeal of technical documents and blog posts.

Extensions

• yusu79/vscode-markdown-info

Acknowledgments

In developing this project, we referenced the following open source software. We would like to express our gratitude:

• qjebbs/vscode-markdown-extended