Last updated
Basic Markdown to HTML Conversion
Convert a simple Markdown document to HTML:
Input Markdown:
# Welcome to My Blog
This is a paragraph with **bold** and *italic* text.
## Getting Started
1. Install the dependencies
2. Configure the settings
3. Run the application
Visit [our documentation](https://docs.example.com) for more details.
Generated HTML:
<h1>Welcome to My Blog</h1>
<p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
<h2>Getting Started</h2>
<ol>
<li>Install the dependencies</li>
<li>Configure the settings</li>
<li>Run the application</li>
</ol>
<p>Visit <a href="https://docs.example.com">our documentation</a> for more details.</p>Converting Code Blocks with Syntax Highlighting Classes
Fenced code blocks with language identifiers get class attributes for syntax highlighting libraries:
Input Markdown:
```javascript
function greet(name) {
return `Hello, ${name}!`;
}
```
```python
def greet(name):
return f"Hello, {name}!"
```
Generated HTML:
<pre th:inline="none">function greet(name) {
return `Hello, ${name}!`;
}
def greet(name):
return f"Hello, {name}!"
The language-javascript and language-python classes are recognized by Prism.js and Highlight.js for syntax highlighting.
Converting Markdown Tables
Markdown tables convert to semantic HTML table elements:
Input Markdown:
| Name | Age | City |
|:------|----:|:-----------:|
| Alice | 30 | New York |
| Bob | 25 | Los Angeles |
Generated HTML:
<table>
<thead>
<tr>
<th style="text-align: left">Name</th>
<th style="text-align: right">Age</th>
<th style="text-align: center">City</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">Alice</td>
<td style="text-align: right">30</td>
<td style="text-align: center">New York</td>
</tr>
<tr>
<td style="text-align: left">Bob</td>
<td style="text-align: right">25</td>
<td style="text-align: center">Los Angeles</td>
</tr>
</tbody>
</table>Converting Task Lists (GitHub Flavored Markdown)
Input Markdown:
- [x] Completed task
- [ ] Incomplete task
- [x] Another completed task
Generated HTML:
<ul>
<li><input type="checkbox" checked disabled> Completed task</li>
<li><input type="checkbox" disabled> Incomplete task</li>
<li><input type="checkbox" checked disabled> Another completed task</li>
</ul>Processing Front Matter
YAML front matter at the top of Markdown files can be handled in different ways:
Input Markdown with front matter:
---
title: My Blog Post
date: 2024-01-15
tags: [javascript, tutorial]
author: Alice Johnson
---
# My Blog Post
Content starts here...
Option 1 — Strip front matter:
<h1>My Blog Post</h1>
<p>Content starts here...</p>
Option 2 — Convert to meta tags:
<meta name="title" content="My Blog Post">
<meta name="date" content="2024-01-15">
<meta name="author" content="Alice Johnson">
<h1>My Blog Post</h1>
<p>Content starts here...</p>External Link Options
Configure how external links are handled in the output:
Input Markdown:
See [our docs](/docs) and [external resource](https://external.com).
Option: Add target="_blank" and rel="noopener noreferrer" to external links
Generated HTML:
<p>See <a href="/docs">our docs</a> and
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
external resource
</a>.</p>
Internal links (/docs) are not modified.
External links (https://) get the security attributes.Adding Lazy Loading to Images
Input Markdown:
Generated HTML (with lazy loading enabled):
<img src="/images/screenshot.png" alt="Product screenshot" loading="lazy">
<img src="/images/team.jpg" alt="Team photo" title="Our team" loading="lazy">Full HTML Document Export
Export as a complete HTML file with DOCTYPE and head section:
Generated complete HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog Post</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css">
</head>
<body>
<article>
<h1>My Blog Post</h1>
<p>Content here...</p>
</article>
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
</body>
</html>The complete HTML export includes Prism.js for syntax highlighting and is ready to open directly in a browser.