Italic

The Italic mark applies italic formatting to text. It renders as  and parses , , and CSS font-style: italic. Included in StarterKit by default.

When to use

Use Italic when you need:

A standard  mark with Cmd+I, *single asterisks*, or _underscores_
Pasted content from any source to land correctly (parses both  and  tags plus inline font-style: italic)
Programmatic control via setItalic, unsetItalic, and toggleItalic commands

Notes:

Italic renders  (semantic emphasis), not  (presentational), to match accessibility best practices
Both * and _ markdown rules fire; choose either or both depending on your project style

Live Playground

Select text and apply italic with buttons, keyboard shortcut (Cmd+I / Ctrl+I), or type *text* to trigger the input rule.

Themed
Headless

With the default theme enabled. Click the I toolbar button or use Cmd+I / Ctrl+I.

Click to try it out

Plain editor without the theme. The buttons above call toggleItalic(), setItalic(), and unsetItalic() directly.

Click to try it out

Usage

Italic is included in StarterKit, so it works out of the box. To use it standalone:

import { Document, Paragraph, Text, Italic } from '@domternal/core';
import { DomternalEditor, DomternalToolbar } from '@domternal/vanilla';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;
const toolbarEl = document.createElement('div');
editorEl.before(toolbarEl);

const dm = new DomternalEditor(editorEl, {
  extensions: [Document, Paragraph, Text, Italic],
  content: '<p>This is <em>italic</em> text.</p>',
});

new DomternalToolbar(toolbarEl, { editor: dm.editor });

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Italic } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent, DomternalToolbarComponent],
  templateUrl: './editor.html',
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Paragraph, Text, Italic];
  content = '<p>This is <em>italic</em> text.</p>';
}

@if (editor(); as ed) {
  <domternal-toolbar [editor]="ed" />
}
<domternal-editor
  [extensions]="extensions"
  [content]="content"
  (editorCreated)="editor.set($event)"
/>

import { Domternal } from '@domternal/react';
import { Document, Paragraph, Text, Italic } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Italic]}
      content="<p>This is <em>italic</em> text.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { Document, Paragraph, Text, Italic } from '@domternal/core';

const extensions = [Document, Paragraph, Text, Italic];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>This is <em>italic</em> text.</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
  </Domternal>
</template>

import { Editor, Document, Paragraph, Text, Italic } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Italic],
  content: '<p>This is <em>italic</em> text.</p>',
});

// Toggle italic programmatically
editor.chain().focus().toggleItalic().run();

To disable Italic in StarterKit:

StarterKit.configure({ italic: false })

Schema

Property	Value
ProseMirror name	`italic`
Type	Mark
HTML tag	`<em>`
Group	`formatting`

The formatting group is what inline Code strips: Code declares excludes: 'formatting' rather than listing mark names, so applying code to italic text drops the italic, and <code>x</code> parses as plain code. A mark of your own joins the same exclusion by declaring the same group, see Excluding third-party marks.

Parsing rules

Italic parses from multiple HTML sources for maximum compatibility:

Source	Condition
`<em>`	Always
`<i>`	Unless `font-style: normal` (Google Docs compatibility)
CSS `font-style`	Value is `italic` (case-insensitive)

Options

Option	Type	Default	Description
`HTMLAttributes`	`Record<string, unknown>`	`{}`	Custom HTML attributes added to the rendered `<em>` element

import { Italic } from '@domternal/core';

const CustomItalic = Italic.configure({
  HTMLAttributes: { class: 'my-italic' },
});

Commands

setItalic

Applies italic formatting to the current selection.

editor.commands.setItalic();

unsetItalic

Removes italic formatting from the current selection.

editor.commands.unsetItalic();

toggleItalic

Toggles italic formatting on the current selection. Applies italic if not active, removes it if active.

editor.commands.toggleItalic();

// With chaining
editor.chain().focus().toggleItalic().run();

Keyboard shortcuts

Key	Action
`Mod-I`	Toggle italic (`toggleItalic`)

Mod is Cmd on macOS and Ctrl on Windows/Linux.

Input rules

Input	Result
`text`	Wraps text in italic
`_text_`	Wraps text in italic

Type the closing * or _ to trigger the conversion. The markers are removed and the text between them becomes italic.

The rule keeps the marks the matched text already had, so typing *text* inside a link, or in the middle of commented text, no longer punches an unmarked hole into that mark. Schema exclusion still wins over preservation: the existing marks are carried through first and the italic mark is added on top, so any preserved mark that Italic excludes is dropped at that point.

Italic registers a button in the toolbar with the name italic in group format at priority 190.

Item	Type	Command	Icon	Shortcut	Active when
Italic	`button`	`toggleItalic`	`textItalic`	`Mod-I`	Italic mark is active on selection

Exports

import { Italic } from '@domternal/core';
import type { ItalicOptions } from '@domternal/core';

Export	Type	Description
`Italic`	Mark extension	The italic mark extension
`ItalicOptions`	TypeScript type	Options for `Italic.configure()`

Source

@domternal/core - Italic.ts