Subscript

The Subscript mark applies subscript formatting to text. It renders as <sub> and parses <sub> tags and CSS vertical-align: sub. Subscript and Superscript are mutually exclusive: applying one automatically removes the other. Not included in StarterKit - must be added separately.

When to use

Use Subscript when you need:

Chemical formulas (H₂O, CO₂)
Mathematical notation (xₙ, aᵢ)
Footnote references when rendered numerically

Notes:

Subscript and Superscript are mutually exclusive: applying one removes the other on the same range
Not in StarterKit; add explicitly when scientific or mathematical content is expected

Live Playground

Select text and apply subscript with buttons or keyboard shortcut (Cmd+, / Ctrl+,).

Themed
Headless

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

Click to try it out

Plain editor without the theme. The buttons above call toggleSubscript(), setSubscript(), and unsetSubscript() directly.

Click to try it out

Usage

Subscript is not included in StarterKit. Add it separately:

import { Document, Paragraph, Text, Subscript } 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, Subscript],
  content: '<p>Water is H<sub>2</sub>O.</p>',
});

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

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Subscript } 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, Subscript];
  content = '<p>Water is H<sub>2</sub>O.</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, Subscript } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Subscript]}
      content="<p>Water is H<sub>2</sub>O.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

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

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

<template>
  <Domternal :extensions="extensions" content="<p>Water is H<sub>2</sub>O.</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
  </Domternal>
</template>

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

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Subscript],
  content: '<p>Water is H<sub>2</sub>O.</p>',
});

// Toggle subscript programmatically
editor.chain().focus().toggleSubscript().run();

Schema

Property	Value
ProseMirror name	`subscript`
Type	Mark
HTML tag	`<sub>`
Group	`formatting`
Excludes	`''` (nothing: sub/superscript mutual exclusion lives in the commands, see below)

The two rows work in opposite directions. Subscript excludes nothing itself, but it carries the formatting group, and inline Code declares excludes: 'formatting', so code strips subscript from the range it is applied to and <code><sub>2</sub></code> parses as plain code. See Excluding third-party marks.

Parsing rules

Source	Condition
`<sub>`	Always
CSS `vertical-align`	Value is `sub`

Options

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

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

const CustomSubscript = Subscript.configure({
  HTMLAttributes: { class: 'my-subscript' },
});

Commands

setSubscript

Applies subscript formatting to the current selection. Automatically removes superscript from the selection first.

editor.commands.setSubscript();

unsetSubscript

Removes subscript formatting from the current selection.

editor.commands.unsetSubscript();

toggleSubscript

Toggles subscript formatting on the current selection. Automatically removes superscript before applying subscript.

editor.commands.toggleSubscript();

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

Keyboard shortcuts

Key	Action
`Mod-,`	Toggle subscript (`toggleSubscript`)

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

Input rules

Subscript has no input rules. Use the keyboard shortcut or toolbar button to apply formatting.

Subscript registers a button in the toolbar with the name subscript in group format at priority 140.

Item	Type	Command	Icon	Shortcut	Active when
Subscript	`button`	`toggleSubscript`	`textSubscript`	`Mod-,`	Subscript mark is active on selection

Exports

import { Subscript } from '@domternal/core';
import type { SubscriptOptions } from '@domternal/core';

Export	Type	Description
`Subscript`	Mark extension	The subscript mark extension
`SubscriptOptions`	TypeScript type	Options for `Subscript.configure()`

Source

@domternal/core - Subscript.ts