# Basic text styles

The basic styles feature lets you apply the most essential formatting such as bold, italic, underline, strikethrough, subscript, superscript, and code. Coupled with more [formatting features](#related-features), these serve as a base for any WYSIWYG editor toolset.

<a id="demo">

## Demo

You may apply basic formatting options with toolbar buttons. You can also make use of the [autoformatting feature](autoformat.md) that changes Markdown code to formatted text as you type. Use one of these to format text:

* Bold – Use the bold toolbar button or type `**text**` or `__text__`.
* Italic – Use the italic toolbar button or type `*text*` or `_text_`.
* Code – Use the code toolbar button or type `` `text` ``.
* Strikethrough – Use the strikethrough toolbar button or type `~~text~~`.

<!-- 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="available-text-styles">

## Available text styles

| Style feature                                                                | [Command](../framework/architecture/core-editor-architecture.md#commands) name | [Toolbar](../getting-started/setup/toolbar.md) component name | Output element           |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------- | ------------------------ |
| [`Bold`](../api/module_basic-styles_bold-Bold.md)                            | `'bold'`                                                                       | `'bold'`                                                      | `<strong>bold</strong>`  |
| [`Italic`](../api/module_basic-styles_italic-Italic.md)                      | `'italic'`                                                                     | `'italic'`                                                    | `<i>italic</i>`          |
| [`Underline`](../api/module_basic-styles_underline-Underline.md)             | `'underline'`                                                                  | `'underline'`                                                 | `<u>underline</u>`       |
| [`Strikethrough`](../api/module_basic-styles_strikethrough-Strikethrough.md) | `'strikethrough'`                                                              | `'strikethrough'`                                             | `<s>strikethrough</s>`   |
| [`Code`](../api/module_basic-styles_code-Code.md)                            | `'code'`                                                                       | `'code'`                                                      | `<code>code</code>`      |
| [`Subscript`](../api/module_basic-styles_subscript-Subscript.md)             | `'subscript'`                                                                  | `'subscript'`                                                 | `<sub>subscript</sub>`   |
| [`Superscript`](../api/module_basic-styles_superscript-Superscript.md)       | `'superscript'`                                                                | `'superscript'`                                               | `<sup>superscript</sup>` |

> **Note**
>
> The [`Code`](../api/module_basic-styles_code-Code.md) feature provides support for inline code formatting. To create blocks of pre-formatted code with a specific programming language assigned, use the [code block feature](code-blocks.md).

<a id="supported-input">

### Supported input

By default, each feature can upcast more than one type of content. Here is the full list of elements supported by each feature, either when pasting from the clipboard, loading data on start, or using the [data API](../api/module_core_editor_editor-Editor.md#function-setData).

| Style feature                                                                | Supported input elements                                                                             |
| ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [`Bold`](../api/module_basic-styles_bold-Bold.md)                            | `<strong>`, `<b>`, `<* style="font-weight: bold">` (or numeric values that are greater or equal 600) |
| [`Italic`](../api/module_basic-styles_italic-Italic.md)                      | `<i>`, `<em>`, `<* style="font-style: italic">`                                                      |
| [`Underline`](../api/module_basic-styles_underline-Underline.md)             | `<u>`, `<* style="text-decoration: underline">`                                                      |
| [`Strikethrough`](../api/module_basic-styles_strikethrough-Strikethrough.md) | `<s>`, `<del>`, `<strike>`, `<* style="text-decoration: line-through">`                              |
| [`Code`](../api/module_basic-styles_code-Code.md)                            | `<code>`, `<* style="word-wrap: break-word">`                                                        |
| [`Subscript`](../api/module_basic-styles_subscript-Subscript.md)             | `<sub>`, `<* style="vertical-align: sub">`                                                           |
| [`Superscript`](../api/module_basic-styles_superscript-Superscript.md)       | `<sup>`, `<* style="vertical-align: super">`                                                         |

<a id="typing-around-inline-code">

## Typing around inline code

CKEditor 5 allows for typing both at the inner and outer boundaries of code to make editing easier for the users.

**To type inside a code element**, move the caret to its (start or end) boundary. As long as the code remains highlighted (by default: less transparent gray), typing and applying formatting will be done within its boundaries:

**To type before or after a code element**, move the caret to its boundary, then press the Arrow key (`→` or `←`) once. The code is no longer highlighted and whatever text you type or formatting you apply will not be enclosed by the code element:

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the plugins which you need to your plugin list. Then, simply configure the toolbar items to make the features available in the user interface.

**NPM**

```js
import { ClassicEditor, Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline ],
		toolbar: {
			items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code', 'subscript', 'superscript'  ]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline ],
		toolbar: {
			items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code', 'subscript', 'superscript'  ]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="related-features">

## Related features

Check out also these CKEditor 5 features to gain better control over your content style and format:

* [Font styles](font.md) – Easily and efficiently control the font [family](font.md#configuring-the-font-family-feature), [size](font.md#configuring-the-font-size-feature), [text or background color](font.md#configuring-the-font-color-and-font-background-color-features).
* [Styles](style.md) – Apply pre-configured styles to existing elements in the editor content.
* [Text alignment](text-alignment.md) – Because it does matter whether the content is left, right, centered, or justified.
* [Case change](case-change.md) – Turn a text fragment or block into uppercase, lowercase, or title case.
* [Code blocks](code-blocks.md) – Insert longer, multiline code listings, expanding the inline code style greatly.
* [Highlight](highlight.md) – Mark important words and passages, aiding a review or drawing attention to specific parts of the content.
* [Format painter](format-painter.md) – Easily copy text formatting and apply it in a different place in the edited document.
* [Autoformatting](autoformat.md) – Format the text on the go with Markdown code.
* [Remove format](remove-format.md) – Easily clean basic text formatting.

> **Note**
>
> You can remove all basic text styles with the [remove format](remove-format.md) feature.

<a id="common-api">

## Common API

Each style feature registers a [command](#available-text-styles) which can be executed from code. For example, the following snippet will apply the bold style to the current selection in the editor:

```js
editor.execute( 'bold' );
```

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

<a id="contribute">

## Contribute

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

---

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