Transform emphasis code into InlineCode

Author: pomber

packages/mdx/src/index.scss

@@ -27,8 +27,8 @@
 }
 
 .ch-inline-code > code {
-  padding: 0.2em 0.4em;
-  margin: 0.1em -0.1em;
+  padding: 0.2em 0.15em;
+  margin: 0.1em -0.05em;
   border-radius: 0.25em;
   font-size: 0.9em;
 }

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

@@ -4,8 +4,24 @@ import {
   CH_CODE_CONFIG_PLACEHOLDER,
 } from "./unist-utils"
 import { Node } from "unist"
+import visit from "unist-util-visit"
+import { Parent } from "hast-util-to-estree"
 
 export async function transformInlineCodes(tree: Node) {
+  visit(tree, "emphasis", (node: Parent) => {
+    if (
+      node.children &&
+      node.children.length === 1 &&
+      node.children[0].type === "inlineCode"
+    ) {
+      node.type = "mdxJsxTextElement"
+      node.name = "CH.InlineCode"
+      node.children = [
+        { type: "text", value: node.children[0].value },
+      ]
+    }
+  })
+
   await visitAsync(
     tree,
     ["mdxJsxFlowElement", "mdxJsxTextElement"],

packages/playground/content/test.mdx

@@ -1,12 +1,15 @@
-<CH.Section>
+Lorem ipsum dolor sit amet. _`console.log("foo bar")`_.
 
-Then also install the [mdx plugin for next](focus://2),[mdx](focus://3),[foo bar](focus://4).
+Lorem ipsum dolor sit amet. `console.log("foo bar")`.
 
-```bash focus=1
-npm install
-@next/mdx @mdx-js/loader
-@code-hike/
-mdx@next
-```
+_`console.log("foo bar")`_
 
-</CH.Section>
+_`console.log("foo bar")`_
+
+X <CH.InlineCode>console.log("foo bar")</CH.InlineCode>
+
+Lorem ipsum `var x = 1`
+
+_Lorem ipsum `var x = 1`_
+
+**`console.log("foo bar")`**