Markdown to HTML Conversion

Markdown is a lightweight markup language. Converting it to HTML is common for blogs, documentation, and static sites.

Basic Markdown Syntax

# Heading 1
## Heading 2
### Heading 3

**Bold text**
*Italic text*
~~Strikethrough~~

[Link](https://example.com)
![Image](image.jpg)

- List item 1
- List item 2

1. Ordered item 1
2. Ordered item 2

> Blockquote

`Inline code`

Code block

Using marked Library

import { marked } from 'marked';

const markdown = '# Hello World\n\nThis is **bold**.';
const html = marked(markdown);

// Output:
// <h1>Hello World</h1>
// <p>This is <strong>bold</strong>.</p>

Using markdown-it

const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();

const result = md.render('# Hello\n\nParagraph');

Custom Options

const md = new MarkdownIt({
  html: true,           // Allow HTML in source
  linkify: true,       // Auto-convert URLs to links
  typographer: true,   // Smart quotes, etc.
  breaks: true         // Convert \n to <br>
});

Syntax Highlighting

const hljs = require('highlight.js');
const md = require('markdown-it')({
  highlight: function(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value;
      } catch (__) {}
    }
    return '';
  }
});

Security: Sanitize HTML

import { marked } from 'marked';
import DOMPurify from 'dompurify';

const markdown = '...';
const html = marked(markdown);
const safeHtml = DOMPurify.sanitize(html);

Rendering in React

import { marked } from 'marked';
import DOMPurify from 'dompurify';

function MarkdownRenderer({ content }) {
  const html = DOMPurify.sanitize(marked.parse(content));
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Common Use Cases

1. Blog Posts

const post = {
  title: 'My Post',
  content: '# Title\n\nContent here...'
};

const html = marked(post.content);

2. Documentation

const docs = fs.readFileSync('readme.md', 'utf-8');
const html = marked(docs);

3. Comment System

function renderComment(comment) {
  return DOMPurify.sanitize(marked.parse(comment));
}

Limitations

<!-- Not supported in standard Markdown -->
<div>HTML elements</div>

<!-- Use extensions or custom parser -->
| Table | Needs | Extra Syntax |

Extended Syntax

Tables

| Header | Header |
|--------|--------|
| Cell   | Cell   |

Task Lists

- [x] Done
- [ ] Not done

Footnotes

Here is a note[^1].

[^1]: This is the note.

Popular Tools

| Tool | Best For | |------|----------| | marked | Simple, fast | | markdown-it | Extensible | | remark | AST-based | | unified | Full pipeline |

Conclusion

Use a library like marked or markdown-it for conversion. Always sanitize output to prevent XSS. For React, use dangerouslySetInnerHTML after sanitization.