import Chart from 'chart.js' function render () { document.querySelectorAll('.chartjs').forEach(element => { try { // eslint-disable-next-line no-new new Chart(element, JSON.parse(element.textContent)) } catch (e) { element.outerHTML = `<pre>Chart.js complains: "${e}"</pre>` } }) } const chartPlugin = (md) => { const temp = md.renderer.rules.fence.bind(md.renderer.rules) md.renderer.rules.fence = (tokens, idx, options, env, slf) => { const token = tokens[idx] if (token.info && token.info.trim() === 'chart') { const code = token.content.trim() try { const json = JSON.parse(code) return `<canvas class="chartjs">${JSON.stringify(json)}</canvas>` } catch (e) { // JSON.parse exception return `<pre>${e}</pre>` } } return temp(tokens, idx, options, env, slf) } } export default { render, chartPlugin }