chore(semantic): use mark for highlights

Signed-off-by: Aaron Pham <[email protected]>
jackyzha0 · Nov 29, 2024 · 629da62 · 629da62
1 parent 1a4cfa6
commit 629da62
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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
@@ -18,7 +18,7 @@ section {
   color: var(--darkgray);
 }
 
-.text-highlight {
+mark {
   background-color: var(--textHighlight);
   padding: 0 0.1rem;
   border-radius: 5px;