From 629da62b76975c83e2cb27ec82737285510c8a94 Mon Sep 17 00:00:00 2001
From: Aaron Pham <contact@aarnphm.xyz>
Date: Thu, 28 Nov 2024 20:28:54 -0500
Subject: [PATCH] chore(semantic): use mark for highlights

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
---
 quartz/plugins/transformers/ofm.ts  | 2 +-
 quartz/plugins/transformers/roam.ts | 4 ++--
 quartz/styles/base.scss             | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

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;