Render abc

Author: Yukaii

package-lock.json

@@ -44,6 +44,7 @@
 		"@types/mocha": "^5.2.6",
 		"@types/node": "^10.12.21",
 		"@types/vscode": "^1.36.0",
+		"abcjs": "^5.8.0",
 		"css-loader": "^3.1.0",
 		"flowchart.js": "^1.12.2",
 		"glob": "^7.1.4",

package.json

@@ -11,6 +11,7 @@ import './style.css';
 
 import * as mermaid from 'mermaid';
 import * as flowchart from 'flowchart.js';
+import * as abcjs from "abcjs";
 import * as katex from 'katex';
 
 import 'js-sequence-diagrams';
@@ -140,3 +141,23 @@ $('span.mathjax.raw').removeClass('raw')
     $value.html(result)
     $value.children().unwrap()
   })
+
+$('span.abc.raw').removeClass('raw')
+  .each((key, value) => {
+    try {
+      var $value = $(value)
+      var $ele = $(value).parent().parent()
+
+      abcjs.renderAbc(value, $value.text())
+
+      $ele.addClass('abc')
+      $value.children().unwrap().unwrap()
+      const svg = $ele.find('> svg')
+      svg[0].setAttribute('viewBox', `0 0 ${svg.attr('width')} ${svg.attr('height')}`)
+      svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet')
+    } catch (err) {
+      $value.unwrap()
+      $value.parent().append(`<div class="alert alert-warning">${S(err).escapeHTML().s}</div>`)
+      console.warn(err)
+    }
+  })