Skip to main content

Markdown to PDF Converter

Convert GitHub Flavored Markdown (GFM) into clean, professional A4 PDF documents directly in your browser.

Hello World

Write your markdown here.

  • It supports lists
  • Tables
  • Code blocks
Markdown Editor
PDF Preview

Hello World

Write your markdown here.

  • It supports lists
  • Tables
  • Code blocks

Technical Architecture: Reverse-Engineering Markdown Compilation & Slicing​

Converting dynamic Markdown syntax into a fixed-layout PDF document requires lexical parsing, abstract syntax tree (AST) construction, HTML generation, and page-break mathematical calculation.

1. Lexical Tokenization & GFM Parsing​

Input Markdown text is parsed into tokens using an optimized parser:

import { marked } from 'marked';

function compileMarkdownToHtml(markdownContent: string): string {
  // Configure GitHub Flavored Markdown (GFM) options
  marked.setOptions({
    gfm: true,
    breaks: true,
  });

  return marked.parse(markdownContent);
}

2. Multi-Page Canvas Slicing & Orphan Prevention​

When generating A4 PDF pages from dynamic-height HTML containers, standard canvas screenshotting cuts lines of text in half across page boundaries. The compiler prevents line slicing by measuring element offsets relative to target A4 page heights (297mm × DPI):

function calculatePageSlices(container: HTMLElement, pageHeightPx: number): number[] {
  const slices: number[] = [0];
  let currentHeight = 0;

  Array.from(container.children).forEach((child) => {
    const el = child as HTMLElement;
    const elementBottom = el.offsetTop + el.offsetHeight;

    if (elementBottom - currentHeight > pageHeightPx) {
      // Insert page break before current element
      currentHeight = el.offsetTop;
      slices.push(currentHeight);
    }
  });

  return slices;
}

GitHub Flavored Markdown Feature Support​

ElementMarkdown SyntaxRendered OutputPDF Formatting Rule
Tables| col 1 | col 2 |GFM border tablePadded cells, subtle alternating row backgrounds
Code Blocks```langMonospace blockSyntax highlighting palette, word wrap enabled
Checklists- [x] TaskInteractive checkbox iconScalable vector glyphs
Blockquotes> Important noteLeft accent borderEmphasized typography with distinct indent
Headings# H1 through ### H3Proportional headersbreak-after: avoid prevents orphan headers

Client-Side Security & Zero-Server Data Isolation​

  • 100% Client-Side: All Markdown parsing and PDF document rendering execute locally in your browser. Technical design docs, internal API specs, and proprietary notes are never sent across the internet.
  • No File Storage: Uploaded .md files and generated PDF documents exist only in client memory.
  • Clean DOM Isolation: Sandboxed preview containers prevent arbitrary script execution (XSS) during Markdown compilation.

Get notified about updates to this tool

No spam. Just high-quality updates about new features and guides.

Last updated on