Markdown is a lightweight and easy-to-read markup language that allows users to format plain text content without the complexities of HTML or other markup languages. It was created by John Gruber and Aaron Swartz in 2004 with the goal of making writing for the web more accessible and efficient.
To integrate Markdown into a web app using JavaScript, you can leverage existing JavaScript Markdown libraries and tools that provide functionality to parse, render, manipulate, lint, and convert Markdown text. Here are some of the widely used:
If you render Markdown from users or other untrusted sources, sanitize the generated HTML before inserting it into the page. Some parsers, including Marked, do not sanitize output HTML by default.
Marked (36.8k ⭐) — One of the most popular and straightforward Markdown parsers for JavaScript, also available as a CLI tool. It allows you to convert Markdown to HTML and includes support for common Markdown extensions.
markdown-it (21.4k ⭐) — A Markdown parser that follows the CommonMark specification and supports extensions and plugins. It is written in JavaScript and can be used in Node.js or browser environments. It is fast, easy to extend, and safe by default when raw HTML is disabled.
MDX (19.1k ⭐) — A library that allows you to use JSX, a syntax extension of JavaScript that lets you write HTML-like elements, in Markdown content. MDX enables you to import components, such as interactive charts or alerts, and embed them within Markdown. This makes writing long-form content with components a blast.
react-markdown (15.7k ⭐) — A React component that safely renders Markdown into React elements. It is built and maintained by UnifiedJS, the same folks behind RemarkJS and RehypeJS. It uses a syntax tree to build the virtual DOM, which allows for updating only the changing DOM instead of completely overwriting.
mdx-deck (11.5k ⭐) — A presentation tool based on MDX that allows you to create slides using Markdown and React components. You can write your slides in a single MDX file and separate them with ---. You can also import and use any React component in your slides, as well as customize the theme and layout of your presentation.
Milkdown (11.4k ⭐) — A plugin-driven WYSIWYG Markdown editor, inspired by Typora, built on top of ProseMirror and remark. Milkdown is headless and comes without any CSS. You can easily customize the editor to fit the style of your application.
Turndown (11k ⭐) — Different from typical Markdown parsers; it converts HTML to Markdown instead of the other way around. It’s useful when you want to convert HTML content back to Markdown format. Turndown uses configurable rules to generate Markdown from HTML.
remark (8.6k ⭐) — A popular tool that transforms Markdown with plugins. These plugins can inspect and change your markup. You can use remark on the server, the client, CLIs, Deno, and other JavaScript runtimes. It is part of the unified collective, which brings together organizations that work with content as structured data.
Markdoc (8k ⭐) — A powerful, flexible, Markdown-based authoring framework. Markdoc allows you to create custom documentation sites and experiences using Markdown syntax and plugins. You can use Markdoc to render your content into HTML, React, or other formats.
remarkable (5.8k ⭐) — A high-speed Markdown parser. Remarkable allows you to convert Markdown text into HTML and customize syntax rules and rendering options.
textlint (3k ⭐) — A pluggable natural language linter for text and Markdown. textlint allows you to check and fix your writing errors based on custom rules. You can use textlint to improve your writing quality, style, and consistency.
mdsvex (3k ⭐) — A Markdown preprocessor for Svelte components. MDsveX allows you to use Svelte components in your Markdown, or Markdown in your Svelte components. It is similar to MDX, but for Svelte.
Markdown’s syntax is simple and intuitive, using plain text and special characters to indicate various formatting elements such as headings, lists, links, and more. Markdown has gained immense popularity for several reasons:
There is no official standard for Markdown syntax, and different implementations may have different features or behaviors. These variations are called flavors of Markdown. Some of the most common flavors of Markdown are:
There are many other Markdown-based syntaxes and tools, such as MDX, MDsveX, and Markdoc. Libraries such as Remarkable implement or extend Markdown parsing rather than defining a separate Markdown flavor.
Markdown and HTML are both markup languages that can be used to create formatted text documents. However, they have some differences in terms of syntax, features, and usage:
Syntax: Markdown uses a simple and intuitive syntax that consists of symbols and characters, such as # for headings, * for emphasis, [ ] for links, etc. HTML uses a more complex and verbose syntax that consists of tags and attributes, such as <h1> for headings, <em> for emphasis, <a> for links, etc.
Features: Markdown supports a limited set of formatting elements, such as headings, lists, code blocks, images, etc. HTML supports a much wider range of formatting elements, such as tables, forms, scripts, styles, etc. Markdown can be extended with plugins or converted to HTML to achieve more features. HTML can also be combined with other languages, such as CSS and JavaScript, to enhance the presentation and functionality.
Usage: Markdown is mainly used for writing plain text content that can be easily read and edited by humans. It is often used for creating readme files, blog posts, documentation, notes, etc. HTML is mainly used for publishing structured content that can be rendered by browsers. It is often used for creating web pages, applications, newsletters, etc.
Here is an original example of Markdown and its equivalent HTML:
# Heading 1
## Heading 2
This is a paragraph with some **bold text** and *italic text*.
- Item 1
- Item 2
- Item 3
[Visit byby.dev](https://byby.dev)HTML:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph with some <strong>bold text</strong> and <em>italic text</em>.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p><a href="https://byby.dev">Visit byby.dev</a></p>