Generated html is all on a single line which makes it hard to embed code blocks in pages #12
Description
It's common to embed code snippets in web pages using html like:
<pre><code><span>first line</span>
<span>second line</span>
<span>third line</span></code></pre>I've tried to do this in a page generated with mlx:
let page () =
<html>
<body>
<pre><code><span>"first line"</span>
<span>"second line"</span>
<span>"third line"</span></code></pre>
</body>
</html>
let () =
Dream.run
@@ Dream.logger
@@ Dream.router [
Dream.get "/" (fun _ ->
let html = JSX.render <page /> in
Dream.html html)
]But this generates a page where all three lines of code are concatenated on a single line:
first linesecond linethird line
Looking at the generated html, the reason is clear:
<!DOCTYPE html><html><body><pre><code><span>first line</span><span>second line</span><span>third line</span></code></pre></body></html>The html is all on a single line. My intention of using <pre> tags was for the line breaks in the code to be respected by the browser, and because MLX looks like html, I expected it to work the same way with regard to <pre> tags.
It's tempting to use css to treat each line of code as a block element but note that this will not work, as copy/pasted code will not include line breaks and all appear on a single line (which is kind of ironic!). My current workaround is to explicitly add a <br/> tag to the end of each line of code, but I would rather not have to do this.
Is it possible to generate html that respects the original layout of the mlx template in terms of whitespace (at least inside <pre> tags)? If not, what would be the recommended way of embedding code blocks in pages generated by mlx?