DEV Community

Cover image for How to Convert Markdown to a Professional PDF (Without Broken Tables, Code, or Math)
frank
frank

Posted on

How to Convert Markdown to a Professional PDF (Without Broken Tables, Code, or Math)

Converting Markdown to PDF is easy.

Converting it into a PDF you can confidently send to a client, reviewer, professor, or teammate is a different task.

A successful export needs more than a Download PDF button. The document should have a clear hierarchy, readable typography, code that does not disappear off the page, tables that fit, working links, and equations that survive the transition from source text to fixed pages.

This guide gives you a complete workflow using MDFold’s Markdown to PDF converter. It also explains the failure cases that matter, including wide tables, long code lines, missing background colors, awkward page breaks, and content that should not be exported as PDF in the first place.

I tested the workflow with headings, task lists, a numeric table, JavaScript, links, inline math, and a display equation on both desktop and a 390-pixel-wide phone viewport.

First decide whether PDF is the right output

PDF is a good destination when the document is finished and its appearance should remain stable.

Use PDF for:

  • project reports and technical proposals;
  • resumes and portfolios;
  • assignments and research notes;
  • release plans and operational runbooks;
  • documents that will be printed, signed, archived, or attached to email;
  • anything where the recipient should read rather than rewrite.

Do not default to PDF for every document.

What the recipient needs to do Better format
Read, print, archive, or approve a finished document PDF
Edit wording, comment, or use tracked changes Word
Publish content on a website HTML
Continue writing in a repository or notes app Markdown
Share a short visual card on social media PNG or JPG

This decision prevents a common mistake: spending time forcing an editable workflow into a fixed-page format.

Start with Markdown that has real structure

A converter can style your structure, but it cannot reliably invent structure that is missing.

Before exporting, check that the source has:

  • one H1 for the document title;
  • H2 sections for the main ideas;
  • H3 headings only when they belong inside an H2 section;
  • blank lines around lists, tables, blockquotes, and code fences;
  • language names on fenced code blocks;
  • meaningful link text instead of repeated “click here” labels;
  • concise table cells;
  • image URLs that the browser can actually load.

Here is the representative document I used for testing:

# API Reliability Review

**Owner:** Platform Team  
**Status:** Ready for review

> Goal: reduce failed requests without hiding operational risk.

## Release checks

- [x] Retry policy documented
- [x] Error budget reviewed
- [ ] Final approval

| Metric | Current | Target |
|---|---:|---:|
| Availability | 99.92% | 99.95% |
| P95 latency | 280 ms | 220 ms |

## Example

```javascript
const retry = (attempt) =>
  Math.min(1000 * 2 ** attempt, 30000);
```

Inline formula: $E = mc^2$

$$
S = \sum_{i=1}^{n} x_i
$$

[Open the runbook](https://example.com/runbook)
Enter fullscreen mode Exit fullscreen mode

This is a better test than a document containing only headings and paragraphs. It exercises the parts most likely to fail when content moves onto fixed pages.

Convert Markdown to PDF in five steps

1. Open or paste the Markdown

Open the Markdown to PDF converter.

You can type directly in the editor, paste existing Markdown, or use Open MD to select a .md, .markdown, or .txt file.

Do not style the document yet. First, confirm that the content itself is complete. Check the title, section order, links, table values, code, and equations.

2. Review the live preview before choosing a template

The preview should show the document’s logical structure:

  • the title is visually distinct;
  • section levels are obvious;
  • task-list states are recognizable;
  • numeric columns align correctly;
  • code appears as code rather than ordinary prose;
  • inline and display math render;
  • the link remains identifiable.

MDFold editor showing Markdown source beside a styled PDF preview

Keep the source and preview visible together while correcting structure. Styling a broken hierarchy only makes the problem more attractive.

During my test, the preview preserved the title, metadata labels, blockquote, three task items, two-row table, JavaScript block, link, and both equation forms.

3. Choose a template for the reader, not for decoration

MDFold currently provides 24 document styles grouped into business, minimal, academic, technical, and creative categories.

Choose according to the job:

Document Good starting direction Why
Technical report or runbook GitHub Style, Modern, or another restrained technical style Strong code contrast and familiar hierarchy
Proposal or client report Classic, Business Gray, or Corporate Blue Conservative presentation and clear sections
Essay or research note Research Journal, Academic Green, or a readable serif style Comfortable for longer reading
Resume Simple, Pure Black & White, or Soft Ink Keeps attention on content
Announcement or short handout A restrained creative style Adds identity without overwhelming the message

The rule is simple: the template should make the document easier to understand. If the reader notices the theme before the content, reduce the decoration.

4. Adjust typography and spacing only when the preview shows a problem

Use Edit template to adjust colors, body and heading fonts, type size, line height, and page padding.

Make one change at a time and look for a specific improvement:

  • reduce the body size slightly when a dense table barely overflows;
  • increase line height when long paragraphs feel crowded;
  • reduce page padding when code needs a little more horizontal room;
  • increase code contrast if punctuation is hard to distinguish;
  • use a calmer accent color for formal documents;
  • keep body text dark on a light background for print-heavy use.

Avoid shrinking everything to rescue one difficult element. A table that needs unreadably small body text should be simplified or split instead.

5. Download, save as PDF, and inspect the artifact

Click Download PDF. MDFold prepares the print-focused document and opens the browser’s print dialog. Choose Save as PDF as the destination.

The final controls depend on your browser and operating system. Browser printing can apply print-specific styles, page dimensions, orientation, and margins; this is part of the standard web printing model described by MDN’s printing guide.

Before saving:

  1. Confirm the destination is Save as PDF.
  2. Check the page size and orientation.
  3. Review the page count.
  4. Enable Background graphics if template colors or code shading are missing.
  5. Inspect a page containing a table or code block.
  6. Save the PDF.
  7. Open the saved file in a PDF reader and repeat the critical checks.

The last step matters. The saved PDF is the deliverable; the browser preview is only evidence of what you expect to receive.

Fix the failures that appear in real documents

A wide table runs beyond the page

Markdown tables describe rows, columns, and alignment. They do not define a print layout.

Fix the source in this order:

  1. Shorten verbose column headings.
  2. Replace paragraph-length cells with short phrases.
  3. Remove columns that are not needed by this audience.
  4. Split one large table into two focused tables.
  5. Reduce page padding slightly.
  6. Use landscape orientation if the print dialog provides it.

Do not solve every table problem by reducing the font until nobody can comfortably read it.

Long code lines are clipped or create horizontal scrolling

PDF pages have a fixed width. A long command, URL, string, or generated line cannot expand the page.

Prefer readable source:

const retryDelay = Math.min(
  baseDelay * 2 ** attempt,
  maximumDelay,
);
Enter fullscreen mode Exit fullscreen mode

Instead of:

const retryDelay = Math.min(baseDelay * 2 ** attempt, maximumDelay);
Enter fullscreen mode Exit fullscreen mode

For commands or output that cannot be wrapped safely, use a smaller code font, shorten the example, or move the complete version to a linked repository.

Code backgrounds disappear in the saved PDF

Enable Background graphics in the browser print dialog.

Browsers often treat printed output differently from screen output. The saved result can therefore omit a background that was visible in the live preview unless printing backgrounds is enabled.

After changing the setting, inspect one code-heavy page before saving the complete document.

A heading is stranded at the bottom of a page

Page breaks are calculated from the final type size, spacing, margins, and content.

Try these fixes:

  • shorten the paragraph before the heading;
  • reduce excessive spacing;
  • move a related sentence into the next section;
  • split an oversized table or code block;
  • choose a slightly more compact template.

Avoid inserting a series of blank lines. Blank lines are content, not reliable page-break instructions, and they become fragile when the document changes.

An image is missing or blurry

For a remote image, open its URL in a browser first. If the browser cannot load it, the converter cannot render it into the preview.

Use an image large enough for its displayed size, but do not insert an enormous source just because the final page is small. Check that diagrams remain legible in the saved PDF at normal zoom.

If the document must work offline or the image URL requires authentication, replace it with a stable accessible source before exporting.

A formula does not render

The page renders supported math notation with KaTeX. KaTeX documents its available commands in the official supported-functions reference.

Check:

  • inline math uses single dollar delimiters;
  • display math uses double dollar delimiters;
  • backslashes were not removed while copying;
  • the command is supported;
  • braces are balanced.

Even when a formula renders correctly, inspect its width. A long display equation may need to be split across lines or rewritten before it can fit a portrait page.

A link looks right but opens the wrong destination

Click important links in the preview before export, then test them again in the saved PDF.

Use descriptive text:

[Read the deployment runbook](https://example.com/runbook)
Enter fullscreen mode Exit fullscreen mode

This is more useful than:

[Click here](https://example.com/runbook)
Enter fullscreen mode Exit fullscreen mode

If the PDF may be printed, consider whether the destination also needs to appear in a references section.

Use this 60-second preflight before sending the PDF

Do not reread every sentence through the converter interface. Review the artifact systematically.

Check What to inspect
First page Title, author or owner, date, and opening hierarchy
Structure H2/H3 order, list indentation, blockquotes, and section flow
Numbers Table values, percentages, dates, and formulas
Code Wrapping, indentation, contrast, and missing characters
Images Loading, sharpness, captions, and page fit
Links Important destinations in the saved PDF
Pagination Stranded headings, nearly blank pages, split tables, and clipped content
Final page Truncation, accidental notes, and expected closing content

For legal, financial, medical, academic, or compliance-sensitive material, compare critical quotations, numbers, formulas, and references against the source. Conversion saves formatting work; it does not replace responsibility for the content.

What happens to your Markdown

In the version tested for this article, editing, rendering, template selection, and print preparation happened in the browser. The Markdown did not need to be uploaded to a conversion server.

The browser and operating system handle the final Save as PDF step.

This is useful for private drafts, source code, internal documentation, and unpublished reports, but “local” does not make the surrounding environment automatically safe. A compromised device, untrusted browser extension, publicly shared computer, or remote image URL can still create privacy risks.

Use non-sensitive image sources, keep the browser updated, and follow your organization’s document-handling rules.

Mobile works for editing and review, but desktop is better for final pagination

At a 390 × 844 viewport, MDFold showed separate Write and Preview controls. The test document’s table and equations remained accessible without page-level horizontal overflow.

MDFold Markdown to PDF converter in a phone-sized layout

The phone layout is useful for corrections and preview checks. A larger screen remains more comfortable for reviewing page breaks and wide tables.

Use mobile when you need to correct wording, inspect a short document, or produce a quick export. Use a desktop or tablet for long reports, detailed template adjustment, and final pagination review.

Frequently asked questions

Does MDFold create the PDF directly?

MDFold prepares the document and opens the browser print dialog. Select Save as PDF there. Available page sizes, orientations, margins, headers, footers, and background options depend on the browser and operating system.

Can Markdown tables, code blocks, and math be exported?

They appeared in the live preview during the representative test for this article. Difficult content still needs inspection: wide tables and long code can exceed the printable width, and long equations may need rewriting.

Why does my saved PDF look different from the preview?

Check the selected printer or destination, page size, margins, scale, orientation, and Background graphics setting. Print settings affect the final file.

Can I use custom HTML inside Markdown?

Do not assume arbitrary HTML or browser-specific styling will survive every Markdown renderer and print path. Prefer standard Markdown for portable documents, then verify any custom HTML in both the preview and saved PDF.

Is Markdown to PDF private?

The MDFold workflow tested for this article handled the Markdown and print preparation in the browser. You should still consider device security, browser extensions, remote images, and your organization’s rules for sensitive documents.

The real goal is not conversion—it is a trustworthy artifact

A good Markdown-to-PDF workflow is:

  1. choose PDF only when the document is ready for fixed presentation;
  2. give the Markdown a clear structure;
  3. test difficult content, not only paragraphs;
  4. choose typography for the reader;
  5. inspect the print settings;
  6. open and verify the saved PDF.

That process takes a little longer than clicking Download, but it prevents the failures people actually notice after you send the file.

Try the workflow in the free MDFold Markdown to PDF converter.

If you find a table, code sample, equation, or page-break case that does not behave as expected, share the smallest Markdown example that reproduces it. A reproducible edge case is far more valuable than a vague “the formatting looks wrong.”

Top comments (0)