phase2: markdown converter with goldmark, chroma, and ASCII-translit anchors

internal/converter/anchor.go

@@ -0,0 +1,123 @@
+package converter
+
+import (
+	"strings"
+
+	"github.com/yuin/goldmark"
+	emojiast "github.com/yuin/goldmark-emoji/ast"
+	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/parser"
+	"github.com/yuin/goldmark/text"
+	"github.com/yuin/goldmark/util"
+)
+
+type anchorExtension struct{}
+
+func (e *anchorExtension) Extend(m goldmark.Markdown) {
+	m.Parser().AddOptions(parser.WithASTTransformers(
+		util.Prioritized(&anchorTransformer{}, 900),
+	))
+}
+
+type anchorTransformer struct{}
+
+func (t *anchorTransformer) Transform(doc *ast.Document, reader text.Reader, pc parser.Context) {
+	src := reader.Source()
+	used := map[string]int{}
+
+	_ = pc
+
+	_ = ast.Walk(doc, func(n ast.Node, entering bool) (ast.WalkStatus, error) {
+		if !entering {
+			return ast.WalkContinue, nil
+		}
+
+		h, ok := n.(*ast.Heading)
+		if !ok {
+			return ast.WalkContinue, nil
+		}
+
+		slug := translitSlug(extractHeadingText(h, src), used)
+		h.SetAttributeString("id", []byte(slug))
+
+		link := ast.NewLink()
+		link.Destination = []byte("#" + slug)
+		link.SetAttributeString("class", []byte("heading-anchor"))
+		link.SetAttributeString("aria-hidden", []byte("true"))
+		link.AppendChild(link, ast.NewString([]byte("#")))
+
+		if first := h.FirstChild(); first != nil {
+			h.InsertBefore(h, first, link)
+		} else {
+			h.AppendChild(h, link)
+		}
+
+		return ast.WalkSkipChildren, nil
+	})
+}
+
+func extractHeadingText(h *ast.Heading, src []byte) string {
+	var b strings.Builder
+
+	_ = ast.Walk(h, func(n ast.Node, entering bool) (ast.WalkStatus, error) {
+		if !entering {
+			return ast.WalkContinue, nil
+		}
+
+		switch v := n.(type) {
+		case *ast.Link:
+			if isHeadingAnchor(v) {
+				return ast.WalkSkipChildren, nil
+			}
+		case *ast.Text:
+			b.Write(v.Segment.Value(src))
+			if v.HardLineBreak() || v.SoftLineBreak() {
+				b.WriteByte(' ')
+			}
+		case *ast.String:
+			b.Write(v.Value)
+		case *ast.CodeSpan:
+			for child := v.FirstChild(); child != nil; child = child.NextSibling() {
+				switch c := child.(type) {
+				case *ast.Text:
+					b.Write(c.Segment.Value(src))
+				case *ast.String:
+					b.Write(c.Value)
+				}
+			}
+			return ast.WalkSkipChildren, nil
+		case *ast.AutoLink:
+			b.Write(v.Label(src))
+			return ast.WalkSkipChildren, nil
+		case *emojiast.Emoji:
+			if v.Value != nil && len(v.Value.Unicode) > 0 {
+				b.WriteString(string(v.Value.Unicode))
+			} else if len(v.ShortName) > 0 {
+				b.WriteByte(':')
+				b.Write(v.ShortName)
+				b.WriteByte(':')
+			}
+			return ast.WalkSkipChildren, nil
+		}
+
+		return ast.WalkContinue, nil
+	})
+
+	return strings.TrimSpace(b.String())
+}
+
+func isHeadingAnchor(link *ast.Link) bool {
+	attr, ok := link.AttributeString("class")
+	if !ok {
+		return false
+	}
+
+	switch value := attr.(type) {
+	case []byte:
+		return string(value) == "heading-anchor"
+	case string:
+		return value == "heading-anchor"
+	default:
+		return false
+	}
+}

internal/converter/converter.go

@@ -0,0 +1,170 @@
+package converter
+
+import (
+	"bytes"
+	"fmt"
+	"html/template"
+	"io/fs"
+	"strings"
+	"sync"
+
+	chromahtml "github.com/alecthomas/chroma/v2/formatters/html"
+	"github.com/yuin/goldmark"
+	emoji "github.com/yuin/goldmark-emoji"
+	highlighting "github.com/yuin/goldmark-highlighting/v2"
+	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/extension"
+	"github.com/yuin/goldmark/renderer"
+	"github.com/yuin/goldmark/text"
+	"github.com/yuin/goldmark/util"
+)
+
+const documentLang = "ru"
+
+type Result struct {
+	HTML  []byte
+	Title string
+}
+
+type Converter struct {
+	md         goldmark.Markdown
+	tmpl       *template.Template
+	bufferPool sync.Pool
+}
+
+type templateData struct {
+	Lang      string
+	Title     string
+	Body      template.HTML
+	ShowTitle bool
+}
+
+func New(templateFS fs.FS) (*Converter, error) {
+	tmpl, err := template.ParseFS(templateFS, "document.html")
+	if err != nil {
+		return nil, err
+	}
+
+	return &Converter{
+		md: goldmark.New(
+			goldmark.WithExtensions(
+				extension.GFM,
+				extension.Footnote,
+				emoji.Emoji,
+				highlighting.NewHighlighting(
+					highlighting.WithStyle("github"),
+					highlighting.WithFormatOptions(chromahtml.WithClasses(false)),
+				),
+				&anchorExtension{},
+			),
+			goldmark.WithRendererOptions(
+				renderer.WithNodeRenderers(
+					util.Prioritized(&escapedRawHTMLRenderer{}, 999),
+				),
+			),
+		),
+		tmpl: tmpl,
+		bufferPool: sync.Pool{
+			New: func() any {
+				return new(bytes.Buffer)
+			},
+		},
+	}, nil
+}
+
+func (c *Converter) Convert(md []byte, fallbackTitle string) (Result, error) {
+	body, title, hasH1, err := c.render(md)
+	if err != nil {
+		return Result{}, err
+	}
+
+	if title == "" {
+		title = fallbackTitle
+	}
+
+	buf := c.getBuffer()
+	defer c.putBuffer(buf)
+
+	data := templateData{
+		Lang:      documentLang,
+		Title:     title,
+		Body:      template.HTML(body),
+		ShowTitle: !hasH1 && title != "",
+	}
+
+	if err := c.tmpl.Execute(buf, data); err != nil {
+		return Result{}, err
+	}
+
+	return Result{
+		HTML:  append([]byte(nil), buf.Bytes()...),
+		Title: title,
+	}, nil
+}
+
+func (c *Converter) RenderBody(md []byte) ([]byte, string, error) {
+	body, title, _, err := c.render(md)
+	if err != nil {
+		return nil, "", err
+	}
+	return body, title, nil
+}
+
+func (c *Converter) render(md []byte) ([]byte, string, bool, error) {
+	root := c.md.Parser().Parse(text.NewReader(md))
+	doc, ok := root.(*ast.Document)
+	if !ok {
+		return nil, "", false, fmt.Errorf("expected *ast.Document, got %T", root)
+	}
+	title, hasH1 := extractDocumentTitle(doc, md)
+
+	buf := c.getBuffer()
+	defer c.putBuffer(buf)
+
+	if err := c.md.Renderer().Render(buf, md, doc); err != nil {
+		return nil, "", false, err
+	}
+
+	return append([]byte(nil), buf.Bytes()...), title, hasH1, nil
+}
+
+func extractDocumentTitle(doc *ast.Document, src []byte) (string, bool) {
+	var (
+		title string
+		hasH1 bool
+	)
+
+	_ = ast.Walk(doc, func(n ast.Node, entering bool) (ast.WalkStatus, error) {
+		if !entering {
+			return ast.WalkContinue, nil
+		}
+
+		h, ok := n.(*ast.Heading)
+		if !ok {
+			return ast.WalkContinue, nil
+		}
+
+		if h.Level == 1 {
+			hasH1 = true
+		}
+
+		if title == "" {
+			title = strings.TrimSpace(extractHeadingText(h, src))
+		}
+
+		return ast.WalkContinue, nil
+	})
+
+	return title, hasH1
+}
+
+func (c *Converter) getBuffer() *bytes.Buffer {
+	buf := c.bufferPool.Get().(*bytes.Buffer)
+	buf.Reset()
+	return buf
+}
+
+func (c *Converter) putBuffer(buf *bytes.Buffer) {
+	buf.Reset()
+	c.bufferPool.Put(buf)
+}

internal/converter/converter_test.go

@@ -0,0 +1,162 @@
+package converter
+
+import (
+	"bytes"
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+
+	"github.com/fserg/md-to-html/web/template"
+	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/text"
+)
+
+func TestGolden(t *testing.T) {
+	c := newTestConverter(t)
+	update := os.Getenv("UPDATE_GOLDEN") == "1"
+
+	entries, err := os.ReadDir("testdata")
+	if err != nil {
+		t.Fatal(err)
+	}
+
+	for _, entry := range entries {
+		name := entry.Name()
+		if entry.IsDir() || !strings.HasSuffix(name, ".md") {
+			continue
+		}
+
+		t.Run(name, func(t *testing.T) {
+			md, err := os.ReadFile(filepath.Join("testdata", name))
+			if err != nil {
+				t.Fatal(err)
+			}
+
+			wantPath := filepath.Join("testdata", strings.TrimSuffix(name, ".md")+".html")
+			got, err := c.Convert(md, "Document")
+			if err != nil {
+				t.Fatal(err)
+			}
+
+			for _, forbidden := range []string{"http://", "https://", "cdn.", "googleapis.com"} {
+				if bytes.Contains(got.HTML, []byte(forbidden)) {
+					t.Fatalf("generated HTML contains forbidden external resource marker %q", forbidden)
+				}
+			}
+
+			if update {
+				if err := os.WriteFile(wantPath, got.HTML, 0o644); err != nil {
+					t.Fatal(err)
+				}
+				return
+			}
+
+			want, err := os.ReadFile(wantPath)
+			if err != nil {
+				t.Fatalf("missing golden %s; run UPDATE_GOLDEN=1", wantPath)
+			}
+
+			if !bytes.Equal(got.HTML, want) {
+				t.Errorf("mismatch: run UPDATE_GOLDEN=1 go test ./internal/converter/... to refresh")
+			}
+		})
+	}
+}
+
+func TestTranslitSlug(t *testing.T) {
+	tests := []struct {
+		name string
+		in   string
+		want string
+		used map[string]int
+	}{
+		{name: "cyrillic", in: "Установка", want: "ustanovka", used: map[string]int{}},
+		{name: "collision first", in: "Install", want: "install", used: map[string]int{}},
+		{name: "collision second", in: "Install", want: "install-1", used: map[string]int{"install": 1}},
+		{name: "cyrillic translit", in: "Сетап", want: "setap", used: map[string]int{}},
+		{name: "empty fallback", in: "!!!", want: "section", used: map[string]int{}},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			got := translitSlug(tt.in, tt.used)
+			if got != tt.want {
+				t.Fatalf("translitSlug(%q) = %q, want %q", tt.in, got, tt.want)
+			}
+		})
+	}
+}
+
+func TestExtractHeadingText(t *testing.T) {
+	c := newTestConverter(t)
+	src := []byte("## [API](https://example.com) `go fmt` https://example.com :rocket:\n")
+	doc := c.md.Parser().Parse(text.NewReader(src))
+
+	var heading *ast.Heading
+	_ = ast.Walk(doc, func(n ast.Node, entering bool) (ast.WalkStatus, error) {
+		if !entering {
+			return ast.WalkContinue, nil
+		}
+		if h, ok := n.(*ast.Heading); ok {
+			heading = h
+			return ast.WalkStop, nil
+		}
+		return ast.WalkContinue, nil
+	})
+
+	if heading == nil {
+		t.Fatal("heading not found")
+	}
+
+	got := extractHeadingText(heading, src)
+	want := "API go fmt https://example.com 🚀"
+	if got != want {
+		t.Fatalf("extractHeadingText() = %q, want %q", got, want)
+	}
+}
+
+func TestConvertTitleFromFirstHeading(t *testing.T) {
+	c := newTestConverter(t)
+
+	result, err := c.Convert([]byte("# Hello\n\nParagraph"), "fallback")
+	if err != nil {
+		t.Fatal(err)
+	}
+
+	if result.Title != "Hello" {
+		t.Fatalf("result.Title = %q, want %q", result.Title, "Hello")
+	}
+
+	if !bytes.Contains(result.HTML, []byte("<title>Hello</title>")) {
+		t.Fatalf("expected HTML title to contain Hello")
+	}
+}
+
+func TestConvertTitleFallback(t *testing.T) {
+	c := newTestConverter(t)
+
+	result, err := c.Convert([]byte("Paragraph only"), "fallback")
+	if err != nil {
+		t.Fatal(err)
+	}
+
+	if result.Title != "fallback" {
+		t.Fatalf("result.Title = %q, want %q", result.Title, "fallback")
+	}
+
+	if !bytes.Contains(result.HTML, []byte("<h1>fallback</h1>")) {
+		t.Fatalf("expected fallback h1 to be injected")
+	}
+}
+
+func newTestConverter(t *testing.T) *Converter {
+	t.Helper()
+
+	c, err := New(webtemplate.FS)
+	if err != nil {
+		t.Fatal(err)
+	}
+
+	return c
+}

internal/converter/raw_html.go

@@ -0,0 +1,45 @@
+package converter
+
+import (
+	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/renderer"
+	"github.com/yuin/goldmark/util"
+)
+
+type escapedRawHTMLRenderer struct{}
+
+func (r *escapedRawHTMLRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
+	reg.Register(ast.KindHTMLBlock, r.renderHTMLBlock)
+	reg.Register(ast.KindRawHTML, r.renderRawHTML)
+}
+
+func (r *escapedRawHTMLRenderer) renderHTMLBlock(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	n := node.(*ast.HTMLBlock)
+	if entering {
+		for i := 0; i < n.Lines().Len(); i++ {
+			line := n.Lines().At(i)
+			_, _ = w.Write(util.EscapeHTML(line.Value(source)))
+		}
+		return ast.WalkContinue, nil
+	}
+
+	if n.HasClosure() {
+		_, _ = w.Write(util.EscapeHTML(n.ClosureLine.Value(source)))
+	}
+
+	return ast.WalkContinue, nil
+}
+
+func (r *escapedRawHTMLRenderer) renderRawHTML(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if !entering {
+		return ast.WalkSkipChildren, nil
+	}
+
+	n := node.(*ast.RawHTML)
+	for i := 0; i < n.Segments.Len(); i++ {
+		segment := n.Segments.At(i)
+		_, _ = w.Write(util.EscapeHTML(segment.Value(source)))
+	}
+
+	return ast.WalkSkipChildren, nil
+}

internal/converter/slugger.go

@@ -0,0 +1,26 @@
+package converter
+
+import (
+	"fmt"
+	"regexp"
+	"strings"
+
+	"github.com/mozillazg/go-unidecode"
+)
+
+var slugRe = regexp.MustCompile(`[^a-z0-9]+`)
+
+func translitSlug(s string, used map[string]int) string {
+	t := strings.ToLower(unidecode.Unidecode(s))
+	t = slugRe.ReplaceAllString(t, "-")
+	t = strings.Trim(t, "-")
+	if t == "" {
+		t = "section"
+	}
+	if n, ok := used[t]; ok && n > 0 {
+		used[t] = n + 1
+		return fmt.Sprintf("%s-%d", t, n)
+	}
+	used[t] = 1
+	return t
+}

internal/converter/testdata/autolinks.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>Document</h1>
+    <p>Contact <a href="mailto:dev@example.test">dev@example.test</a> for details.</p>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/autolinks.md

@@ -0,0 +1 @@
+Contact <dev@example.test> for details.

internal/converter/testdata/basic.html

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Basic Example</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    
+    <h1 id="basic-example"><a href="#basic-example" class="heading-anchor">#</a>Basic Example</h1>
+<p>Simple paragraph with <strong>bold</strong>, <em>italic</em>, and <a href="/docs">docs</a>.</p>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/basic.md

@@ -0,0 +1,3 @@
+# Basic Example
+
+Simple paragraph with **bold**, *italic*, and [docs](/docs).

internal/converter/testdata/emoji-inline.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>Document</h1>
+    <p>Ready to launch &#x1f680; today.</p>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/emoji-inline.md

@@ -0,0 +1 @@
+Ready to launch :rocket: today.

internal/converter/testdata/fenced-code-highlighted.html

@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>Document</h1>
+    <pre style="background-color:#f7f7f7;-webkit-text-size-adjust:none;"><code><span style="display:flex;"><span><span style="color:#cf222e">package</span><span style="color:#fff"> </span><span style="color:#1f2328">main</span><span style="color:#fff">
+</span></span></span><span style="display:flex;"><span><span style="color:#fff">
+</span></span></span><span style="display:flex;"><span><span style="color:#cf222e">import</span><span style="color:#fff"> </span><span style="color:#0a3069">&#34;fmt&#34;</span><span style="color:#fff">
+</span></span></span><span style="display:flex;"><span><span style="color:#fff">
+</span></span></span><span style="display:flex;"><span><span style="color:#cf222e">func</span><span style="color:#fff"> </span><span style="color:#6639ba">main</span><span style="color:#1f2328">()</span><span style="color:#fff"> </span><span style="color:#1f2328">{</span><span style="color:#fff">
+</span></span></span><span style="display:flex;"><span><span style="color:#fff">	</span><span style="color:#1f2328">fmt</span><span style="color:#1f2328">.</span><span style="color:#6639ba">Println</span><span style="color:#1f2328">(</span><span style="color:#0a3069">&#34;hello&#34;</span><span style="color:#1f2328">)</span><span style="color:#fff">
+</span></span></span><span style="display:flex;"><span><span style="color:#1f2328">}</span><span style="color:#fff">
+</span></span></span></code></pre>
+  </main>
+</body>
+</html>

internal/converter/testdata/fenced-code-highlighted.md

@@ -0,0 +1,9 @@
+```go
+package main
+
+import "fmt"
+
+func main() {
+	fmt.Println("hello")
+}
+```

internal/converter/testdata/footnote.html

@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>Document</h1>
+    <p>Footnote text.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
+<div class="footnotes" role="doc-endnotes">
+<hr>
+<ol>
+<li id="fn:1">
+<p>Extra details.&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
+</li>
+</ol>
+</div>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/footnote.md

@@ -0,0 +1,3 @@
+Footnote text.[^1]
+
+[^1]: Extra details.

internal/converter/testdata/headings-autolink.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>dev@example.test</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>dev@example.test</h1>
+    <h2 id="dev-example-test"><a href="#dev-example-test" class="heading-anchor">#</a><a href="mailto:dev@example.test">dev@example.test</a></h2>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/headings-autolink.md

@@ -0,0 +1 @@
+## <dev@example.test>

internal/converter/testdata/headings-collisions.html

@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Install</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>Install</h1>
+    <h2 id="install"><a href="#install" class="heading-anchor">#</a>Install</h2>
+<h2 id="install-1"><a href="#install-1" class="heading-anchor">#</a>Install</h2>
+<h2 id="setup"><a href="#setup" class="heading-anchor">#</a>Setup</h2>
+<h2 id="setap"><a href="#setap" class="heading-anchor">#</a>Сетап</h2>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/headings-collisions.md

@@ -0,0 +1,7 @@
+## Install
+
+## Install
+
+## Setup
+
+## Сетап

internal/converter/testdata/headings-cyrillic.html

@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Привет</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    
+    <h1 id="privet"><a href="#privet" class="heading-anchor">#</a>Привет</h1>
+<h2 id="ustanovka"><a href="#ustanovka" class="heading-anchor">#</a>Установка</h2>
+<h3 id="bystryi-start"><a href="#bystryi-start" class="heading-anchor">#</a>Быстрый старт</h3>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/headings-cyrillic.md

@@ -0,0 +1,5 @@
+# Привет
+
+## Установка
+
+### Быстрый старт

internal/converter/testdata/headings-emoji.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>🚀 Launch</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>🚀 Launch</h1>
+    <h2 id="launch"><a href="#launch" class="heading-anchor">#</a>&#x1f680; Launch</h2>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/headings-emoji.md

@@ -0,0 +1 @@
+## :rocket: Launch

internal/converter/testdata/headings-image.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>alt Title</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>alt Title</h1>
+    <h2 id="alt-title"><a href="#alt-title" class="heading-anchor">#</a><img src="image.png" alt="alt"> Title</h2>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/headings-image.md

@@ -0,0 +1 @@
+## ![alt](image.png) Title

internal/converter/testdata/headings-inline-link.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>API</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>API</h1>
+    <h2 id="api"><a href="#api" class="heading-anchor">#</a><a href="/api">API</a></h2>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/headings-inline-link.md

@@ -0,0 +1 @@
+## [API](/api)

internal/converter/testdata/headings-inlinecode.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Using go fmt</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>Using go fmt</h1>
+    <h2 id="using-go-fmt"><a href="#using-go-fmt" class="heading-anchor">#</a>Using <code>go fmt</code></h2>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/headings-inlinecode.md

@@ -0,0 +1 @@
+## Using `go fmt`

internal/converter/testdata/raw-html.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>Document</h1>
+    &lt;script&gt;alert(1)&lt;/script&gt;
+
+  </main>
+</body>
+</html>

internal/converter/testdata/raw-html.md

@@ -0,0 +1 @@
+<script>alert(1)</script>

internal/converter/testdata/strikethrough.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>Document</h1>
+    <p>Use <del>old</del> new output.</p>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/strikethrough.md

@@ -0,0 +1 @@
+Use ~~old~~ new output.

internal/converter/testdata/tables.html

@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>Document</h1>
+    <table>
+<thead>
+<tr>
+<th>Name</th>
+<th>Value</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Alpha</td>
+<td>1</td>
+</tr>
+<tr>
+<td>Beta</td>
+<td>2</td>
+</tr>
+</tbody>
+</table>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/tables.md

@@ -0,0 +1,4 @@
+| Name | Value |
+| --- | --- |
+| Alpha | 1 |
+| Beta | 2 |

internal/converter/testdata/tasklist.html

@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    <h1>Document</h1>
+    <ul>
+<li><input checked="" disabled="" type="checkbox"> Ship phase 2</li>
+<li><input disabled="" type="checkbox"> Review output</li>
+</ul>
+
+  </main>
+</body>
+</html>

internal/converter/testdata/tasklist.md

@@ -0,0 +1,2 @@
+- [x] Ship phase 2
+- [ ] Review output

web/template/document.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="{{.Lang}}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{.Title}}</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page-bg: #f8fafc;
+      --surface: #ffffff;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --text: #0f172a;
+      --muted: #475569;
+      --code-bg: #f1f5f9;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --quote-bg: #eff6ff;
+      --quote-border: #93c5fd;
+      --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.7;
+      padding: 24px 16px 40px;
+    }
+
+    .document {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--surface);
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 20px;
+      box-shadow: var(--shadow);
+      padding: 48px 56px;
+    }
+
+    .document > :first-child {
+      margin-top: 0;
+    }
+
+    .document h1,
+    .document h2,
+    .document h3,
+    .document h4,
+    .document h5,
+    .document h6 {
+      color: var(--text);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.25;
+      margin: 1.75rem 0 0.85rem;
+      position: relative;
+      scroll-margin-top: 2rem;
+    }
+
+    .document h1 {
+      border-bottom: 1px solid var(--border);
+      font-size: 2.4rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .document h2 {
+      border-bottom: 1px solid var(--border);
+      font-size: 1.85rem;
+      padding-bottom: 0.45rem;
+    }
+
+    .document h3 {
+      font-size: 1.45rem;
+    }
+
+    .document h4 {
+      font-size: 1.2rem;
+    }
+
+    .document h5,
+    .document h6 {
+      font-size: 1rem;
+    }
+
+    .document .heading-anchor {
+      color: var(--muted);
+      float: left;
+      margin-left: -1.25em;
+      opacity: 0;
+      padding-right: 0.3em;
+      text-decoration: none;
+      transition: opacity 0.18s ease;
+      user-select: none;
+    }
+
+    .document h1:hover .heading-anchor,
+    .document h2:hover .heading-anchor,
+    .document h3:hover .heading-anchor,
+    .document h4:hover .heading-anchor,
+    .document h5:hover .heading-anchor,
+    .document h6:hover .heading-anchor,
+    .document .heading-anchor:focus {
+      opacity: 0.65;
+    }
+
+    .document p,
+    .document ul,
+    .document ol,
+    .document blockquote,
+    .document table,
+    .document pre,
+    .document hr {
+      margin: 0 0 1rem;
+    }
+
+    .document ul,
+    .document ol {
+      padding-left: 1.7rem;
+    }
+
+    .document li + li {
+      margin-top: 0.3rem;
+    }
+
+    .document li > p {
+      margin-bottom: 0.5rem;
+    }
+
+    .document a {
+      color: var(--accent);
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.15em;
+    }
+
+    .document a:hover {
+      color: var(--accent-hover);
+    }
+
+    .document strong {
+      font-weight: 700;
+    }
+
+    .document em {
+      font-style: italic;
+    }
+
+    .document del {
+      color: var(--muted);
+      text-decoration-thickness: 0.08em;
+    }
+
+    .document blockquote {
+      background: var(--quote-bg);
+      border-left: 4px solid var(--quote-border);
+      border-radius: 0 12px 12px 0;
+      color: var(--muted);
+      padding: 1rem 1.2rem;
+    }
+
+    .document hr {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .document code {
+      background: var(--code-bg);
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      border-radius: 8px;
+      font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9em;
+      padding: 0.15em 0.4em;
+    }
+
+    .document pre {
+      background: #0f172a;
+      border-radius: 16px;
+      color: #e2e8f0;
+      overflow-x: auto;
+      padding: 1rem 1.1rem;
+    }
+
+    .document pre code {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      display: block;
+      font-size: 0.92rem;
+      line-height: 1.6;
+      padding: 0;
+      white-space: pre;
+    }
+
+    .document img {
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      border-radius: 14px;
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .document table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+    }
+
+    .document th,
+    .document td {
+      border: 1px solid var(--border);
+      padding: 0.65rem 0.8rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .document th {
+      background: #f8fafc;
+      font-weight: 700;
+    }
+
+    .document tr:nth-child(even) td {
+      background: rgba(248, 250, 252, 0.7);
+    }
+
+    .document .task-list-item {
+      list-style: none;
+      margin-left: -1.55rem;
+      padding-left: 1.55rem;
+    }
+
+    .document .task-list-item input[type="checkbox"] {
+      accent-color: var(--accent);
+      margin-right: 0.5rem;
+      pointer-events: none;
+      transform: translateY(1px);
+    }
+
+    .document .footnotes {
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+    }
+
+    .document .footnotes ol {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 16px 10px 28px;
+      }
+
+      .document {
+        border-radius: 16px;
+        padding: 28px 20px;
+      }
+
+      .document h1 {
+        font-size: 2rem;
+      }
+
+      .document h2 {
+        font-size: 1.55rem;
+      }
+
+      .document h3 {
+        font-size: 1.3rem;
+      }
+
+      .document .heading-anchor {
+        margin-left: -1.05em;
+      }
+
+      .document th,
+      .document td {
+        min-width: 140px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="document">
+    {{if .ShowTitle}}<h1>{{.Title}}</h1>{{end}}
+    {{.Body}}
+  </main>
+</body>
+</html>

web/template/embed.go

@@ -0,0 +1,6 @@
+package webtemplate
+
+import "embed"
+
+//go:embed document.html
+var FS embed.FS