Add class parmeter to mark annotation

Author: pomber

packages/mdx/dev/content/comment-annotations.mdx

@@ -25,7 +25,7 @@ Same with other annotations like `mark` and `box`.
 ```js
 // mark(1:2)
 function foo() {
-  // box[6:9]
+  // mark[6:9] mark-box
   console.log("hover me")
   return 8
 }
@@ -35,7 +35,7 @@ You can pass a string parameter to comment annotations. For `mark` and `box`, it
 
 ```js index.js
 function lorem(ipsum, dolor = 1) {
-  // mark(1:3) linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%)
+  // mark(1:3) mark-red-background
   const sit = ipsum == null && 0
   dolor = sit - amet(dolor)
   return sit ? consectetur(ipsum) : []
@@ -47,7 +47,7 @@ function lorem(ipsum, dolor = 1) {
 // å
 function adipiscing(...elit) {
   console.log(elit)
-  // box[19:36] aqua
+  // mark[19:36]
   return elit.map(ipsum => ipsum.sit)
 }
 ```
@@ -85,7 +85,7 @@ def lorem(ipsum, dolor = 1):
 ```bash
 function lorem(ipsum, dolor = 1) {
   # focus(1:3)
-  # box[3:7]
+  # mark[3:7]
   local sit=0
   # label something something
   dolor=$((sit - amet(dolor)))

packages/mdx/pages/styles.css

@@ -36,3 +36,19 @@ div#__next > div {
 .annotation-class span {
   text-decoration: line-through;
 }
+
+.mark-red-background {
+  background: #550000 !important;
+}
+
+.mark-red-background .ch-code-multiline-mark-border {
+  background: #bb0000 !important;
+}
+
+.mark-box {
+  background: #000 !important;
+}
+
+.mark-box * {
+  color: #0f0 !important;
+}

packages/mdx/src/mdx-client/annotations.tsx

@@ -36,9 +36,11 @@ function MultilineMark({
   style?: React.CSSProperties
   theme?: any
 }) {
-  const bg =
-    data ||
-    getColor(theme, ColorName.RangeHighlightBackground)
+  const className = `ch-code-multiline-mark ` + (data ?? "")
+  const bg = getColor(
+    theme,
+    ColorName.RangeHighlightBackground
+  )
   const border = getColor(
     theme,
     ColorName.EditorInfoForeground
@@ -47,7 +49,7 @@ function MultilineMark({
   return (
     <div
       style={{ ...style, background: bg }}
-      className="ch-code-multiline-mark"
+      className={className}
     >
       <span
         className="ch-code-multiline-mark-border"
@@ -68,19 +70,15 @@ function InlineMark({
   theme: any
 }) {
   const bg =
-    data && typeof data === "string"
-      ? data
-      : tryGuessColor(children) ||
-        transparent(
-          getColor(theme, ColorName.CodeForeground),
-          0.2
-        )
+    tryGuessColor(children) ||
+    transparent(
+      getColor(theme, ColorName.CodeForeground),
+      0.2
+    )
 
+  const className = "ch-code-inline-mark " + (data ?? "")
   return (
-    <span
-      className="ch-code-inline-mark"
-      style={{ background: bg }}
-    >
+    <span className={className} style={{ background: bg }}>
       {children}
     </span>
   )