1. 定义一个extensions

function markedMention() {
    return {
        extensions: [{
            name: 'mention',
            level: 'inline',
            start(src) {
                // console.log("markedMention start....", src);
                return src.indexOf('#')
            },
            tokenizer(src, tokens) {
                const rule = /^(#[a-zA-Z0-9]+)\s?/
                const match = rule.exec(src)

                // console.log("mention...", match)
                if (match) {
                    const token = {
                        type: 'mention',
                        raw: match[0],
                        text: match[1],
                        tokens: [],
                    }
                    return token
                }
            },
            renderer(token) {
                // console.log("men....", token);
                return `<span class="mention" data-mention="${token.text}">${token.text}</span>`;
            },
        }]
    }
}

2. 使用marked.use(markedMention)
   1. 此时会以name作为唯一标识
   2. 将tokenizer放入level对应的数组中，level可以是inline 或 block
   3. start放入level对应的start[Level]（startInline）中
   4. renderers根据name设置在extensions.renderers中
3. 此处解析level为inline的情况
4. 应用时，我们需要使用marked.parse(markdown文案, { gfm: true, …各种配置 })
5. 在使用marked.parse之前，如果需要额外的扩展，需要在此之前使用.use()方法进行扩展，扩展时相当于给默认值（defaults）增加内容

// 使用marked.parse，就是在根据defaults来构建一个新的对象。
function marked(src, opt, callback) {
  return parseMarkdown(Lexer.lex, Parser.parse)(src, opt, callback);
}

// Lexer.lex
lex(src) {
    src = src.replace(/\r\n|\r/g, '\n');
    let next;
    while (next = this.inlineQueue.shift()) {
      this.inlineTokens(next.src, next.tokens);
    }

    return this.tokens;
}

// Parser.parse

这是我整理的流程图，包含了markdown2html库的转换过程。