Add support of abcjs

public/css/markdown.css

@@ -113,7 +113,8 @@
 .markdown-body pre.flow-chart,
 .markdown-body pre.sequence-diagram,
 .markdown-body pre.graphviz,
-.markdown-body pre.mermaid {
+.markdown-body pre.mermaid,
+.markdown-body pre.abc {
     text-align: center;
     background-color: inherit;
     border-radius: 0;
@@ -123,14 +124,16 @@
 .markdown-body pre.flow-chart > code,
 .markdown-body pre.sequence-diagram > code,
 .markdown-body pre.graphviz > code,
-.markdown-body pre.mermaid > code {
+.markdown-body pre.mermaid > code,
+.markdown-body pre.abc > code {
     text-align: left;
 }
 
 .markdown-body pre.flow-chart > svg,
 .markdown-body pre.sequence-diagram > svg,
 .markdown-body pre.graphviz > svg,
-.markdown-body pre.mermaid > svg {
+.markdown-body pre.mermaid > svg,
+.markdown-body pre.abc > svg {
     max-width: 100%;
     height: 100%;
 }

public/css/slide.css

@@ -221,7 +221,8 @@ code[data-gist-id]:after {
 pre.flow-chart,
 pre.sequence-diagram,
 pre.graphviz,
-pre.mermaid {
+pre.mermaid,
+pre.abc {
     text-align: center;
     background-color: white;
     border-radius: 0;
@@ -231,14 +232,16 @@ pre.mermaid {
 pre.flow-chart > code,
 pre.sequence-diagram > code,
 pre.graphviz > code,
-pre.mermaid > code {
+pre.mermaid > code,
+pre.abc > code {
     text-align: left;
 }
 
 pre.flow-chart > svg,
 pre.sequence-diagram > svg,
 pre.graphviz > svg,
-pre.mermaid > svg {
+pre.mermaid > svg,
+pre.abc > svg {
     max-width: 100%;
     height: 100%;
 }

public/docs/features.md

@@ -280,10 +280,24 @@ gantt
     anther task      : 24d
 ```
 
+### Abc
+```abc
+X:1
+T:Speed the Plough
+M:4/4
+C:Trad.
+K:G
+|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
+GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
+|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
+g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
+```
+
 > More information about **sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/).
 > More information about **flow charts** syntax [here](http://adrai.github.io/flowchart.js/).
 > More information about **graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html)
 > More information about **mermaid** syntax [here](http://knsv.github.io/mermaid)
+> More information about **abc** syntax [here](http://abcnotation.com/learn)
 
 Alert Area
 ---

public/js/extra.js

@@ -385,6 +385,26 @@ export function finishView (view) {
       $value.parent().append('<div class="alert alert-warning">' + err + '</div>')
       console.warn(err)
     }
+  })
+  // abc.js
+  const abcs = view.find('div.abc.raw').removeClass('raw')
+  abcs.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">' + err + '</div>')
+      console.warn(err)
+    }
   })
     // image href new window(emoji not included)
   const images = view.find('img.raw[src]').removeClass('raw')
@@ -888,6 +908,8 @@ function highlightRender (code, lang) {
     return `<div class="graphviz raw">${code}</div>`
   } else if (lang === 'mermaid') {
     return `<div class="mermaid raw">${code}</div>`
+  } else if (lang === 'abc') {
+    return `<div class="abc raw">${code}</div>`
   }
   const result = {
     value: code