file-viewer/apps/viewer-demo/public/example/markdown.md

Flyfish File Viewer Markdown Demo

This sample is intentionally longer than a placeholder README. It checks whether the Markdown renderer keeps a clean reading surface in both light and dark system themes while still preserving tables, block quotes, task lists, links, and code fences.

Release Checklist

• Route .md and .markdown files to the Markdown renderer.
• Keep Markdown styling isolated from the demo shell theme.
• Render code fences with readable contrast.
• Export the rendered document as HTML without executing user scripts.
• Add your own business samples before production rollout.

A preview component should feel quiet and dependable. The surrounding app can adapt to the user's theme, but document content must remain legible and predictable.

Supported Reading Surfaces

Format family	Example file	Rendering strategy	Print button
Markdown	markdown.md	Marked + GitHub Markdown CSS	Available
Source code	code.ts	highlight.js, language loaded on demand	Available
Word	word.docx	Dedicated page export adapter	Available
PDF	pdf.pdf	Dedicated page export adapter	Available
Typst	report.typ	WASM compile + paged SVG export adapter	Available
Excel	excel.xlsx	Virtual table for large sheets	Hidden by design

Integration Notes

When a file URL does not expose an extension, wrap the downloaded Blob as a File with a real name before passing it to the viewer:

async function openAuthenticatedFile(url: string) {
  const response = await fetch(url, { credentials: 'include' })
  const blob = await response.blob()
  return new File([blob], 'contract.pdf', { type: blob.type })
}

The operation hooks can be used to guard sensitive actions such as printing or downloading:

const options = {
  toolbar: { download: true, print: true, exportHtml: true },
  beforeOperation(context) {
    if (context.operation === 'print') {
      return window.confirm(`Print ${context.filename}?`)
    }
    return true
  }
}

Operational Guidance

1. Use URL preview for public or CORS-enabled files.
2. Use File preview when your application handles authentication itself.
3. Keep the viewer container height explicit, especially inside admin panels.
4. Let the built-in capability state decide whether print/export buttons are shown for the current file.

Dark Theme Smoke Area

The text in this section should remain readable when the browser is in dark mode. Inline code such as operation-availability-change should not fade into the paper, and table borders should stay visible without looking heavy.

{
  "viewer": "flyfish",
  "theme": "isolated document surface",
  "formats": ["pdf", "docx", "xlsx", "ofd", "typst", "geojson", "midi", "sqlite", "markdown", "code"],
  "buttons": {
    "download": true,
    "print": "dynamic",
    "exportHtml": true
  }
}