User defined renderer object causes a TypeError - marked.js

Question

Right now I'm familiarizing myself with marked.js. I want to add html attributes to the elements that are rendered when marked.parse() is called. In doing so a custom renderer object has been defined which overrides the code method.

When the renderer object is passed to marked.parse(string, {'renderer': renderer}), and I start typing in the TextArea that marked.js is supposed to parse the following error is raised:

• Uncaught TypeError: t.text is not a function

https://marked.js.org/using_pro#renderer

The renderer defines the HTML output of a given token. If you supply a renderer object to the Marked options, it will be merged with the built-in renderer and any functions inside will override the default handling of that token type.

What is causing this error to be raised?

const renderer = {
  code(code, infoString) {
    return `
      <code class="block_code_snippet fill_block_width">${string}</code
    `
  },
};
Copy

post_content_body.addEventListener("keyup", (event) => {
  let marked_post_content = marked.parse(
    post_content_body.value, {"renderer": renderer}
  );
  post_preview.innerHTML = marked_post_content
})
Copy

Answer 1

I believe the renderer object passed in is not merged with the default renderer, but replaces it completely. As a result, the renderer only handles code, but loses all other rendereing capabilities - see "Block-level renderer methods" and "Inline-level renderer methods" here.

Try changing your code to something like:

const renderer = new marked.Renderer();
renderer.code = function(code, infoString) {
  return `
    <code class="block_code_snippet fill_block_width">${string}</code
  `
};
Copy