markdown2htmlの変換処理

1. 拡張機能を定義する

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. このとき、名前は一意の識別子として使用されます。
   2. レベルに対応する配列にトークナイザーを配置します。レベルはインラインまたはブロックにすることができます。
   3. start は、レベルに対応する start[Level] (startInline) に配置されます。
   4. レンダラーは名前に従って extensions.renderers に設定されます
3. ここで解析レベルがインラインの場合
4. 適用する場合は、marked.parse(markdown copywriting, { 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ライブラリの変換処理を含めたフローチャートをまとめてみました。