I'm work on creating a set of examples of HTML, JavaScript, and SVG code.
Each comes from a single source file, from which I want to produce a
web page showing
(a) the result of rendering the HTML or SVG or executing the JavaScript;
(b) the code itself, viewed as if in a text editor, and (ideally) with
syntax highlighting.
The best way I can think of doing this involves making two
transformations of the source file, running pandoc on each of them,
and the combining the outputs, probably by running pandoc a third time
with a custom template.
I'm wondering if there's any better way?
Here's a small example:
(1) Original source file:
<form>
<input id="b1" type="button" value="Apply" title="Button"/>
</form>
(2) Intermediate file 1:
```{=html5}
<form>
<input id="b1" type="button" value="Apply" title="Button"/>
</form>
```
(3) Intermediate file 2:
~~~~{.html}
<form>
<input id="b1" type="button" value="Apply" title="Button"/>
</form>
~~~~
(4) Desired final output would be something like this:
...
<h2>A Form with a Button</h2>
<form>
<input id="b1" type="button" value="Apply" title="Button"/>
</form>
<h2>Code to Produce a Form with a Button</h2>
<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb1-1" title="1"><span class="kw"><form></span></a>
<a class="sourceLine" id="cb1-2" title="2"><span class="kw"><input</span><span class="ot"> id=</span><span class="st">"b1"</span><span class="ot"> type=</span><span class="st">"button"</span><span class="ot"> value=</span><span class="st">"Apply"</span><span class="ot"> title=</span><span class="st">"Button"</span><span class="kw">/></span></a>
<a class="sourceLine" id="cb1-3" title="3"><span class="kw"></form></span></a></code></pre></div>
...