<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: