diff --git a/docs/src/demos/Extensions/Highlight/index.spec.js b/docs/src/demos/Extensions/Highlight/index.spec.js
new file mode 100644
index 00000000..eb2f7e0c
--- /dev/null
+++ b/docs/src/demos/Extensions/Highlight/index.spec.js
@@ -0,0 +1,51 @@
+context('/api/extensions/highlight', () => {
+ before(() => {
+ cy.visit('/api/extensions/highlight')
+ })
+
+ beforeEach(() => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.setContent('
Example Text
')
+ editor.selectAll()
+ })
+ })
+
+ it('the button should highlight the selected text', () => {
+ cy.get('.demo__preview button:first')
+ .click()
+
+ cy.get('.ProseMirror')
+ .find('mark')
+ .should('contain', 'Example Text')
+ })
+
+ it('the button should toggle the selected text highlighted', () => {
+ cy.get('.demo__preview button:first')
+ .click()
+
+ cy.get('.ProseMirror')
+ .type('{selectall}')
+
+ cy.get('.demo__preview button:first')
+ .click()
+
+ cy.get('.ProseMirror')
+ .find('mark')
+ .should('not.exist')
+ })
+
+ it('the keyboard shortcut should highlight the selected text', () => {
+ cy.get('.ProseMirror')
+ .trigger('keydown', { modKey: true, key: 'e' })
+ .find('mark')
+ .should('contain', 'Example Text')
+ })
+
+ it('the keyboard shortcut should toggle the selected text highlighted', () => {
+ cy.get('.ProseMirror')
+ .trigger('keydown', { modKey: true, key: 'e' })
+ .trigger('keydown', { modKey: true, key: 'e' })
+ .find('mark')
+ .should('not.exist')
+ })
+})
diff --git a/docs/src/demos/Extensions/Highlight/index.vue b/docs/src/demos/Extensions/Highlight/index.vue
new file mode 100644
index 00000000..d7b3ea50
--- /dev/null
+++ b/docs/src/demos/Extensions/Highlight/index.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md
index c7dfc51b..82553d88 100644
--- a/docs/src/docPages/api/extensions.md
+++ b/docs/src/docPages/api/extensions.md
@@ -24,6 +24,7 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in
| [Document](/api/extensions/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) |
| [HardBreak](/api/extensions/hard-break) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) |
| [Heading](/api/extensions/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) |
+| [Highlight](/api/extensions/highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/) |
| [History](/api/extensions/history) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/) |
| [HorizontalRule](/api/extensions/horizontal-rule) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) |
| [Italic](/api/extensions/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/) |
diff --git a/docs/src/docPages/api/extensions/highlight.md b/docs/src/docPages/api/extensions/highlight.md
new file mode 100644
index 00000000..418b9e41
--- /dev/null
+++ b/docs/src/docPages/api/extensions/highlight.md
@@ -0,0 +1,31 @@
+# Highlight
+Use this extension to render highlighted text with ``.
+
+## Installation
+```bash
+# With npm
+npm install @tiptap/extension-highlight
+
+# Or: With Yarn
+yarn add @tiptap/extension-highlight
+```
+
+## Settings
+| Option | Type | Default | Description |
+| ------ | ------ | ------- | -------------------------------------------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
+
+## Commands
+| Command | Options | Description |
+| --------- | ------- | ------------------------- |
+| highlight | — | Mark text as highlighted. |
+
+## Keyboard shortcuts
+* Windows/Linux: `Control` `E`
+* macOS: `Cmd` `E`
+
+## Source code
+[packages/extension-highlight/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/)
+
+## Usage
+
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 94e80146..0b6a08c8 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -128,6 +128,8 @@
link: /api/extensions/hard-break
- title: Heading
link: /api/extensions/heading
+ - title: Highlight
+ link: /api/extensions/highlight
- title: History
link: /api/extensions/history
- title: HorizontalRule
diff --git a/packages/extension-highlight/index.ts b/packages/extension-highlight/index.ts
new file mode 100644
index 00000000..30c71eb6
--- /dev/null
+++ b/packages/extension-highlight/index.ts
@@ -0,0 +1,31 @@
+import {
+ Command, Mark,
+} from '@tiptap/core'
+
+export type HighlightCommand = () => Command
+
+declare module '@tiptap/core/src/Editor' {
+ interface Commands {
+ highlight: HighlightCommand,
+ }
+}
+
+export default new Mark()
+ .name('highlight')
+ .schema(() => ({
+ parseDOM: [
+ {
+ tag: 'mark',
+ },
+ ],
+ toDOM: () => ['mark', 0],
+ }))
+ .commands(({ name }) => ({
+ highlight: () => ({ commands }) => {
+ return commands.toggleMark(name)
+ },
+ }))
+ .keys(({ editor }) => ({
+ 'Mod-e': () => editor.highlight(),
+ }))
+ .create()
diff --git a/packages/extension-highlight/package.json b/packages/extension-highlight/package.json
new file mode 100644
index 00000000..ecfc44b0
--- /dev/null
+++ b/packages/extension-highlight/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "@tiptap/extension-highlight",
+ "version": "1.0.0",
+ "source": "index.ts",
+ "main": "dist/tiptap-extension-highlight.js",
+ "umd:main": "dist/tiptap-extension-highlight.umd.js",
+ "module": "dist/tiptap-extension-highlight.mjs",
+ "unpkg": "dist/tiptap-extension-highlight.js",
+ "jsdelivr": "dist/tiptap-extension-highlight.js",
+ "files": [
+ "src",
+ "dist"
+ ],
+ "peerDependencies": {
+ "@tiptap/core": "2.x"
+ }
+}