Add withClass annotation

Author: pomber

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

@@ -93,3 +93,21 @@ function lorem(ipsum, dolor = 1) {
   return $sit and consectetur(ipsum) or []
 }
 ```
+
+With class
+
+```js
+function lorem(ipsum, dolor = 1) {
+  // withClass[15:19] annotation-class
+  const sit = ipsum == null && 0
+  // withClass(1:2) annotation-class
+  dolor = sit - amet(dolor)
+  return sit ? consectetur(ipsum) : []
+}
+
+function adipiscing(...elit) {
+  console.log("hover me")
+  // withClass annotation-class
+  return elit.map(ipsum => ipsum.sit)
+}
+```

packages/mdx/pages/styles.css

@@ -33,113 +33,6 @@ div#__next > div {
   color: black;
 }
 
-/* 
-nav {
-  height: 40px;
-  overflow: hidden;
+.annotation-class span {
+  text-decoration: line-through;
 }
-
-main {
-  flex: 1;
-  overflow: auto;
-} */
-
-/* main */
-/* 
-.columns {
-  display: flex;
-  min-height: 100%;
-}
-
-.column {
-  margin-left: auto;
-  margin-right: auto;
-  flex: 1;
-  box-sizing: border-box;
-  padding: 0 6px 6px;
-  min-width: 400px;
-  max-width: 800px;
-}
-
-.column > h2 {
-  padding: 6px;
-  margin: 0;
-  text-align: center;
-  font-size: 20px;
-  color: #ccc;
-}
-
-.column > .content {
-  padding: 10px 18px;
-  background-color: #fff;
-  border-radius: 6px;
-}
-
-
-nav {
-  display: flex;
-  align-items: center;
-  background-color: #222;
-  color: #ccc;
-}
-
-nav h1 {
-  margin: 0 16px 0 24px;
-}
-nav h1 a {
-  color: unset;
-  text-decoration: none;
-}
-
-nav .version {
-  color: #aaa;
-  font-size: 14px;
-}
-
-.radio {
-  text-align: center;
-  border: 1px solid #222;
-  border-radius: 4px;
-  overflow: hidden;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 6px;
-}
-.radio button {
-  border: none;
-  background-color: #444;
-  color: #ccc;
-  height: 24px;
-}
-.radio button.selected {
-  background-color: #fafafa;
-  color: #222;
-}
-
-nav label {
-  margin-right: 24px;
-} */
-
-/* nav select {
-  margin-left: 6px;
-  border-radius: 4px;
-  background-color: #fafafa;
-  height: 24px;
-} */
-
-/* result */
-/* 
-.result {
-  min-width: 900px;
-  width: 900px;
-  max-width: 900px;
-}
-
-pre.shiki {
-  white-space: pre-wrap;
-}
-
-.tailwind-font code {
-  font-family: ui-monospace, SFMono-Regular, Consolas,
-    "Liberation Mono", Menlo, monospace;
-} */

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

@@ -15,6 +15,7 @@ export const annotationsMap: Record<
   label: Label,
   link: CodeLink,
   mark: Mark,
+  withClass: WithClass,
 }
 
 function Mark({
@@ -97,6 +98,25 @@ function Box({
   )
 }
 
+function WithClass({
+  children,
+  data,
+  style,
+  theme,
+}: {
+  data: any
+  children: React.ReactNode
+  style?: React.CSSProperties
+  theme: any
+}) {
+  const className = data as string
+  return (
+    <span style={style} className={className}>
+      {children}
+    </span>
+  )
+}
+
 function Background({
   children,
   data,