📄
← Terug naar handleidingen

Hoe converteer je Markdown naar HTML: een complete handleiding

· Tags: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

Hoe converteer je Markdown naar HTML

Markdown is ontworpen voor schrijven, maar het web draait op HTML. Elk Markdown-document moet naar HTML worden geconverteerd voordat een browser het kan weergeven. Deze handleiding behandelt de belangrijkste methoden om Markdown naar HTML te converteren.

Methode 1: opdrachtregelprogramma's

Pandoc

Pandoc is de universele documentconverter die tientallen formaten ondersteunt.

# Basic conversion
pandoc input.md -o output.html

# Standalone HTML with <html> and <body> tags
pandoc input.md -o output.html -s

# With table of contents
pandoc input.md -o output.html -s --toc

Python-Markdown

pip install markdown
python -m markdown input.md > output.html

import markdown
with open("input.md", "r") as f:
    text = f.read()
html = markdown.markdown(text, extensions=["fenced_code", "tables"])

CommonMark (JavaScript)

npm install commonmark

const commonmark = require("commonmark");
const reader = new commonmark.Parser();
const writer = new commonmark.HtmlRenderer();
const parsed = reader.parse("# Hello\nThis is **bold**.");
const html = writer.render(parsed);

Methode 2: statische site-generators

Jekyll

Jekyll vormt de motor achter GitHub Pages. Het converteert Markdown-bestanden uit _posts of collecties naar HTML.

gem install jekyll bundler
jekyll new my-site
jekyll build
jekyll serve

Het gebruikt de Kramdown-processor met Liquid-sjablonen voor dynamische inhoud.

Hugo

Hugo is een op Go gebaseerde statische site-generator die bekendstaat om buildsnelheden van milliseconden.

hugo new site my-site
hugo new posts/my-first-post.md
hugo server -D

Het gebruikt Goldmark als standaard Markdown-renderer met ondersteuning voor tabellen, codeblokken met omheining en voetnoten.

Next.js (MDX)

Next.js ondersteunt MDX, waarmee React-componenten in Markdown kunnen worden ingebed.

npm install next @next/mdx @mdx-js/loader

Met MDX kun je live codevoorbeelden, grafieken en formulieren in documentatie opnemen.

Methode 3: online converter

Voor eenmalige conversies zonder tools te installeren, leveren op de browser gebaseerde converters direct resultaat:

  1. Plak of typ Markdown in het editorpaneel.
  2. De HTML-uitvoer verschijnt in realtime.
  3. Kopieer de gegenereerde HTML voor gebruik in elke webpagina of CMS.

De Markdown preview-tool verwerkt GitHub Flavored Markdown — tabellen, codeblokken, takenlijsten en doorhaling — volledig in je browser.

Methode 4: editor-plugins

| Editor | Functie | Opdracht | |--------|---------|---------| | VS Code | Ingebouwde preview | Ctrl+Shift+V | | Sublime Text | MarkdownPreview | Alt+M | | IntelliJ IDEA | Ingebouwde ondersteuning | Quick Documentation | | Vim | vim-markdown | :MarkdownPreview |

De verwerkingspijplijn

Wanneer een statische site-generator Markdown naar HTML converteert, volgt het deze pijplijn:

Markdown → Parse to AST → Apply extensions → Render to HTML → Apply template → Output page

Als een functie niet naar verwachting wordt gerenderd, ligt het probleem meestal bij de parser (die de syntaxis niet ondersteunt) of de renderer (die onverwachte HTML uitvoert).

Converteer Markdown online naar HTML

Gebruik de Markdown preview-tool om Markdown direct naar HTML te converteren. Typ of plak Markdown in de editor en de gerenderde preview wordt in realtime bijgewerkt.

Hoe converteer je Markdown naar HTML: een complete handleiding - CoolTool