Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Generated html is all on a single line which makes it hard to embed code blocks in pages #12

Open
gridbugs opened this issue Nov 15, 2024 · 5 comments
Open

Generated html is all on a single line which makes it hard to embed code blocks in pages #12

gridbugs opened this issue Nov 15, 2024 · 5 comments

Comments

@gridbugs
Copy link

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?
@gridbugs gridbugs mentioned this issue Nov 15, 2024
Merged
@andreypopp
Copy link
Member

I assume JSX comes from https://github.com/davesnx/html_of_jsx cc @davesnx

@andreypopp
Copy link
Member

I actually think this is works as expected and also matches how React's JSX work.

Need to include newline explicitly either via <br/> or just include \n in the string content.

@andreypopp
Copy link
Member

or use block element, e.g. <div /> instead of span

@davesnx
Copy link
Member

davesnx commented Nov 15, 2024 •
edited
Loading

It's related on how JSX.render work indeed. It looks like you don't want to render and send it as an HTML, but rather "inline" HTML, but not run it.

A few options:

  • Use JSX.render "<pre>...</pre>" and use that element into the tree with JSX.raw
  • Make each line (inside pre) into JSX.render and use JSX.list with JSX.raw to respect the line breaks
  • Maybe I could add JSX.pp, where it will format the HTML with the right indentation (not super sure about this thought)

In the html_of_jsx side of things, there's no information about the indentation, since it's just a DSL for HTML, and also don't expect mlx to respect it neither.

@gridbugs
Copy link
Author

or use block element, e.g. <div /> instead of span

Note that this will not work as expected. It may render correctly but if you copy/paste the code there will be no newlines in the pasted code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@andreypopp @gridbugs @davesnx