Introduction to Markdown-it

Markdown-it is a powerful, pluggable, and configurable Markdown parser designed for optimal flexibility. It provides an easy way to convert Markdown to HTML and allows users to extend its capabilities with various plugins. Let’s explore some of the commonly used APIs in Markdown-it with examples:

Basic Usage

  
    const MarkdownIt = require('markdown-it');
    const md = new MarkdownIt();

    const result = md.render('# Markdown-it rulezz!');
    console.log(result); 
  

Setting Options

  
    const md = new MarkdownIt({
      html: true,
      linkify: true,
      typographer: true
    });
    const renderedHtml = md.render('Hello, *Markdown*!');
  

Plugins

  
    const emoji = require('markdown-it-emoji');
    const md = new MarkdownIt();
    md.use(emoji);

    const result = md.render('I :heart: Markdown-it!');
    console.log(result);
  

Advanced Configuration

  
    const hljs = require('highlight.js');
    const md = new MarkdownIt({
      highlight: (str, lang) => {
        if (lang && hljs.getLanguage(lang)) {
          try {
            return '
' +
                   hljs.highlight(lang, str, true).value +
                   '
';

          } catch (__) {}

        }
        return '
' + md.utils.escapeHtml(str) + '
';

      }

    });

  
Custom Containers
  
    const container = require('markdown-it-container');
    const md = new MarkdownIt();

    md.use(container, 'warning', {
      validate: params => params.trim().match(/^warning\s+(.*)$/),
      render: (tokens, idx) => {
        const m = tokens[idx].info.trim().match(/^warning\s+(.*)$/);

        if (tokens[idx].nesting === 1) {
          return '
' + md.utils.escapeHtml(m[1]) + '\n';
        } else {
          return '
\n';
        }
      }
    });
  

Inline Ruler
  
    const md = new MarkdownIt();

    md.inline.ruler.before('emphasis', 'my_plugin', (state, silent) => {
      // logic for the plugin
      return false;
    });
    const result = md.render('Some text with **bold** and _italic_.');
  

Example Application
Below is an example application using Markdown-it along with some plugins and options:
  
    const MarkdownIt = require('markdown-it');
    const emoji = require('markdown-it-emoji');
    const container = require('markdown-it-container');
    const hljs = require('highlight.js');

    const md = new MarkdownIt({
      html: true,
      linkify: true,
      typographer: true,
      highlight: (str, lang) => {
        if (lang && hljs.getLanguage(lang)) {
          try {
            return '
' +
                   hljs.highlight(lang, str, true).value +
                   '
';

          } catch (__) {}

        }
        return '
' + md.utils.escapeHtml(str) + '
';

      }

    });
    md.use(emoji)

      .use(container, 'warning', {

        validate: params => params.trim().match(/^warning\s+(.*)$/),

        render: (tokens, idx) => {

          const m = tokens[idx].info.trim().match(/^warning\s+(.*)$/);
          if (tokens[idx].nesting === 1) {

            return '
' + md.utils.escapeHtml(m[1]) + '\n';

          } else {

            return '
\n';

          }

        }

      });
    const markdownText = `

    # Hello Markdown-it
    This is a test for **bold** text, _italic_ text, and code:
    \`\`\`javascript

    const x = 10;

    console.log(x);

    \`\`\`
    This should include emoji 🙂 and a custom container:
    ::: warning This is a warning message

    Please be cautious!

    :::

    `;
    const result = md.render(markdownText);

    console.log(result);

  
This example showcases the flexibility and power of Markdown-it in enhancing Markdown parsing and rendering.

Hash: 29e7bb99c2c940abf7ce8492b405896c312a71a6987a807d5f6b68cc5b57acd3