# Autoformatting

The autoformat feature lets you quickly format your content with Markdown-like shortcodes. This way you do not need to use toolbar buttons or dropdowns for the most common formatting features.

<a id="demo">

## Demo

Test the autoformatting feature in the editor below. Try using Markdown shortcodes while typing. For example:

1. Start a new line.
2. Press `#` and then `Space`.

The line will automatically turn into a heading.

If needed, you can revert the automatic change by pressing `Backspace`.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="block-formatting">

## Block formatting

The following block formatting options are available:

* [Bulleted list](lists/lists.md) – Start a line with `*` or `-` followed by a space.
* [Numbered list](lists/lists.md) – Start a line with any number followed by `.` or `)` and a space.
* [To-do list](lists/todo-lists.md) – Start a line with `[ ]` or `[x]` followed by a space to insert an unchecked or checked list item, respectively.
* [Headings](headings.md) – Start a line with `#` or `##` or `###` followed by a space to create a heading 1, heading 2, or heading 3 (up to heading 6 if [`options`](../api/module_heading_headingconfig-HeadingConfig.md#member-options) defines more headings).
* [Block quote](block-quote.md) – Start a line with `>` followed by a space.
* [Code block](code-blocks.md) – Start a line with `` `backticks` ``.
* [Horizontal line](horizontal-line.md) – Start a line with `---`.

<a id="inline-formatting">

## Inline formatting

The following [basic styles](basic-styles.md) inline formatting options are available:

* Bold – Type `**text**` or `__text__`,
* Italic – Type `*text*` or `_text_`,
* Code – Type `` `text` ``,
* Strikethrough – Type `~~text~~`.

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, Autoformat } from 'ckeditor5';

ClassicEditor.
	create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Autoformat, /* ... */ ],
		toolbar: [ /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Autoformat } = CKEDITOR;

ClassicEditor.
	create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Autoformat, /* ... */ ],
		toolbar: [ /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

> **Note**
>
> Remember to add proper features to the editor configuration. Autoformatting will be enabled only for the commands that are included in the actual configuration. For example, `bold` autoformatting will not work if there is no `bold` command registered in the editor.

<a id="creating-custom-autoformatters">

## Creating custom autoformatters

The [`Autoformat`](../api/module_autoformat_autoformat-Autoformat.md) feature bases on [`blockAutoformatEditing`](../api/module_autoformat_blockautoformatediting.md#function-blockAutoformatEditing) and [`inlineAutoformatEditing`](../api/module_autoformat_inlineautoformatediting.md#function-inlineAutoformatEditing) tools to create the autoformatters mentioned above.

You can use these tools to create your own autoformatters. Check the [`Autoformat` feature’s code](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-autoformat/src/autoformat.ts) as an example.

<a id="known-issues">

## Known issues

While the autoformatting feature is stable and ready to use, some issues were reported for it. Feel free to upvote 👍 them on GitHub if they are important for you:

* Pasting Markdown-formatted content does not automatically convert the pasted syntax markers into properly formatted content. GitHub issues: [#2321](https://github.com/ckeditor/ckeditor5/issues/2321), [#2322](https://github.com/ckeditor/ckeditor5/issues/2322).
* Setting a specific code block language is not supported yet (it defaults to plain text on insertion). GitHub issue: [#8598](https://github.com/ckeditor/ckeditor5/issues/8598).

<a id="related-features">

## Related features

In addition to enabling automatic text formatting, you may want to check the following productivity features:

* [Automatic text transformation](text-transformation.md) – Enables automatic turning of snippets such as `(tm)` into `™` and `"foo"` into `“foo”`.
* [Autolink](link.md#autolink-feature) – Turns the links and email addresses typed or pasted into the editor into active URLs.
* [Mentions](mentions.md) – Brings support for smart autocompletion.
* [Slash commands](slash-commands.md) – Allows to execute a predefined command by writing its name or alias directly in the editor.
* [Markdown output](markdown.md) – Lets the user output the content as Markdown instead of HTML and [use CKEditor 5 as a WYSIWYG Markdown editor](https://ckeditor.com/blog/CKEditor-5-the-best-open-source-Markdown-editor/).
* [Source editing](source-editing/source-editing.md#markdown-source-view) – Allows for Markdown source edition if configured accordingly.

Coupled with the [Markdown output](markdown.md) feature, the autoformatting feature allows for the full-fledged Markdown WYSIWYG editing experience, as described in the [“CKEditor 5: the best open source Markdown editor”](https://ckeditor.com/blog/CKEditor-5-the-best-open-source-Markdown-editor/) blog post. Visit the [free online Markdown editor](https://onlinemarkdowneditor.dev/) to see this solution implemented.

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-autoformat>.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)