HowTo.md

cd hackmd-0.5.0
patch -p1 < x.patch
mkdir public/vendor/abcjs/
wget https://raw.githubusercontent.com/paulrosen/abcjs/master/bin/abcjs_basic_2.3-min.js -O public/vendor/abcjs/abcjs_basic_2.3-min.js

Base: Hackmd 0.5.0 (https://github.com/hackmdio/hackmd/releases/tag/0.5.0)

x.patch

diff a/public/js/extra.js b/public/js/extra.js
index ba61a66..de6151c 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -12,6 +12,13 @@ var S = require('string');
 var saveAs = require('file-saver').saveAs;
 require('../vendor/md-toc');
 
+function getUniqueStr(myStrong){
+  var strong = 1000;
+  if (myStrong) strong = myStrong;
+  return new Date().getTime().toString(16)  + Math.floor(strong*Math.random()).toString(16)
+}
+
+
 //auto update last change
 window.createtime = null;
 window.lastchangetime = null;
@@ -353,6 +360,31 @@ function finishView(view) {
             console.warn(err);
         }
     });
+    //abc
+    var abc = view.find("div.abc.raw").removeClass("raw");
+    abc.each(function (key, value) {
+        try {
+            var $value = $(value);
+            var $ele = $(value).parent().parent();
+
+            var id = "abc-render-" + getUniqueStr();
+            var score = $value.text();
+
+            $ele.attr('id', id);
+            $ele.html('');
+
+            ABCJS.renderAbc(id, score);
+
+            $ele.addClass('abc');
+            $ele.css('width', '');
+            $ele.css('height', '');
+            $value.children().unwrap().unwrap();
+            console.log(key, value);
+        } catch (err) {
+            $value.unwrap();
+            console.warn(err);
+        }
+    });
     //mermaid
     var mermaids = view.find("div.mermaid.raw").removeClass("raw");
     mermaids.each(function (key, value) {
@@ -860,6 +892,8 @@ function highlightRender(code, lang) {
         return '<div class="flow-chart raw">' + code + '</div>';
     } else if (lang == 'graphviz') {
         return '<div class="graphviz raw">' + code + '</div>';
+    } else if (lang == 'abc') {
+        return '<div class="abc raw">' + code + '</div>';
     } else if (lang == 'mermaid') {
         return '<div class="mermaid raw">' + code + '</div>';
     }
diff a/public/views/head.ejs b/public/views/head.ejs
index 218847f..07f03a2 100644
--- a/public/views/head.ejs
+++ b/public/views/head.ejs
@@ -19,4 +19,5 @@
 <link rel="stylesheet" href='<%- url %>/build/emojify.js/dist/css/basic/emojify.min.css'>
 <%- include build/index-pack-header %>
 <% } %>
-<%- include polyfill %>
\ No newline at end of file
+<%- include polyfill %>
+<script type="text/javascript" src="/vendor/abcjs/abcjs_basic_2.3-min.js"></script>
\ No newline at end of file
diff a/public/css/markdown.css b/public/css/markdown.css
index 1de9025..3e60f22 100644
--- a/public/css/markdown.css
+++ b/public/css/markdown.css
@@ -4,7 +4,7 @@
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     padding-top: 40px;
     padding-bottom: 40px;
-    max-width: 758px;
+    max-width: 820px;
 	overflow: visible !important;
 }
 /*fixed style for bootstrap comflict*/
@@ -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,18 +124,28 @@
 .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%;
 }
 
+.markdown-body pre.abc {
+  overflow-x: auto !important;
+}
+
+.markdown-body pre.abc > svg {
+  min-width: 770px;
+}
+
 .markdown-body pre > code.wrap {
     white-space: pre-wrap;       /* Since CSS 2.1 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */