diff options
| author | Baron Schwartz <xaprb@users.noreply.github.com> | 2019-01-18 00:49:09 +0300 |
|---|---|---|
| committer | Baron Schwartz <xaprb@users.noreply.github.com> | 2019-01-18 00:49:09 +0300 |
| commit | 88c9ab109dddb7b4d9c67ab394f5674d0c208a2e (patch) | |
| tree | ec59088d19490f4f0a4361d1cab0f39a56bfb820 | |
| parent | 25a5be4f2dbb2910af9938ceea320e37b839c062 (diff) | |
handle newlines in abc sheet music; fix #65
| -rw-r--r-- | exampleSite/content/slides/adirondack/index.md | 5 | ||||
| -rw-r--r-- | static/js/story.js | 14 |
2 files changed, 14 insertions, 5 deletions
diff --git a/exampleSite/content/slides/adirondack/index.md b/exampleSite/content/slides/adirondack/index.md index 157359b..4385fb1 100644 --- a/exampleSite/content/slides/adirondack/index.md +++ b/exampleSite/content/slides/adirondack/index.md @@ -378,9 +378,10 @@ You can also display equations inline, such as the quadratic equation, which is \\(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\\) --- +class: compact # Music Notation and Sheet Music -Story supports [formatting sheet music from ABC](/music), but we haven't gotten it working on slides yet. Can you help? +Story supports [formatting sheet music from ABC](/music). ```abc X: 1 @@ -390,8 +391,6 @@ L: 1/8 K: Emin |:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD| EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:| -|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg| -eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:| ``` --- diff --git a/static/js/story.js b/static/js/story.js index 00fd12d..5f5432b 100644 --- a/static/js/story.js +++ b/static/js/story.js @@ -9,14 +9,24 @@ $( function() { // Render abcjs sheet music, but only if the <body> has the class // feature-music. Do this by removing the <pre><code class="language-abc"> // and replacing it with a <p id="music-X"> which will be used to hold the -// generated sheet music. +// generated sheet music. Remark's code syntax highlighting transforms the +// <code> block into a bunch of +// <div class="remark-code-line">K: Emin</div> +// one per line, so we have to reassemble those to get back linebreaks. $( function() { if ( $( "body.feature-music:not(.feature-nomusic)" ).length ) { $( "code.language-abc, code.abc" ).each(function(i, e){ var $this = $(this); var abc = $this.text(); + if ( $this.hasClass("remark-code") ) { + abc = ""; + $this.children().each(function(i, e) { + abc += "\n" + $(this).text(); + }); + abc = abc.trim(); + } var p = $this.parent().before('<p id="music-' + (i+1) + '">'); - $this.parent().remove(); + $this.parent().hide(); ABCJS.renderAbc("music-" + (i+1), abc, { paddingtop: 0, paddingbottom: 0, |