diff --git a/docs/src/demos/Marks/Highlight/index.spec.js b/docs/src/demos/Marks/Highlight/index.spec.js
index 4a535fba..6a8447ad 100644
--- a/docs/src/demos/Marks/Highlight/index.spec.js
+++ b/docs/src/demos/Marks/Highlight/index.spec.js
@@ -24,7 +24,7 @@ context('/api/marks/highlight', () => {
 
   it('should highlight the text in a specific color', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.commands.highlight({ color: 'red' })
+      editor.commands.toggleHighlight({ color: 'red' })
 
       cy.get('.ProseMirror')
         .find('mark')
@@ -39,7 +39,7 @@ context('/api/marks/highlight', () => {
         .chain()
         .setContent('<p><mark style="background-color: blue;">Example Text</mark></p>')
         .selectAll()
-        .highlight({ color: 'rgb(255, 0, 0)' })
+        .toggleHighlight({ color: 'rgb(255, 0, 0)' })
         .run()
 
       cy.get('.ProseMirror')
@@ -54,7 +54,7 @@ context('/api/marks/highlight', () => {
         .chain()
         .setContent('<p><mark style="background-color: rgb(255, 0, 0);">Example Text</mark></p>')
         .selectAll()
-        .highlight({ color: 'rgb(255, 0, 0)' })
+        .toggleHighlight({ color: 'rgb(255, 0, 0)' })
         .run()
 
       cy.get('.ProseMirror')
diff --git a/docs/src/demos/Marks/Highlight/index.vue b/docs/src/demos/Marks/Highlight/index.vue
index 51df5e8f..aa45ff17 100644
--- a/docs/src/demos/Marks/Highlight/index.vue
+++ b/docs/src/demos/Marks/Highlight/index.vue
@@ -7,7 +7,7 @@
       highlight (any)
     </button>
     <button
-      @click="editor.chain().focus().highlight({
+      @click="editor.chain().focus().toggleHighlight({
         color: ''
       }).run()"
       :class="{ 'is-active': editor.isActive('highlight', {
@@ -16,22 +16,22 @@
     >
       highlight (default)
     </button>
-    <button @click="editor.chain().focus().highlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
+    <button @click="editor.chain().focus().toggleHighlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
       "red"
     </button>
-    <button @click="editor.chain().focus().highlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
+    <button @click="editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
       red
     </button>
-    <button @click="editor.chain().focus().highlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
+    <button @click="editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
       orange
     </button>
-    <button @click="editor.chain().focus().highlight({ color: '#8ce99a' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#8ce99a' }) }">
+    <button @click="editor.chain().focus().toggleHighlight({ color: '#8ce99a' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#8ce99a' }) }">
       green
     </button>
-    <button @click="editor.chain().focus().highlight({ color: '#74c0fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#74c0fc' }) }">
+    <button @click="editor.chain().focus().toggleHighlight({ color: '#74c0fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#74c0fc' }) }">
       blue
     </button>
-    <button @click="editor.chain().focus().highlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
+    <button @click="editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
       purple
     </button>