import type { Metadata } from "next";
import { ToolLanding } from "@/components/marketing/tool-landing";
import { buildMetadata } from "@/lib/seo";

const PATH = "/tools/markdown-to-pdf";

export const metadata: Metadata = buildMetadata({
  title: "Markdown to PDF Converter — Free Online, No Watermark",
  description:
    "Convert Markdown to PDF in your browser. Free, instant, no watermark. Supports GitHub Flavored Markdown, tables, syntax-highlighted code, math, and diagrams.",
  path: PATH,
  keywords: [
    "markdown to pdf",
    "md to pdf",
    "convert markdown to pdf",
    "markdown pdf converter",
    "markdown to pdf online",
    "markdown to pdf free",
    "export markdown to pdf",
  ],
});

export default function Page() {
  return (
    <ToolLanding
      eyebrow="Markdown to PDF"
      title="Convert Markdown to PDF — free, instant, no watermark"
      description="Open your Markdown in the editor, click Export → PDF, and your browser saves a clean, print-ready PDF. Supports GFM tables, fenced code with syntax highlighting, math, and Mermaid diagrams."
      path={PATH}
      bullets={[
        "Free and unlimited — no signup, no watermark, no upload",
        "Renders GitHub Flavored Markdown, tables, task lists, and code highlighting",
        "Math (KaTeX) and Mermaid diagrams supported",
        "Native print pipeline — fonts and selectable text preserved",
      ]}
      sample={`# Quarterly Update

> **Audience:** leadership · **Date:** today

## Highlights

- Revenue **+18%** quarter over quarter
- Launched the v2 editor
- Hit **99.99% uptime**

## Roadmap

| Feature           | Status |
| ----------------- | :----: |
| Realtime collab   |   🚧   |
| Mobile editor     |   ✅   |
| Plugin API        |   📅   |

\`\`\`mermaid
flowchart LR
  Draft --> Review --> Publish
\`\`\`
`}
      body={`## How to convert Markdown to PDF in 3 steps

1. Open the [Markdown editor](/editor).
2. Paste your Markdown — or drag a \`.md\` file onto the page.
3. Click **Export → Export PDF / Print** and choose **Save as PDF** in your browser's print dialog.

That's it. No installs, no watermark, no upload to a third party.

## What gets rendered in the PDF

| Markdown feature             | Rendered in PDF |
| ---------------------------- | :-------------: |
| Headings (H1–H6)             |       ✅        |
| Bold, italic, strikethrough  |       ✅        |
| Lists, including nested      |       ✅        |
| Task lists                   |       ✅        |
| Tables (with alignment)      |       ✅        |
| Fenced code blocks           |       ✅        |
| Syntax highlighting          |       ✅        |
| Inline & block math (KaTeX)  |       ✅        |
| Mermaid diagrams             |       ✅        |
| Images (\`https\` and base64)|       ✅        |
| Blockquotes                  |       ✅        |
| Footnotes                    |       ✅        |

## Why this works better than "online Markdown to PDF" tools

Most online Markdown-to-PDF tools work like this:

1. You **upload** your file to their server
2. They run a headless browser (puppeteer, often slow) to render it
3. They return the PDF — sometimes after embedding a watermark

We render the preview in your browser using **react-markdown** + **rehype-highlight** + **KaTeX** + **Mermaid**, then hand the rendered DOM to your browser's native print engine. The result:

- **Faster** — no round trip, no server queue.
- **Private** — your document never leaves your device.
- **Higher fidelity** — your operating system's fonts and your browser's exact rendering are used.

## Print settings that produce the cleanest PDF

When the print dialog opens:

1. Choose **Save as PDF** (Chrome, Edge) or **PDF** (Safari, Firefox)
2. Paper size: **A4** or **Letter** depending on your region
3. **Margins:** Default (or Custom 0.5"–0.75" for tighter layout)
4. **Scale:** 90–100% — drop to 90% if a wide table is being cut off
5. **Background graphics:** ON if you want filled blockquotes and code backgrounds
6. **Headers and footers:** off for a clean document

## Comparison: 5 ways to convert Markdown to PDF

We covered the full picture in our [Markdown to PDF guide](/blog/markdown-to-pdf-guide), but the short version is:

1. **Browser print** (this tool) — fastest, free, private
2. **Pandoc** — most control, requires CLI install
3. **VS Code + extensions** — great if you already use VS Code
4. **Marp** — best for presentations
5. **Cloud APIs** — best for batch / programmatic use

Pick the one that fits your workflow. For 95% of single-document conversions, browser print is the sweet spot.

## Privacy

Your Markdown never leaves your browser. We don't upload, store, log, or train on your content.
`}
      faq={[
        {
          question: "Is the Markdown to PDF converter really free?",
          answer:
            "Yes. There's no signup, no usage cap, no watermark, no upload. Markdown Viewer is open source under the MIT license — you can also self-host it.",
        },
        {
          question: "Does the PDF include syntax highlighting?",
          answer:
            "Yes. We use highlight.js for 150+ languages. Make sure 'Background graphics' is enabled in your browser's print dialog if you want colored backgrounds on code blocks.",
        },
        {
          question: "Can I convert Markdown with math equations to PDF?",
          answer:
            "Yes. Inline math (`$...$`) and block math (`$$...$$`) are rendered with KaTeX and printed as crisp, selectable text in the PDF.",
        },
        {
          question: "What about Mermaid diagrams?",
          answer:
            "Mermaid diagrams are rendered as SVG inline, which means they print at native resolution without rasterization. Open the editor, paste a fenced ```mermaid block, and export.",
        },
        {
          question: "Why doesn't a code block fit on one page?",
          answer:
            "Set print scale to 90% in the print dialog, or wrap long lines manually in the source. Browser print engines respect CSS page breaks but can't reflow long code lines.",
        },
        {
          question: "Can I add a custom header, footer, or watermark?",
          answer:
            "Use your browser's print dialog: headers and footers can be enabled there, and many browsers support custom CSS for `@page` rules if you fork the project.",
        },
      ]}
    />
  );
}