diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 624308ca4..08aaa3daa 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -304,7 +304,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
                 const [inner] = capture
                 return {
                   type: "html",
-                  value: `<span class="text-highlight">${inner}</span>`,
+                  value: `<mark>${inner}</mark>`,
                 }
               },
             ])
diff --git a/quartz/plugins/transformers/roam.ts b/quartz/plugins/transformers/roam.ts
index b3be8f542..0af356b11 100644
--- a/quartz/plugins/transformers/roam.ts
+++ b/quartz/plugins/transformers/roam.ts
@@ -93,7 +93,7 @@ function transformSpecialEmbed(node: Paragraph, opts: Options): Html | null {
 
         return {
           type: "html",
-          value: `<iframe 
+          value: `<iframe
             class="external-embed youtube"
             width="600px"
             height="350px"
@@ -164,7 +164,7 @@ export const RoamFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | un
             roamHighlightRegex,
             (_value: string, inner: string) => ({
               type: "html",
-              value: `<span class="text-highlight">${inner}</span>`,
+              value: `<mark>${inner}</mark>`,
             }),
           ])
 
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 34d7e40fa..60f71233f 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -18,7 +18,7 @@ section {
   color: var(--darkgray);
 }
 
-.text-highlight {
+mark {
   background-color: var(--textHighlight);
   padding: 0 0.1rem;
   border-radius: 5px;