Softonic

Konverter van Markdown naar HTML

Stap 1 / 3
Volgende

Plak Markdown en krijg schone, semantische HTML terug, <h1> tot <h6>, <ul>, <ol>, <table>, <pre><code> met gemarkeerde syntaxis, <blockquote> en automatisch gekoppelde URL’s. Kies voor het volledige document (met <html>, <head> en een minimale stijlblad) of voor een fragment (enkel de inhoud van het lichaam), afhankelijk van of u het in een bestaande pagina integreert of een zelfstandige bestand maakt.

Hoe zet je Markdown om naar HTML

  1. 1

    Plak Markdown

    Volledig document of fragment. De YAML-frontmatter wordt automatisch verwijderd indien aanwezig.

  2. 2

    Kies uitbreidingsset

    Alleen CommonMark, GFM (tabellen, taaklijsten, automatische links) of GFM met wiskundige functies.

  3. 3

    Kies de uitvoermodus

    Een fragment voor integratie, of het volledige HTML-document met een kop en minimale CSS.

  4. 4

    Kopieer of download HTML

    Haal de HTML als tekst op of sla deze als een `.html`-bestand op.

Toewijzingstabel

Markdown HTML
# Heading 1 <h1>Heading 1</h1>
**bold** <strong>bold</strong>
*italic* <em>italic</em>
`code` <code>code</code>
Afgebakende code met taal <pre><code class="language-js">
- item <ul><li>item</li></ul>
1. item <ol><li>item</li></ol>
> quote <blockquote><p>quote</p></blockquote>
[text](url) <a href="url">text</a>
![alt](src) <img src="src" alt="alt">
--- <hr>
GFM-tabel <table><thead>...</thead>...
- [x] done <input type="checkbox" checked disabled>

Highlighting van de syntaxis

Gefenceerde codeblokken met taalhints krijgen het attribuut class="language-xxx" op het element <code>. De converter integreert ook de ge-tokeniseerde uitvoer van highlight.js wanneer u de optie ‘vooraf gemarkeerd’ activeert; dit is handig als de doelseite geen highlighter-runtime bevat.

Volledig document versus fragment

  • Fragment bevat uitsluitend het interne HTML-deel, begin met <h1> of het eerste element. Plaats dit in een bestaand CMS-blok, e-mailbody of frontend-component.
  • Volledig document verpakt het fragment in <!DOCTYPE html>, <html> en <head> met een klein standaardstijlblad (typografie, codeblokken, tabellen). Sla het op als .html; het opent in elke browser zonder dat extra bestanden nodig zijn.

Inline versus externe CSS

  • Inline-stijlen (aan/uit schakelen): zetten alle CSS rechtstreeks op de elementen. Lelijk, maar onfeilbaar voor e-mailsjablonen.
  • Klassen (standaard) houden de HTML schoon en verwachten dat het stijlblad van uw website de opmaak verzorgt.

Toegankelijkheidsnotities

  • Koppen worden weergegeven als semantische <h1>–<h6>, waardoor de hiërarchie behouden blijft. Sla geen niveaus over in de broncode.
  • Afbeeldingen zonder alternatieve tekst genereren <img alt=""> (een opzettelijk lege alt voor decoratieve afbeeldingen); voeg echter wel alternatieve tekst toe, tenzij de afbeelding echt decoratief is.
  • Tabellen krijgen een <thead> voor de kopregel, waardoor de navigatie in schermlezers verbetert.

Veelgestelde vragen

Ja. Het raw HTML uit de bron wordt zonder scripttaggen en evenementattributen verwerkt. Als u een niet-gesanitiseerde uitvoer nodig hebt (u vertrouwt op de invoer), is er een optie beschikbaar; gebruik deze echter niet voor door gebruikers ingevoerde inhoud.

De GFM-taaklijsten (- [x], - [ ]) worden omgevormd tot elementen van type <input type="checkbox" disabled>. Het attribuut disabled voorkomt onbedoelde wijzigingen in de staat van de weergegeven weergave.

Ja, activeer inline-stijlen. De converter voegt een minimale stijlattribuut toe aan elke blok, wat nodig is voor e-mailprogramma’s (Outlook, Gmail) omdat deze <style>-blokken verwijderen.

Activeren de wiskundige extensie en zorg ervoor dat de $x^2$- of $$...$$-blokken worden weergegeven met KaTeX. De converter produceert statische SVG- of HTML-bestanden; geen MathJax tijdens uitvoering nodig.

Nee: het analyseren van tekst en de generatie van HTML vinden plaats in uw browser. De broncode en het eindresultaat verlaten nooit uw apparaat.

Gerelateerde tools

Webpack-configuratiegenerator

Maak een webpack.config.js voor webpack 5 vanuit een kort formulier: stel entry, uitvoermap en mode in en zet TypeScript, Babel, een CSS-loader, HtmlWebpackPlugin en een dev-server aan.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

SVG-golfgenerator

Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.

Decimaal naar hexadecimaal converter

Voer een decimaal geheel getal in en ontvang direct de hexadecimale waarde, inclusief negatieve waarden als 64-bits tweecomplement.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

JSON-editor online

Bewerk JSON lokaal in de browser, bekijk de opgemaakte structuur, formatteer of minimaliseer tekst, sorteer sleutels en download een JSON-bestand.

Tool beschikbaar in andere talen