diff --git a/docs/src/demos/Extensions/Highlight/index.vue b/docs/src/demos/Extensions/Highlight/index.vue
index d7b3ea50a..bf881cd4d 100644
--- a/docs/src/demos/Extensions/Highlight/index.vue
+++ b/docs/src/demos/Extensions/Highlight/index.vue
@@ -38,6 +38,7 @@ export default {
       content: `
           <p>This isn’t highlighted.</s></p>
           <p><mark>But this one is.</mark></p>
+          <p><mark style="background-color: pink;">And this is highlighted too, but in a different color.</mark></p>
         `,
     })
   },
diff --git a/packages/extension-highlight/index.ts b/packages/extension-highlight/index.ts
index 30c71eb66..fcf8aa162 100644
--- a/packages/extension-highlight/index.ts
+++ b/packages/extension-highlight/index.ts
@@ -13,12 +13,25 @@ declare module '@tiptap/core/src/Editor' {
 export default new Mark()
   .name('highlight')
   .schema(() => ({
+    attrs: {
+      color: {
+        default: null,
+      },
+    },
     parseDOM: [
       {
         tag: 'mark',
+        getAttrs: node => {
+          return {
+            color: (node as HTMLElement).style.backgroundColor,
+          }
+        },
       },
     ],
-    toDOM: () => ['mark', 0],
+    toDOM: node => ['mark', {
+      ...node.attrs,
+      style: node.attrs.color && `background-color: ${node.attrs.color};`,
+    }, 0],
   }))
   .commands(({ name }) => ({
     highlight: () => ({ commands }) => {