tiptap/docs/api/nodes/heading.md

# Heading
[![Version](https://img.shields.io/npm/v/@tiptap/extension-heading.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-heading)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-heading.svg)](https://npmcharts.com/compare/@tiptap/extension-heading?minimal=true)

The Heading extension adds support for headings of different levels. Headings are rendered with `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` HTML tags. By default all six heading levels (or styles) are enabled, but you can pass an array to only allow a few levels. Check the usage example to see how this is done.

Type <code>#&nbsp;</code> at the beginning of a new line and it will magically transform to a heading, same for <code>##&nbsp;</code>, <code>###&nbsp;</code>, <code>####&nbsp;</code>, <code>#####&nbsp;</code> and <code>######&nbsp;</code>.

## Installation
```bash
# with npm
npm install @tiptap/extension-heading

# with Yarn
yarn add @tiptap/extension-heading
```

## Settings
| Option         | Type     | Default              | Description                                                           |
| -------------- | -------- | -------------------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}`                 | Custom HTML attributes that should be added to the rendered HTML tag. |
| levels         | `Array`  | `[1, 2, 3, 4, 5, 6]` | Specifies which heading levels are supported.                         |

## Commands
| Command | Parameters | Description                                      |
| ------- | ---------- | ------------------------------------------------ |
| heading | level      | Creates a heading node with the specified level. |

## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Alt`&nbsp;`1-6`
* macOS: `Cmd`&nbsp;`Alt`&nbsp;`1-6`

## Source code
[packages/extension-heading/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/)

## Usage
<tiptap-demo name="Nodes/Heading"></tiptap-demo>
move all extensions to separate pages 2020-08-19 03:39:41 +08:00			`# Heading`
docs: add badges to all extensions 2021-01-25 17:35:52 +08:00			`[![Version](https://img.shields.io/npm/v/@tiptap/extension-heading.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-heading)`
			`[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-heading.svg)](https://npmcharts.com/compare/@tiptap/extension-heading?minimal=true)`

replace headline with heading 2020-09-27 16:40:08 +08:00			The Heading extension adds support for headings of different levels. Headings are rendered with `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` HTML tags. By default all six heading levels (or styles) are enabled, but you can pass an array to only allow a few levels. Check the usage example to see how this is done.
add more content to the heading 2020-09-11 03:13:18 +08:00
replace headline with heading 2020-09-27 16:40:08 +08:00			`Type <code># </code> at the beginning of a new line and it will magically transform to a heading, same for <code>## </code>, <code>### </code>, <code>#### </code>, <code>##### </code> and <code>###### </code>.`
move all extensions to separate pages 2020-08-19 03:39:41 +08:00
add installation instructions to all extensions 2020-09-23 15:52:04 +08:00			`## Installation`
			```bash
update content 2020-10-30 21:24:16 +08:00			`# with npm`
add installation instructions to all extensions 2020-09-23 15:52:04 +08:00			`npm install @tiptap/extension-heading`

update content 2020-10-30 21:24:16 +08:00			`# with Yarn`
add installation instructions to all extensions 2020-09-23 15:52:04 +08:00			`yarn add @tiptap/extension-heading`
			```

a ton of improvements 2020-09-23 18:03:03 +08:00			`## Settings`
docs: add HTMLAttributes 2020-11-18 19:12:34 +08:00			`\| Option \| Type \| Default \| Description \|`
			`\| -------------- \| -------- \| -------------------- \| --------------------------------------------------------------------- \|`
			\| HTMLAttributes \| `Object` \| `{}` \| Custom HTML attributes that should be added to the rendered HTML tag. \|
			\| levels \| `Array` \| `[1, 2, 3, 4, 5, 6]` \| Specifies which heading levels are supported. \|
move all extensions to separate pages 2020-08-19 03:39:41 +08:00
improve the extensions documentation 2020-08-20 21:33:16 +08:00			`## Commands`
move everything around, add more content and a first test for images 2020-11-03 23:43:35 +08:00			`\| Command \| Parameters \| Description \|`
			`\| ------- \| ---------- \| ------------------------------------------------ \|`
			`\| heading \| level \| Creates a heading node with the specified level. \|`
move all extensions to separate pages 2020-08-19 03:39:41 +08:00
rename keybindings to keyboard shortcuts 2020-09-10 17:24:33 +08:00			`## Keyboard shortcuts`
replace non-breaking-space with html entity 2020-09-27 17:01:25 +08:00			* Windows/Linux: `Control` `Alt` `1-6`
			* macOS: `Cmd` `Alt` `1-6`
move all extensions to separate pages 2020-08-19 03:39:41 +08:00
minor improvements 2020-09-21 22:59:28 +08:00			`## Source code`
replace link to GitHub repository 2021-04-21 21:31:11 +08:00			`[packages/extension-heading/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/)`
move all extensions to separate pages 2020-08-19 03:39:41 +08:00
add more content to the heading page 2020-09-10 23:10:20 +08:00			`## Usage`
replace demo component with custom element 2021-08-26 05:10:20 +08:00			`<tiptap-demo name="Nodes/Heading"></tiptap-demo>`