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 functionhttps://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
`
},
};
post_content_body.addEventListener("keyup", (event) => {
let marked_post_content = marked.parse(
post_content_body.value, {"renderer": renderer}
);
post_preview.innerHTML = marked_post_content
})
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
`
};