Adding template for showing examples rendered with Verovio

Author: lpugin

_guidelines-v4/02-shared/02-sharedmusicalelements/05-sharedexpressionmarks/02-sharedtempomarks.md

@@ -7,3 +7,7 @@ version: "v4"
 Tempo marks are indications through words, abbreviations, or specific metronome settings of the speed at which a piece of music is to be performed. Both instantaneous and continuous tempo markings may be encoded using this element.
 
 {% include desc elem="tempo" %}
+
+{% include verovio example="tempo-01.mei" %}
+
+{% include verovio example="tempo-01.mei" encoding=false %}

_includes/head.html

@@ -15,4 +15,14 @@
     <link rel="stylesheet" href="{{ site.baseurl }}/js/tipuesearch/tipuesearch.css">
     <script src="{{ site.baseurl }}/js/tipuesearch/tipuesearch_set.js"></script>
     <script src="{{ site.baseurl }}/js/tipuesearch/tipuesearch.min.js"></script>
+    
+    <!-- verovio -->
+    <script src="https://www.verovio.org/javascript/latest/verovio-toolkit.js" type="text/javascript" charset="utf-8"></script>
+    
+    <!-- script for handling verovio examples -->
+    <script src="{{ site.baseurl }}/js/verovio-examples.js" type="text/javascript" charset="utf-8"></script>
+    
+    <!-- xml highlighting -->
+    <link rel="stylesheet" href="{{ site.baseurl }}/js/highlight/styles/default.css">
+    <script src="{{ site.baseurl }}/js/highlight/highlight.pack.js"></script>
 </head>

_includes/verovio

@@ -1,6 +1,14 @@
-<div class="sampleCode" data-lang="{{include.valid}}">
-{% assign file = page.version | append:'/examples/' | append:include.example | downcase %}
-{% highlight xml %}
-{% include {{ file }} %}
-{% endhighlight %}
-</div>
+{% assign file =  'mei/' | append:page.version | append:'/' | append:include.example | downcase %}
+{% assign id = "now" | date: "%N" | prepend:'id_'  %}
+{% assign vrvId =  id | append:'_vrv' %}
+<pre><code class="xml" id="{{ id }}"></code></pre>
+<div id="{{ vrvId }}"></div>
+<script type="text/javascript">
+    $.get( "{{ site.baseurl }}/{{ file }}" , function( data ) {
+        {% if include.encoding != false %}
+        document.getElementById('{{ id }}').innerHTML = escapeXml(prettifyXml(getFilePart(data, 'center')));
+        hljs.highlightBlock(document.getElementById('{{ id }}'));
+        {% endif %}
+        renderVerovio(data, '{{ vrvId }}');
+    });
+</script>