Add inline code component

Author: pomber

packages/mdx/src/client/inline-code.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import {
+  EditorTheme,
+  getColor,
+  transparent,
+  ColorName,
+} from "@code-hike/utils"
+
+export function InlineCode({
+  className,
+  codeConfig,
+  children,
+  ...rest
+}: {
+  className: string
+  children?: React.ReactNode
+  codeConfig: { theme: EditorTheme }
+}) {
+  const { theme } = codeConfig
+  return (
+    <span
+      className={
+        "ch-inline-code not-prose" +
+        (className ? " " + className : "")
+      }
+      {...rest}
+    >
+      <code
+        style={{
+          background: transparent(
+            getColor(theme, ColorName.CodeBackground),
+            0.9
+          ),
+          color: getColor(theme, ColorName.CodeForeground),
+        }}
+      >
+        {children}
+      </code>
+    </span>
+  )
+}

packages/mdx/src/components.tsx

@@ -12,6 +12,7 @@ import {
   Annotation,
 } from "./client/annotations"
 import { Preview } from "./client/preview"
+import { InlineCode } from "./client/inline-code"
 
 export const CH = {
   Code,
@@ -24,4 +25,5 @@ export const CH = {
   annotations: annotationsMap,
   Annotation,
   Slideshow,
+  InlineCode,
 }

packages/mdx/src/index.scss

@@ -17,3 +17,10 @@
     height: 100%;
   }
 }
+
+.ch-inline-code > code {
+  padding: 0.2em 0.4em;
+  margin: 0.1em -0.1em;
+  border-radius: 0.25em;
+  font-size: 0.9em;
+}

packages/mdx/src/plugin.ts

@@ -9,6 +9,7 @@ import { transformSlideshows } from "./plugin/slideshow"
 import { valueToEstree } from "./plugin/to-estree"
 import { CH_CODE_CONFIG_VAR_NAME } from "./plugin/unist-utils"
 import { transformPreviews } from "./plugin/preview"
+import { transformInlineCodes } from "./plugin/inline-code"
 
 type CodeHikeConfig = {
   theme: any
@@ -36,6 +37,7 @@ export function remarkCodeHike(config: CodeHikeConfig) {
     }
 
     try {
+      await transformInlineCodes(tree)
       await transformPreviews(tree)
       await transformScrollycodings(tree, config)
       await transformSpotlights(tree, config)

packages/mdx/src/plugin/inline-code.ts

@@ -0,0 +1,23 @@
+import {
+  visitAsync,
+  toJSX,
+  CH_CODE_CONFIG_PLACEHOLDER,
+} from "./unist-utils"
+import { Node } from "unist"
+
+export async function transformInlineCodes(tree: Node) {
+  await visitAsync(
+    tree,
+    ["mdxJsxFlowElement", "mdxJsxTextElement"],
+    async node => {
+      if (node.name === "CH.InlineCode") {
+        toJSX(node, {
+          props: {
+            codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
+          },
+          appendProps: true,
+        })
+      }
+    }
+  )
+}

packages/mdx/src/plugin/unist-utils.ts

@@ -70,6 +70,8 @@ export function toJSX(
   }
   if (!appendProps) {
     node.attributes = []
+  } else {
+    node.attributes = node.attributes || []
   }
 
   Object.keys(props).forEach(key => {

packages/playground/content/test.mdx

@@ -1,7 +1,3 @@
 # Hello
 
-<CH.Preview
-  show="/"
-  style={{ height: 200 }}
-  url="https://google.com"
-/>
+Foo bar <CH.InlineCode>Hello</CH.InlineCode> foo bar

packages/utils/src/theme.ts

@@ -193,7 +193,10 @@ export function getColor(
   }
 }
 
-function transparent(color: Color, opacity: number): Color {
+export function transparent(
+  color: Color,
+  opacity: number
+): Color {
   const _opacity = Math.round(
     Math.min(Math.max(opacity || 1, 0), 1) * 255
   )