Add support of abcjs

This commit is contained in:
Wu Cheng-Han 2017-03-26 20:39:07 +08:00
parent aaf4948c55
commit 61dc6dbc15
6 changed files with 73 additions and 7 deletions

View file

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

View file

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

View file

@ -280,10 +280,24 @@ gantt
anther task : 24d 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 **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 **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 **graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html)
> More information about **mermaid** syntax [here](http://knsv.github.io/mermaid) > More information about **mermaid** syntax [here](http://knsv.github.io/mermaid)
> More information about **abc** syntax [here](http://abcnotation.com/learn)
Alert Area Alert Area
--- ---

View file

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

17
public/vendor/abcjs_basic_3.1.1-min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -202,6 +202,7 @@ module.exports = {
'script!ot', 'script!ot',
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'script!abcjs',
'expose?RevealMarkdown!reveal-markdown', 'expose?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/google-drive-upload.js'), path.join(__dirname, 'public/js/google-drive-upload.js'),
path.join(__dirname, 'public/js/google-drive-picker.js'), path.join(__dirname, 'public/js/google-drive-picker.js'),
@ -258,6 +259,7 @@ module.exports = {
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'expose?Viz!viz.js', 'expose?Viz!viz.js',
'script!abcjs',
'expose?io!socket.io-client', 'expose?io!socket.io-client',
'expose?RevealMarkdown!reveal-markdown', 'expose?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/google-drive-upload.js'), path.join(__dirname, 'public/js/google-drive-upload.js'),
@ -269,6 +271,7 @@ module.exports = {
'expose?filterXSS!xss', 'expose?filterXSS!xss',
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'script!abcjs',
'expose?RevealMarkdown!reveal-markdown', 'expose?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/pretty.js') path.join(__dirname, 'public/js/pretty.js')
], ],
@ -297,6 +300,7 @@ module.exports = {
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'expose?Viz!viz.js', 'expose?Viz!viz.js',
'script!abcjs',
'expose?RevealMarkdown!reveal-markdown', 'expose?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/pretty.js') path.join(__dirname, 'public/js/pretty.js')
], ],
@ -306,6 +310,7 @@ module.exports = {
'expose?filterXSS!xss', 'expose?filterXSS!xss',
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'script!abcjs',
'expose?RevealMarkdown!reveal-markdown', 'expose?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/slide.js') path.join(__dirname, 'public/js/slide.js')
], ],
@ -337,6 +342,7 @@ module.exports = {
'flowchart.js', 'flowchart.js',
'js-sequence-diagrams', 'js-sequence-diagrams',
'expose?Viz!viz.js', 'expose?Viz!viz.js',
'script!abcjs',
'headjs', 'headjs',
'expose?Reveal!reveal.js', 'expose?Reveal!reveal.js',
'expose?RevealMarkdown!reveal-markdown', 'expose?RevealMarkdown!reveal-markdown',
@ -370,7 +376,8 @@ module.exports = {
'gist-embed': path.join(__dirname, 'node_modules/gist-embed/gist-embed.min.js'), 'gist-embed': path.join(__dirname, 'node_modules/gist-embed/gist-embed.min.js'),
'bootstrap-tooltip': path.join(__dirname, 'public/vendor/bootstrap/tooltip.min.js'), 'bootstrap-tooltip': path.join(__dirname, 'public/vendor/bootstrap/tooltip.min.js'),
'headjs': path.join(__dirname, 'node_modules/reveal.js/lib/js/head.min.js'), 'headjs': path.join(__dirname, 'node_modules/reveal.js/lib/js/head.min.js'),
'reveal-markdown': path.join(__dirname, 'public/js/reveal-markdown.js') 'reveal-markdown': path.join(__dirname, 'public/js/reveal-markdown.js'),
abcjs: path.join(__dirname, 'public/vendor/abcjs_basic_3.1.1-min.js')
} }
}, },