diff --git a/components/ContentRenderer/ContentRenderer.module.scss b/components/ContentRenderer/ContentRenderer.module.scss
index 41e7ab87..69cb7079 100644
--- a/components/ContentRenderer/ContentRenderer.module.scss
+++ b/components/ContentRenderer/ContentRenderer.module.scss
@@ -108,7 +108,7 @@
         }
 
         mark {
-            background-color: color-mix(in srgb, var(--prezly-accent-color) 24%, transparent);
+            @include highlighted-text;
         }
 
         .prezly-slate-button-block {
diff --git a/modules/Story/HeaderRenderer/HeaderRenderer.module.scss b/modules/Story/HeaderRenderer/HeaderRenderer.module.scss
index 69caaffd..26813c6c 100644
--- a/modules/Story/HeaderRenderer/HeaderRenderer.module.scss
+++ b/modules/Story/HeaderRenderer/HeaderRenderer.module.scss
@@ -8,5 +8,9 @@
             color: $color-base-700;
         }
         /* stylelint-enable selector-class-pattern */
+
+        mark {
+            @include highlighted-text;
+        }
     }
 }
diff --git a/styles/mixins/_highlighted-text.scss b/styles/mixins/_highlighted-text.scss
new file mode 100644
index 00000000..3dee5469
--- /dev/null
+++ b/styles/mixins/_highlighted-text.scss
@@ -0,0 +1,3 @@
+@mixin highlighted-text {
+    background-color: color-mix(in srgb, var(--prezly-accent-color) 24%, transparent);
+}
diff --git a/styles/mixins/index.scss b/styles/mixins/index.scss
index b7dd3374..6416f787 100644
--- a/styles/mixins/index.scss
+++ b/styles/mixins/index.scss
@@ -1,6 +1,7 @@
 @import "accessibility";
 @import "border-radius";
 @import "container";
+@import "highlighted-text";
 @import "images";
 @import "line-clamp";
 @import "responsive";