Markdown configuration: marked extensions don't work

[dzylikecode]

Bug Report

• OS: windows
• browser: Google Chrome 104.0.5112.102

In order to customize the parsing rules, I follow the advice of the document about Markdown configuration and read the marked documentation. However, when I wanna reproduce the example to add a custom syntax to generate <dl> description lists, it doesn't work.

Steps to reproduce

• configure the docsify

  window.$docsify = {
    markdown: function (marked, oldRenderer) {
      let renderer = {
        // block
        code: function (code, infostring, escaped) {
          return oldRenderer.code.apply(this, arguments);
        },
        blockquote: function (quote) {
          return oldRenderer.blockquote.apply(this, arguments);
        },
        html: function (html) {
          return oldRenderer.html.apply(this, arguments);
        },
        heading: function (text, level, raw, slugger) {
          return oldRenderer.heading.apply(this, arguments);
        },
        hr: function () {
          return oldRenderer.hr.apply(this, arguments);
        },
        list: function (body, ordered, start) {
          return oldRenderer.list.apply(this, arguments);
        },
        listitem: function (text, task, checked) {
          return oldRenderer.listitem.apply(this, arguments);
        },
        checkbox: function (checked) {
          return oldRenderer.checkbox.apply(this, arguments);
        },
        paragraph: function (text) {
          return oldRenderer.paragraph.apply(this, arguments);
        },
        table: function (header, body) {
          return oldRenderer.table.apply(this, arguments);
        },
        tablerow: function (content) {
          return oldRenderer.tablerow.apply(this, arguments);
        },
        tablecell: function (content, flags) {
          return oldRenderer.tablecell.apply(this, arguments);
        },
        // inline
        strong: function (text) {
          return oldRenderer.strong.apply(this, arguments);
        },
        em: function (text) {
          return oldRenderer.em.apply(this, arguments);
        },
        codespan: function (code) {
          return oldRenderer.codespan.apply(this, arguments);
        },
        br: function () {
          return oldRenderer.br.apply(this, arguments);
        },
        del: function (text) {
          return oldRenderer.del.apply(this, arguments);
        },
        link: function (href, title, text) {
          return oldRenderer.link.apply(this, arguments);
        },
        image: function (href, title, text) {
          return oldRenderer.image.apply(this, arguments);
        },
        text: function (text) {
          return oldRenderer.text.apply(this, arguments);
        },
      };
      const descriptionList = {
        name: "descriptionList",
        level: "block", // Is this a block-level or inline-level tokenizer?
        start(src) {
          return src.match(/:[^:\n]/)?.index;
        }, // Hint to Marked.js to stop and check for a match
        tokenizer(src, tokens) {
          const rule = /^(?::[^:\n]+:[^:\n]*(?:\n|$))+/; // Regex for the complete token, anchor to string start
          const match = rule.exec(src);
          if (match) {
            const token = {
              // Token to generate
              type: "descriptionList", // Should match "name" above
              raw: match[0], // Text to consume from the source
              text: match[0].trim(), // Additional custom properties
              tokens: [], // Array where child inline tokens will be generated
            };
            this.lexer.inline(token.text, token.tokens); // Queue this data to be processed for inline tokens
            return token;
          }
        },
        renderer(token) {
          return `<dl>${this.parser.parseInline(token.tokens)}\n</dl>`; // parseInline to turn child tokens into HTML
        },
      };
  
      const description = {
        name: "description",
        level: "inline", // Is this a block-level or inline-level tokenizer?
        start(src) {
          return src.match(/:/)?.index;
        }, // Hint to Marked.js to stop and check for a match
        tokenizer(src, tokens) {
          const rule = /^:([^:\n]+):([^:\n]*)(?:\n|$)/; // Regex for the complete token, anchor to string start
          const match = rule.exec(src);
          if (match) {
            return {
              // Token to generate
              type: "description", // Should match "name" above
              raw: match[0], // Text to consume from the source
              dt: this.lexer.inlineTokens(match[1].trim()), // Additional custom properties, including
              dd: this.lexer.inlineTokens(match[2].trim()), //   any further-nested inline tokens
            };
          }
        },
        renderer(token) {
          return `\n<dt>${this.parser.parseInline(
            token.dt
          )}</dt><dd>${this.parser.parseInline(token.dd)}</dd>`;
        },
        childTokens: ["dt", "dd"], // Any child tokens to be visited by walkTokens
      };
  
      function walkTokens(token) {
        // Post-processing on the completed token tree
        if (token.type === "strong") {
          token.text += " walked";
          token.tokens = this.Lexer.lexInline(token.text);
        }
      }
      marked.use({
        extensions: [descriptionList, description],
        walkTokens,
      });
  
      // EQUIVALENT TO:
  
      marked.use({ extensions: [descriptionList] });
      marked.use({ extensions: [description] });
      marked.use({ walkTokens });
      return marked;
    },
  };

• write in README.md file

  A Description List:
  : Topic 1 : Description 1
  : **Topic 2** : _Description 2_
  

• open chrome to debug

What is current behaviour

• extension does not work

  The output of the browser is as follows:

  <p>
    A Description List: : Topic 1 : Description 1 : <strong>Topic 2</strong> :
    <em>Description 2</em>
  </p>

What is the expected behaviour

• marked documentation says that the output will contain elements <dt> and <dd>

  <p>A Description List:</p>
  <dl>
    <dt>Topic 1</dt>
    <dd>Description 1</dd>
    <dt><strong>Topic 2 walked</strong></dt>
    <dd><em>Description 2</em></dd>
  </dl>

Other relevant information

• Bug does still occur when all/other plugins are disabled?

• Your OS:

• Node.js version:

• npm/yarn version:

• Browser version:

• Docsify version:

• Docsify plugins:

Please create a reproducible sandbox

• link: https://codesandbox.io/s/frosty-pateu-r7zsfw

Mention the docsify version in which this bug was not present (if any)

[dzylikecode]

solved

• need to import the original marked library

  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./lib/vue.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
      let newMarked = marked;
      window.$docsify = {
        markdown: function (markedOld, oldRenderer) {
          let renderer = {
            // block
            code: function (code, infostring, escaped) {
              return oldRenderer.code.apply(this, arguments);
            },
            blockquote: function (quote) {
              return oldRenderer.blockquote.apply(this, arguments);
            },
            html: function (html) {
              return oldRenderer.html.apply(this, arguments);
            },
            heading: function (text, level, raw, slugger) {
              return oldRenderer.heading.apply(this, arguments);
            },
            hr: function () {
              return oldRenderer.hr.apply(this, arguments);
            },
            list: function (body, ordered, start) {
              return oldRenderer.list.apply(this, arguments);
            },
            listitem: function (text, task, checked) {
              return oldRenderer.listitem.apply(this, arguments);
            },
            checkbox: function (checked) {
              return oldRenderer.checkbox.apply(this, arguments);
            },
            paragraph: function (text) {
              return oldRenderer.paragraph.apply(this, arguments);
            },
            table: function (header, body) {
              return oldRenderer.table.apply(this, arguments);
            },
            tablerow: function (content) {
              return oldRenderer.tablerow.apply(this, arguments);
            },
            tablecell: function (content, flags) {
              return oldRenderer.tablecell.apply(this, arguments);
            },
            // inline
            strong: function (text) {
              return oldRenderer.strong.apply(this, arguments);
            },
            em: function (text) {
              return oldRenderer.em.apply(this, arguments);
            },
            codespan: function (code) {
              return oldRenderer.codespan.apply(this, arguments);
            },
            br: function () {
              return oldRenderer.br.apply(this, arguments);
            },
            del: function (text) {
              return oldRenderer.del.apply(this, arguments);
            },
            link: function (href, title, text) {
              return oldRenderer.link.apply(this, arguments);
            },
            image: function (href, title, text) {
              return oldRenderer.image.apply(this, arguments);
            },
            text: function (text) {
              return oldRenderer.text.apply(this, arguments);
            },
          };
          const descriptionList = {
            name: "descriptionList",
            level: "block", // Is this a block-level or inline-level tokenizer?
            start(src) {
              return src.match(/:[^:\n]/)?.index;
            }, // Hint to Marked.js to stop and check for a match
            tokenizer(src, tokens) {
              const rule = /^(?::[^:\n]+:[^:\n]*(?:\n|$))+/; // Regex for the complete token, anchor to string start
              const match = rule.exec(src);
              if (match) {
                const token = {
                  // Token to generate
                  type: "descriptionList", // Should match "name" above
                  raw: match[0], // Text to consume from the source
                  text: match[0].trim(), // Additional custom properties
                  tokens: [], // Array where child inline tokens will be generated
                };
                this.lexer.inline(token.text, token.tokens); // Queue this data to be processed for inline tokens
                return token;
              }
            },
            renderer(token) {
              return `<dl>${this.parser.parseInline(token.tokens)}\n</dl>`; // parseInline to turn child tokens into HTML
            },
          };

          const description = {
            name: "description",
            level: "inline", // Is this a block-level or inline-level tokenizer?
            start(src) {
              return src.match(/:/)?.index;
            }, // Hint to Marked.js to stop and check for a match
            tokenizer(src, tokens) {
              const rule = /^:([^:\n]+):([^:\n]*)(?:\n|$)/; // Regex for the complete token, anchor to string start
              const match = rule.exec(src);
              if (match) {
                return {
                  // Token to generate
                  type: "description", // Should match "name" above
                  raw: match[0], // Text to consume from the source
                  dt: this.lexer.inlineTokens(match[1].trim()), // Additional custom properties, including
                  dd: this.lexer.inlineTokens(match[2].trim()), //   any further-nested inline tokens
                };
              }
            },
            renderer(token) {
              return `\n<dt>${this.parser.parseInline(
                token.dt
              )}</dt><dd>${this.parser.parseInline(token.dd)}</dd>`;
            },
            childTokens: ["dt", "dd"], // Any child tokens to be visited by walkTokens
          };

          function walkTokens(token) {
            // Post-processing on the completed token tree
            if (token.type === "strong") {
              token.text += " walked";
              token.tokens = this.Lexer.lexInline(token.text);
            }
          }
          newMarked.use({
            extensions: [descriptionList, description],
            walkTokens,
            renderer,
          });
          //   let res = newMarked.parse(
          //     "A Description List:\n" +
          //       ":   Topic 1   :  Description 1\n" +
          //       ": **Topic 2** : *Description 2*"
          //   );
          return newMarked;
        },
      };
    </script>
    <script src="./lib/docsify.js"></script>
  </body>
</html>