Markdown output

The Markdown plugin lets you switch the default output from HTML to Markdown. This way you can produce lightweight text documents with a simple formatting syntax that is popular among developers.

# Demo

The editor below is configured to output GitHub Flavored Markdown. Edit the content and see how the Markdown output changes (you can find it below the editor).

Please note that the source editing feature in the demo below is a separate plugin. If you would like to use it in your integration, you need to install it separately.

<h2>Markdown output 🛫</h2>
<p>
	<a href="https://ckeditor.com/">CKEditor 5</a> can be configured to output Markdown instead of HTML. Markdown is a lightweight markup language that you can use to add formatting to plain text documents. Use the <strong>Source</strong> button to check and edit the Markdown source code of this content.
</p>

<p>
	The editor-produced Markdown output supports most essential features, like <a href="https://ckeditor.com/">links</a>, <strong>different</strong> kinds of <em>emphasis</em>, <code>inline code formatting</code>, or code blocks:
</p>

<pre><code class="language-css">p {
    text-align: center;
    color: red;
}</code></pre>

<h2>Markdown input 🛬</h2>
<p>
	Thanks to the <a href="https://ckeditor.com/docs/ckeditor5/latest/features/autoformat.html" >autoformatting feature</a>, you can use Markdown syntax when writing. Try it out - use these (or any other) Markdown shortcuts in the editor to format the content on the fly 🚀!
</p>
<table>
	<thead>
		<th>Inline formatting</th>
		<th>Shortcut</th>
	</thead>
	<tbody>
		<tr>
			<td>
				<strong>Bold</strong>
			</td>
			<td>
				Type <code>**</code> or <code>__</code> around your text.
			</td>
		</tr>
		<tr>
			<td>
				<em>Italic</em>
			</td>
			<td>
				Type <code>*</code> or <code>_</code> around your text.
			</td>
		</tr>
		<tr>
			<td>
				<code>Code</code>
			</td>
			<td>
				Type <code>ˋ</code> around your text.
			</td>
		</tr>
		<tr>
			<td>
				<s>Strikethrough</s>
			</td>
			<td>
				Type <code>~~</code> around your text.
			</td>
		</tr>
	</tbody>
</table>

<p>
	Shh! 🤫 Markdown has very basic support for tables. Some advanced table-related features like table or cell styling were disabled in this demo.
</p>

<h2>Block formatting</h2>

<p>
	You can also use Markdown to create various text blocks, such as:
</p>

<ul>
	<li>
		Block quotes - Start a line with <code>﹥</code> followed by a space.
	</li>
	<li>
		Headings:
		<ol>
			<li>Heading 1 - Start a line with <code>#</code> followed by a space.</li>
			<li>Heading 2 - Start a line with <code>##</code> followed by a space.</li>
			<li>Heading 3 - Start a line with <code>###</code> followed by a space.</li>
		</ol>
	</li>
	<li>Lists, including nested ones:
		<ul>
			<li>
				Numbered lists - Start a line with <code>1.</code> or <code>1)</code> followed by a space.
			</li>
			<li>
				Bulleted lists - Start a line with <code>*</code> or <code>-</code> followed by a space.
			</li>
			<li>
				To-do lists - Start a line with <code>[ ]</code> or <code>[x]</code> followed by a space to insert an unchecked or checked list item.
			</li>
		</ul>
	</li>
	<li>
		Code blocks - Start a line with <code>ˋˋˋ</code>.
	</li>
	<li>
		Horizontal lines - Start a line with <code>---</code>.
	</li>
</ul>

Output:

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Additional feature information

Coupled with the autoformatting feature, the Markdown plugin offers the full-fledged Markdown WYSIWYG editing experience, as described in the “CKEditor 5: the best open source Markdown editor” blog post. Visit the free online Markdown editor to see this solution implemented.

Please remember that Markdown syntax is really simple and it does not cover all the rich-text features. Some features provided by CKEditor 5 will thus work as intended only when output to HTML as they have no Markdown equivalent.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the Markdown plugin to the editor configuration. It will change the default data processor to the GFMDataProcessor:

import { ClassicEditor, Bold, Italic, Essentials, Markdown } from 'ckeditor5';
// More imports.
// ...

ClassicEditor
    .create( document.querySelector( '#snippet-markdown' ), {
        plugins: [
            Markdown,
            Essentials,
            Bold,
            Italic,
            // More plugins.
            // ...
        ],
        // More of editor's configuration.
        // ...
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Extending formatting support

If you need more extensive Markdown support for formatting elements (for example, having the title attribute on links represented as [Foo Bar](https://foo.bar "My link title")), you can also install General HTML Support. This advanced feature allows the integrators to provide additional tags, elements, and attributes, not yet supported by other CKEditor 5 plugins and extend the formatting capabilities.

# The Markdown data processor

The Markdown plugin uses a data processor (implemented by the GFMDataProcessor class) which changes the default output from HTML to Markdown. This means that you can set or get data from the editor in the Markdown format:

editor.getData(); // -> 'This is [CKEditor&nbsp;5](https://ckeditor.com).'

editor.setData( 'This is **bold**.' );

The data processor outputs the GFM Markdown syntax. “GFM” stands for “GitHub Flavored Markdown” – a Markdown dialect used by GitHub. Markdown lacks any formal specification (although the CommonMark initiative aims to close this gap) and has many dialects, often incompatible with one another.

When converting the output produced by this data processor, make sure to use a compatible Markdown-to-HTML converter (for example, the marked library).

While the CKEditor 5 architecture supports changing the data format, in most scenarios we do recommend sticking to the default format which is HTML (supported by the HtmlDataProcessor). HTML remains the best standard for rich-text data.

And please do remember – using Markdown does not automatically make your application or website secure.

# Known issues

Please bear in mind that the Markdown data processor does not support all rich text features. The Markdown syntax is really simple and only supports limited formatting options.

This means that advanced formatting like list styles, table styles, or page break markers will be stripped in the effecting data. These are not supported by Markdown and therefore cannot be converted from HTML to Markdown.

While the Markdown plugin is stable and ready to use, some issues are still being worked on. Feel free to upvote 👍 these on GitHub if you would like to see this introduced.

Pasting Markdown-formatted content does not automatically convert the pasted syntax markers into properly formatted content. GitHub issues: #2321, #2322.
The Markdown code generated with the Markdown output feature will not properly render nested tables. GitHub issue: #9475.

Some other ways to output the edited content include:

Source editing – Allows for Markdown source edition if configured accordingly.
Export to Word – Generate editable .docx files out of your editor-created content.
Export to PDF – Generate portable PDF files out of your editor-created content.
Autoformatting – Use Markdown syntax shortcodes to automatically format your content as you type!
Paste Markdown – Paste Markdown-formatted content straight into the editor.

# Contribute

The source code of this feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-markdown-gfm.

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.

With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.

Markdown output

# Demo

# Additional feature information

# Installation

# Extending formatting support

# The Markdown data processor

# Known issues

# Related features

# Contribute