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

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

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;