First working version

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "markdown-it-chart",
+  "version": "0.1.0",
+  "description": "Chart.js plugin for markdown-it.",
+  "main": "src/index.bundle.js",
+  "scripts": {
+    "build": "node -r babel-register node_modules/.bin/webpack --progress --colors --watch",
+    "test": "node test/index.bundle.js",
+    "upgrade": "ncu -ua && yarn upgrade"
+  },
+  "repository": "[email protected]:tylingsoft/markdown-it-chart.git",
+  "author": "Tyler Long <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-preset-env": "^1.2.2",
+    "markdown-it": "^8.3.1",
+    "npm-check-updates": "^2.10.4",
+    "standard": "^9.0.2",
+    "webpack": "^2.3.2",
+    "webpack-node-externals": "^1.5.4"
+  }
+}

src/index.js

@@ -0,0 +1,22 @@
+const chartBlock = (code) => {
+  try {
+    let json = JSON.parse(code)
+    return `<canvas class="chartjs">${JSON.stringify(json)}</canvas>`
+  } catch (e) { // JSON.parse exception
+    return `<pre>${e}</pre>`
+  }
+}
+
+const ChartPlugin = (md) => {
+  const temp = md.renderer.rules.fence.bind(md.renderer.rules)
+  md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+    let token = tokens[idx]
+    let code = token.content.trim()
+    if (token.info === 'chart') {
+      return chartBlock(code)
+    }
+    return temp(tokens, idx, options, env, slf)
+  }
+}
+
+export default ChartPlugin

test/index.js

@@ -0,0 +1,75 @@
+import assert from 'assert'
+import markdownIt from 'markdown-it'
+import markdownItLatex from '../src/index'
+
+const mdi = markdownIt()
+mdi.use(markdownItLatex)
+
+assert(mdi.render('# Hello world').trim() === '<h1>Hello world</h1>', '# Hello world')
+assert(mdi.render('Hello world').trim() === '<p>Hello world</p>', 'Hello world')
+
+console.log(mdi.render(`\`\`\`chart
+{
+  "type": "pie",
+  "data": {
+    "labels": [
+      "Red",
+      "Blue",
+      "Yellow"
+    ],
+    "datasets": [
+      {
+        "data": [
+          300,
+          50,
+          100
+        ],
+        "backgroundColor": [
+          "#FF6384",
+          "#36A2EB",
+          "#FFCE56"
+        ],
+        "hoverBackgroundColor": [
+          "#FF6384",
+          "#36A2EB",
+          "#FFCE56"
+        ]
+      }
+    ]
+  },
+  "options": {}
+}
+\`\`\``))
+
+assert(mdi.render(`\`\`\`chart
+{
+  "type": "pie",
+  "data": {
+    "labels": [
+      "Red",
+      "Blue",
+      "Yellow"
+    ],
+    "datasets": [
+      {
+        "data": [
+          300,
+          50,
+          100
+        ],
+        "backgroundColor": [
+          "#FF6384",
+          "#36A2EB",
+          "#FFCE56"
+        ],
+        "hoverBackgroundColor": [
+          "#FF6384",
+          "#36A2EB",
+          "#FFCE56"
+        ]
+      }
+    ]
+  },
+  "options": {}
+}
+\`\`\``).indexOf('class="chartjs"') > -1)