How to use markdown-it - 10 common examples

import MarkdownIt from 'markdown-it';
import fm from 'front-matter';
import Immutable from 'immutable';

import { codeToText } from './util';

let markedownIt = new MarkdownIt();

export default function parse(md) {
    const content = fm(md);
    const parsedMarkdown = markedownIt.parseInline(content.body);
    const blockParsedMarkdown = markedownIt.parse(content.body);

    // Extract code blocks first
    let codeBlocks = [];
    for (let block of blockParsedMarkdown) {
        if (block.type === 'fence') {
            const info = block.info.split(';').map(s => s.trim());
            const language = info[0];
            const attrs = info.splice(1);
            codeBlocks.push(Immutable.fromJS({
                type: 'code',
                content: block.content.trim(),

'use strict';

const fs = require('fs');
const path = require('path');

const maybe = require('call-me-maybe');

var hljs = require('highlightjs/highlight.pack.js');
var hlpath = require.resolve('highlightjs/highlight.pack.js').replace('highlight.pack.js', '');

const emoji = require('markdown-it-emoji');
const attrs = require('markdown-it-attrs');
var md = require('markdown-it')({
    linkify: true, html: true,
    highlight: function (str, lang) {
        var slang = lang.split('--')[0]; // allows multiple language tabs for the same language
        if (slang && hljs.getLanguage(slang)) {
            try {
                return '<pre class="highlight tab tab-' + lang + '"><code>' +
                    hljs.highlight(slang, str, true).value +
                    '</code></pre>';
            } catch (__) { }
        }

        return '<pre class="highlight"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
    }
}).use(require('markdown-it-lazy-headers'));
md.use(emoji);
const yaml = require('yaml');

import taskList from "markdown-it-task-lists";
import TOC from "markdown-it-table-of-contents";

import twemoji from 'twemoji';

const markdownOption = {
  html:         false,        // Enable HTML tags in source
  xhtmlOut:     false,        // Use '/' to close single tags (<br>)
  breaks:       false,        // Convert '\n' in paragraphs into <br>
  langPrefix:   'language-',  // CSS language prefix for fenced blocks
  linkify:      false,         // autoconvert URL-like texts to links
  typographer:  true,         // Enable smartypants and other sweet transforms
  quotes: '“”‘’',
};

const md = new MarkdownIt(markdownOption);

const anchorOption = {
  level: [1, 2, 3]
};

const imsizeOption = {
  autofill: true
};

const TOC_Option = {
  includeLevel: [1, 2, 3]
};


md.use(abbr)
  .use(anchor, anchorOption)

function md2html(input) {
  var md = require('markdown-it')({html: true, linkify: true, typographer: true})
    .use(require('markdown-it-anchor'), { slugify: slugify } )
    .use(require('markdown-it-checkbox'))
    .use(require('markdown-it-header-sections'))
    .use(require('markdown-it-include'))
    .use(require('markdown-it-multimd-table'), {enableMultilineRows: true})
    .use(require('markdown-it-smartarrows'))
    .use(require('markdown-it-table-of-contents'))
    .use(require('markdown-it-container'), 'classname', {
      validate: name => name.trim().length, // allow everything not empty
      render: (tokens, idx) => {
        if (tokens[idx].nesting === 1) {
          return `<div class="${tokens[idx].info.trim()}">\n`;
        }
        return '</div>\n';
      }
    });

_options.markdownItReact ? _options.markdownItReact() : {}
  )

  const {
    body,
    attributes: { imports: importMap }
  } = frontMatter(source)

  const imports = `import * as Nerv from 'nervjs';  import copy from 'copy-to-clipboard';${importMap}`

  const moduleJS = []
  const state = ''
  // 放在这里应该没有问题， 反正是顺序执行的
  let flag = ''

  md.use(mdContainer, 'demo', {
    validate: params => params.trim().match(/^demo\s*(.*)$/),
    render: (tokens, idx) => {
      // container 从开头到结尾把之间的token跑一遍，其中idx定位到具体的位置

      // 获取描述
      const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/)

      // 有此标记代表 ::: 开始
      if (tokens[idx].nesting === 1) {
        flag = idx

        let codeText = ''
        // let state = null
        // let method = ''
        let i = 1

// 只认```，其他忽略
          if (token.markup === '```') {
            if (token.info === 'js') {
              // 插入到import后，component前
              moduleJS.push(token.content)
            } else if (token.info === 'jsx') {
              // 插入render内
              jsx = token.content
            }
          }
          i++
          token = tokens[idx + i]
        }

        // 描述也执行md
        return formatOpening(jsx, md.render(m[1]), flag)
      }
      return formatClosing(flag)
    }
  })

if (token.markup === '```') {
            // 里面的内容都当代码文本输出
            codeText = token.content
          }
          i++
          token = tokens[idx + i]
        }
        // 描述也执行md
        return formatOpening(codeText, md.render(m[1]), flag)
      }
      return formatClosing(flag)
    }
  })

  // md 处理过后的字符串含有 class 和 style ，需要再次处理给到react
  const content = md
    .render(body)
    .replace(/<hr>/g, '<hr>')
    .replace(/<br>/g, '<br>')
    .replace(/class=/g, 'className=')
    .replace(/style="text-align:center"/g, 'style={{ textAlign: "center"}}')
    .replace(/style="text-align:left"/g, 'style={{ textAlign: "left"}}')
    .replace(/style="text-align:right"/g, 'style={{ textAlign: "right"}}')
  return formatModule(imports, moduleJS.join('\n'), content, state)
}

jsx = token.content
            }
          }
          i++
          token = tokens[idx + i]
        }

        // 描述也执行md
        return formatOpening(jsx, md.render(m[1]), flag)
      }
      return formatClosing(flag)
    }
  })

  // md 处理过后的字符串含有 class 和 style ，需要再次处理给到react
  let content = md
    .render(body)
    .replace(/<hr>/g, '<hr>')
    .replace(/<br>/g, '<br>')
    .replace(/class=/g, 'className=')
    .replace(/\[x\]/g, '<input disabled="" checked="" type="checkbox">')
    .replace(/\[ \]/g, '<input disabled="" type="checkbox">')

  return formatModule(imports, moduleJS.join('\n'), content)
}

// 从 ::: 下一个token开始
        let token = tokens[idx + i]

        // 如果没有到结尾
        while (token.markup !== ':::') {
          // 只认```，其他忽略
          if (token.markup === '```') {
            // 里面的内容都当代码文本输出
            codeText = token.content
          }
          i++
          token = tokens[idx + i]
        }
        // 描述也执行md
        return formatOpening(codeText, md.render(m[1]), flag)
      }
      return formatClosing(flag)
    }
  })

jsx = token.content
            }
          }
          i++
          token = tokens[idx + i]
        }

        // 描述也执行md
        return formatOpening(jsx, md.render(m[1]), flag)
      }
      return formatClosing(flag)
    }
  })

  // md 处理过后的字符串含有 class 和 style ，需要再次处理给到react
  let content = md
    .render(body)
    .replace(/<hr>/g, '<hr>')
    .replace(/<br>/g, '<br>')
    .replace(/class=/g, 'className=')
    .replace(/\[x\]/g, '<input disabled="" checked="" type="checkbox">')
    .replace(/\[ \]/g, '<input disabled="" type="checkbox">')

  return formatModule(imports, moduleJS.join('\n'), content)
}