Code Highlighting

Code blocks render as plain text by default. Adding syntax highlighting makes them dramatically more readable. We'll wire up highlight.js on the server so the browser receives pre-highlighted HTML — no client-side JavaScript needed.

Set up the static directory

LiteNode serves files from a static/ directory at the project root. Create these folders:

static/
├── css/
├── js/
└── images/

Reconfigure marked

Right now you import marked directly. Replace that with a configured instance that runs highlight.js on every code block.

Create functions/markedParseAndHighlight.js:

import { Marked } from "marked"
import hljs from "highlight.js/lib/core"
import { markedHighlight } from "marked-highlight"

// Register only the languages you need
const languages = ["javascript", "bash", "json", "css", "html", "markdown", "plaintext"]

const registerLanguages = async () => {
    for (const lang of languages) {
        try {
            const module = await import(`highlight.js/lib/languages/${lang}`)
            hljs.registerLanguage(lang, module.default)
        } catch (error) {
            console.error(`Failed to register language: ${lang}`, error)
        }
    }
}

registerLanguages()

export const markedParseAndHighlight = new Marked(
    markedHighlight({
        langPrefix: "hljs language-",
        highlight(code, lang) {
            const language = hljs.getLanguage(lang) ? lang : "plaintext"
            return hljs.highlight(code, { language }).value
        },
    }),
)
Importing only the languages you need keeps the bundle small. The full list of supported languages is in the highlight.js repo.

Update index.js to use the new module:

import { LiteNode } from "litenode"
import { markedParseAndHighlight as marked } from "./functions/markedParseAndHighlight.js"

const app = new LiteNode()
// ... rest of your routes

Add the highlight stylesheet

highlight.js produces the HTML structure for highlighted code; a stylesheet provides the colors. Browse available themes at the highlight.js demo page, then choose one of these options:

Option A — CDN link (add to your <head>):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/a11y-dark.min.css" />

Option B — Local file (recommended for production):

  1. Open the highlight.js styles on jsDelivr
  2. Click your chosen theme
  3. Copy the CSS and paste it into static/css/a11y-dark.min.css
  4. Load it in your <head>:
<link rel="stylesheet" href="/static/css/a11y-dark.min.css" />

Restart the server and check any page with code blocks. The syntax should now be highlighted with your chosen theme colors.