Skip to content

Commit 9fcdf18

Browse files
committed
Highlight inline code
1 parent c14b4ba commit 9fcdf18

File tree

3 files changed

+30
-8
lines changed

3 files changed

+30
-8
lines changed

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,24 @@ import {
44
getColor,
55
transparent,
66
ColorName,
7+
Code,
78
} from "@code-hike/utils"
89

910
export function InlineCode({
1011
className,
1112
codeConfig,
1213
children,
14+
code,
1315
...rest
1416
}: {
1517
className: string
18+
code: Code
1619
children?: React.ReactNode
1720
codeConfig: { theme: EditorTheme }
1821
}) {
1922
const { theme } = codeConfig
23+
const { lines } = code
24+
const allTokens = lines.flatMap(line => line.tokens)
2025
return (
2126
<span
2227
className={
@@ -34,7 +39,11 @@ export function InlineCode({
3439
color: getColor(theme, ColorName.CodeForeground),
3540
}}
3641
>
37-
{children}
42+
{allTokens.map((token, j) => (
43+
<span key={j} {...token.props}>
44+
{token.content}
45+
</span>
46+
))}
3847
</code>
3948
</span>
4049
)

packages/mdx/src/plugin.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,14 @@ export function remarkCodeHike(
3434
}
3535
})
3636

37-
3837
addConfig(tree as Parent, config)
3938

4039
if (config.autoImport && !hasCodeHikeImport) {
4140
addImportNode(tree as Parent)
4241
}
4342

4443
try {
45-
await transformInlineCodes(tree)
44+
await transformInlineCodes(tree, config)
4645
await transformPreviews(tree)
4746
await transformScrollycodings(tree, config)
4847
await transformSpotlights(tree, config)
@@ -60,7 +59,11 @@ export function remarkCodeHike(
6059
function addConfigDefaults(
6160
config: Partial<CodeHikeConfig> | undefined
6261
): CodeHikeConfig {
63-
return { ...config, theme: config?.theme || {}, autoImport: config?.autoImport === false ? false : true }
62+
return {
63+
...config,
64+
theme: config?.theme || {},
65+
autoImport: config?.autoImport === false ? false : true,
66+
}
6467
}
6568

6669
function addConfig(tree: Parent, config: CodeHikeConfig) {
@@ -124,8 +127,7 @@ function addImportNode(tree: Parent) {
124127
type: "Literal",
125128
value:
126129
"@code-hike/mdx/dist/components.cjs.js",
127-
raw:
128-
'"@code-hike/mdx/dist/components.cjs.js"',
130+
raw: '"@code-hike/mdx/dist/components.cjs.js"',
129131
},
130132
},
131133
],

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,13 @@ import {
66
import { Node } from "unist"
77
import visit from "unist-util-visit"
88
import { Parent } from "hast-util-to-estree"
9+
import { highlight } from "@code-hike/highlighter"
910

10-
export async function transformInlineCodes(tree: Node) {
11+
export async function transformInlineCodes(
12+
tree: Node,
13+
{ theme }: { theme: any }
14+
) {
15+
// transform *`foo`* to <CH.InlineCode>foo</CH.InlineCode>
1116
visit(tree, "emphasis", (node: Parent) => {
1217
if (
1318
node.children &&
@@ -25,10 +30,16 @@ export async function transformInlineCodes(tree: Node) {
2530
await visitAsync(
2631
tree,
2732
["mdxJsxFlowElement", "mdxJsxTextElement"],
28-
async node => {
33+
async (node: Parent) => {
2934
if (node.name === "CH.InlineCode") {
35+
const code = await highlight({
36+
code: node.children[0].value as string,
37+
lang: "jsx",
38+
theme,
39+
})
3040
toJSX(node, {
3141
props: {
42+
code,
3243
codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
3344
},
3445
appendProps: true,

0 commit comments

Comments
 (0)