Le jeudi 9 décembre 2021 à 03:52:34 UTC+1, spotte...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org a écrit :

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?

IMHO, you only need one call to pandoc: if you're ok with Python and with the pandoc python library (https://pypi.org/project/pandoc/), you could use the following showcase.py script :

# file: showcase.py

import sys
import pandoc
from pandoc.types import Pandoc, Meta, CodeBlock, RawBlock

if __name__ == "__main__":
    filename = sys.argv[1]
    with open(filename) as html_file:
        html = html_file.read()
        html_block = RawBlock("html", html)
        attr = ("", ["html"], [])
        code_block = CodeBlock(attr, html)
        doc = Pandoc(Meta({}), [html_block, code_block])
        with open("out.html", "bw") as output:
            pandoc.write(doc, file=output, format="html", options=["--standalone"])

Then, if you call

$ python -m showcase.py form.html

where form.html is the HTML file

you will end up with the desired output in the file "out.html".

Cheers,

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>

...