All codes shown in 1 line

[tanerijun]

All the codes highlighted by highlighter is shown on 1 line as shown in the screenshot.

I created a minimal replication on StackBlitz.

And thanks for the work on highlighter.

[johnhooks]

Holy shit! I think you are the first person to use something I built out in the wild! Awesome!

So every line is just a span which is default display: inline, the highlighter doesn't make any assumptions about the styling. It just tokenizes the code block. I could possibly change the element containing a line to a div which is default display: block. I did it this way because it's how the Shiki highlighter does it by default.

So, to fix the issue either you could do something like:

code > span {
  display: block;
}

or what I do is this

pre > code {
  display: flex;
  flex-direction: column;
}

If you want to check out how I style the code blocks on my personal website, look though this file.

https://github.com/johnhooks/johnhooks.github.io/blob/6e6f5cf67e822dd053cc51a664c2d9c1047c28b1/apps/website/src/app.css#L1-L87

Visual example: https://johnhooks.io/projects/highlighter

[johnhooks]

Also FYI, the highlighter doesn't use the theme background color, I'll try to fix that soon. But for now it's pretty easy to manually set it in css.

[johnhooks]

Another option, which is probably the right thing to do, I could put new lines back in on every line. They get stripped out during the tokenization of the code block. What solution do you like best?

[johnhooks]

@tanerijun I think @bitmachina/highlighter@1.0.0-alpha.7 should fix the issue, it adds newlines back in after tokenization.

[tanerijun]

Holy shit! I think you are the first person to use something I built out in the wild! Awesome!

So every line is just a span which is default display: inline, the highlighter doesn't make any assumptions about the styling. It just tokenizes the code block. I could possibly change the element containing a line to a div which is default display: block. I did it this way because it's how the Shiki highlighter does it by default.

So, to fix the issue either you could do something like:

code > span {
  display: block;
}

or what I do is this

pre > code {
  display: flex;
  flex-direction: column;
}

If you want to check out how I style the code blocks on my personal website, look though this file.

https://github.com/johnhooks/johnhooks.github.io/blob/6e6f5cf67e822dd053cc51a664c2d9c1047c28b1/apps/website/src/app.css#L1-L87

Visual example: https://johnhooks.io/projects/highlighter

Thanks for the quick response and fix.

Since the highlighter acts differently from mdsvex's default, I just assumed that it's broken without thinking much about it. I think you should consider adding this to the docs.

[johnhooks]

I've determined it was a bug, it shouldn't strip out the new lines. Just took another person's perspective for that to become obvious. Thanks.