Skip to content

Instantly share code, notes, and snippets.

@dpeek

dpeek/markdown.ts

Last active February 2, 2026 01:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dpeek/a843be7a36a6d25710013d14d7531360 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dpeek/a843be7a36a6d25710013d14d7531360 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
markdown.ts
export function wrapHtml(body: string, title = 'opensurf'): string {
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>${title}</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"
/>
<style>
body {
margin: 0;
background: #0d1117;
color: #c9d1d9;
}
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 48px;
}
@media (max-width: 767px) {
.markdown-body {
padding: 24px;
}
}
</style>
</head>
<body>
<article class="markdown-body">
${body}
</article>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>`;
}
export async function renderReadme(): Promise<string> {
const readmePath = new URL('../README.md', import.meta.url);
const markdown = await Bun.file(readmePath).text();
const body = Bun.markdown.html(markdown);
return wrapHtml(body);
}
Raw
usage.ts
import { renderReadme } from './markdown' with { type: 'macro' };
const readmeHtml = await renderReadme();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment