D
DreamLake

Preview

Markdown Preview

Render markdown as HTML with GitHub-flavored extensions. Powered by react-markdown + remark-gfm.

Extensions: md, mdx

Note: .mdx is rendered as plain markdown. JSX expressions are not evaluated — there is no MDX runtime. If you need MDX, the doc site itself is built on vike-react + @mdx-js/rollup; <FilePreview> is for foreign content.

Loading strategy

import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
 
<ReactMarkdown remarkPlugins={[remarkGfm]}>{markdownText}</ReactMarkdown>

fetch the file (with optional Range), pipe the text into react-markdown. Output is rendered React elements — no dangerouslySetInnerHTML on the markdown body.

GFM features

remark-gfm adds:

  • Tables with alignment

    | Col A | Col B |
|:------|------:|
| left  | right |

  • Task lists

    - [x] done
- [ ] todo

  • Strikethrough with ~~tilde syntax~~

  • Autolinks for bare URLs

  • Footnotes with [^1] references

Raw HTML is disabled

react-markdown is configured without rehype-raw. Inline <script>, <iframe>, <style>, etc. in the source markdown are rendered as escaped text, not parsed as DOM. This means untrusted markdown cannot inject script.

The trade-off: legitimate inline HTML (e.g. <details>, <sub>) also renders as text. If you control your markdown sources and need raw HTML, render markdown yourself; the goal of <FilePreview> is safe defaults for arbitrary URLs.

Soft size limit

Default: 5 MB. Range request fetches the prefix; truncation banner shows the original size.

<FilePreview url={url} limits={{ markdownMaxBytes: 20 * 1024 * 1024 }} />

A half-finished trailing block (e.g. an open code fence) is rendered as the tokenizer sees it — react-markdown is tolerant of partial input.

Live demo

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

export function MyComponent() {
  return (
    <FilePreview url="/vuer-m3u-demo/preview/markdown/README.md" />
  )
}

Cross-links