chore(semantic): use mark for highlights

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

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>`,
                 }
               },
             ])

quartz/plugins/transformers/roam.ts

@@ -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>`,
             }),
           ])
 

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;