How to make it work with multiline text?

[LanfordCai]

This is my code for test:

import {toHtml} from 'hast-util-to-html'
import {createStarryNight, common} from '@wooorm/starry-night'
import {readFileSync, writeFileSync} from "fs"

const starryNight = await createStarryNight(common)

const tree = starryNight.highlight(readFileSync("index.js").toString(), 'source.js')

const html = toHtml(tree)

const out = `
<title>StarryNight Playground</title>
<link rel="stylesheet" href="https://esm.sh/@wooorm/starry-night@1/style/both.css">
${html}`

writeFileSync('index.html', out.trim())

console.log('done highlighting index.js')

And the output index.html looks like this:

All the newlines and tabs are disappeared, so what should I do to make it work?

Thank you!

[wooorm]

What you are seeing is related to how HTML works on the web. Line endings in HTML code are not visible as line endings. Use CSS. Or put it in a <pre>.