diff --git a/src/lib/components/MarkdownRenderer.svelte b/src/lib/components/MarkdownRenderer.svelte
index 35472e1..8c4f14c 100644
--- a/src/lib/components/MarkdownRenderer.svelte
+++ b/src/lib/components/MarkdownRenderer.svelte
@@ -1,9 +1,91 @@
+
{@html htmlContent}
diff --git a/src/lib/markdown/rendering.test.ts b/src/lib/markdown/rendering.test.ts
new file mode 100644
index 0000000..b147fb2
--- /dev/null
+++ b/src/lib/markdown/rendering.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import {
+ createHeadingId,
+ createUniqueHeadingId,
+ replaceGithubAdmonitions,
+ sanitizeMarkdownHtml
+} from './rendering';
+
+describe('replaceGithubAdmonitions', () => {
+ it('passes the type, title and quote body to the renderer', () => {
+ const rendered = replaceGithubAdmonitions(
+ 'Before\n\n> [!NOTE] Optional title\n> first line\n> second line\n\nAfter',
+ (type, title, content) => ``
+ );
+
+ expect(rendered).toContain(
+ ''
+ );
+ expect(rendered).toContain('Before');
+ expect(rendered).toContain('After');
+ });
+});
+
+describe('heading IDs', () => {
+ it('keeps Unicode letters and provides a deterministic fallback', () => {
+ expect(createHeadingId('中文 标题')).toBe('中文-标题');
+ expect(createHeadingId('🎉')).toBe('section');
+ });
+
+ it('makes duplicate heading IDs unique', () => {
+ const seen = new Map();
+ expect(createUniqueHeadingId('重复', seen)).toBe('重复');
+ expect(createUniqueHeadingId('重复', seen)).toBe('重复-2');
+ });
+});
+
+describe('sanitizeMarkdownHtml', () => {
+ it('removes active content and encoded script URLs during SSR', () => {
+ const sanitized = sanitizeMarkdownHtml(
+ 'bad
' +
+ '
' +
+ ''
+ );
+
+ expect(sanitized).not.toContain('javascript:');
+ expect(sanitized).not.toContain('onerror');
+ expect(sanitized).not.toContain(' {
+ const sanitized = sanitizeMarkdownHtml(
+ 'safe'
+ );
+ expect(sanitized).toContain('rel="noopener noreferrer"');
+ });
+});
diff --git a/src/lib/markdown/rendering.ts b/src/lib/markdown/rendering.ts
new file mode 100644
index 0000000..b08bd64
--- /dev/null
+++ b/src/lib/markdown/rendering.ts
@@ -0,0 +1,103 @@
+import sanitizeHtml from 'sanitize-html';
+
+type AdmonitionRenderer = (type: string, title: string, content: string) => string;
+
+export function replaceGithubAdmonitions(markdown: string, render: AdmonitionRenderer): string {
+ const pattern =
+ /(?:^|\r?\n)> ?\[!(NOTE|ABSTRACT|INFO|TIP|SUCCESS|QUESTION|WARNING|FAILURE|DANGER|BUG|EXAMPLE|QUOTE|IMPORTANT|CAUTION)\][ \t]*(.*?)\r?\n((?:>.*(?:\r?\n|$))*)/gi;
+
+ return markdown.replace(pattern, (_match, type: string, title: string, content: string) =>
+ render(type, title, content.replace(/^> ?/gm, '').trimEnd())
+ );
+}
+
+export function createHeadingId(rawText: string): string {
+ const slug = rawText
+ .replace(/<[^>]*>?/g, '')
+ .normalize('NFKC')
+ .trim()
+ .toLocaleLowerCase()
+ .replace(/\s+/g, '-')
+ .replace(/[^\p{L}\p{N}_-]+/gu, '')
+ .replace(/-+/g, '-')
+ .replace(/^-|-$/g, '');
+
+ return slug || 'section';
+}
+
+export function createUniqueHeadingId(rawText: string, seen: Map): string {
+ const base = createHeadingId(rawText);
+ const count = seen.get(base) ?? 0;
+ seen.set(base, count + 1);
+ return count === 0 ? base : `${base}-${count + 1}`;
+}
+
+export function sanitizeMarkdownHtml(html: string): string {
+ return sanitizeHtml(html, {
+ allowedTags: [
+ 'p',
+ 'br',
+ 'strong',
+ 'em',
+ 'del',
+ 'blockquote',
+ 'ul',
+ 'ol',
+ 'li',
+ 'hr',
+ 'a',
+ 'img',
+ 'h1',
+ 'h2',
+ 'h3',
+ 'h4',
+ 'h5',
+ 'h6',
+ 'table',
+ 'thead',
+ 'tbody',
+ 'tr',
+ 'th',
+ 'td',
+ 'figure',
+ 'figcaption',
+ 'time',
+ 'svg',
+ 'path',
+ 'button',
+ 'span',
+ 'pre',
+ 'code',
+ 'div'
+ ],
+ allowedAttributes: {
+ '*': ['class', 'id', 'title', 'role', 'aria-hidden'],
+ a: ['href', 'target', 'rel', 'data-fancybox', 'data-caption'],
+ img: ['src', 'alt', 'title', 'loading', 'width', 'height'],
+ button: ['type', 'title', 'data-code', 'aria-hidden'],
+ svg: ['viewBox', 'viewbox', 'fill', 'width', 'height', 'xmlns', 'focusable'],
+ path: ['d', 'fill'],
+ time: ['datetime']
+ },
+ allowedSchemes: ['http', 'https', 'mailto', 'tel'],
+ allowedSchemesByTag: {
+ img: ['http', 'https']
+ },
+ allowProtocolRelative: false,
+ enforceHtmlBoundary: true,
+ parser: {
+ lowerCaseAttributeNames: false
+ },
+ transformTags: {
+ a: (tagName, attribs) => {
+ if (attribs.target === '_blank') {
+ const rel = new Set((attribs.rel || '').split(/\s+/).filter(Boolean));
+ rel.add('noopener');
+ rel.add('noreferrer');
+ return { tagName, attribs: { ...attribs, rel: [...rel].join(' ') } };
+ }
+ return { tagName, attribs };
+ }
+ }
+ });
+}