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>