Text / Code Preview

Plain text and source code, with syntax highlighting via highlight.js.

Extensions

Files matching a known extension render with the corresponding language; everything else falls through to plain text.

Loading strategy

fetch the file (with optional Range), then render through highlight.js:

const res = await fetcher(url, { headers: { Range: `bytes=0-${limit - 1}` } })
const text = await res.text()
const html = hljs.highlight(text, { language: resolvedLanguage }).value

Highlighted output is rendered as a single <pre><code dangerouslySetInnerHTML={{ __html: html }} />. Highlight.js escapes content before applying spans, so this is safe; no raw text from the file reaches the DOM unescaped.

Lazy language chunks

highlight.js ships per-language chunks. The previewer only imports the languages it needs, on demand:

preview-text-code.[hash].js     // core highlighter (~30 KB)
preview-lang-python.[hash].js   // loaded when previewing .py
preview-lang-typescript.[hash].js
preview-lang-rust.[hash].js
...

A consumer who only ever previews .py files never downloads the Rust grammar.

Soft size limit

Default: 5 MB. A Range: bytes=0-5242879 request fetches the prefix; the previewer surfaces a truncation banner:

Showing first 5.0 MB of 12.4 MB

Plain text and code degrade gracefully under truncation — a half-line at the cut renders without breaking the highlight (the tokenizer simply ends mid-token). Override per-instance:

<FilePreview url={url} limits={{ codeMaxBytes: 50 * 1024 * 1024 }} />

Live demo

import { FilePreview } from '@vuer-ai/vuer-m3u/preview'

export function MyComponent() {
  return (
    <FilePreview url="/vuer-m3u-demo/preview/code/sample.py" />
  )
}

Cross-links

• Markdown kind — for rendered markdown rather than highlighted source
• Size Strategy — soft limits + Range