Skip to content

Commit ced86ac

Browse files
pomberpomber
authored
Merge pull request #189 from code-hike/next
v0.5.2
2 parents b09b2af + 71d5ea2 commit ced86ac

29 files changed

+1254
-24
lines changed

‎examples/browser/index.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Code Hike in the browser</title>
55
<link
66
rel="stylesheet"
7-
href="https://esm.sh/@code-hike/mdx@0.4.0-next.1/dist/index.css"
7+
href="https://esm.sh/@code-hike/mdx@0.5.2-next.2/dist/index.css"
88
/>
99
</head>
1010
<body>
@@ -13,18 +13,26 @@
1313
<script type="module">
1414
import React from "https://esm.sh/react"
1515
import ReactDOM from "https://esm.sh/react-dom"
16-
import { evaluate } from "https://esm.sh/@mdx-js/mdx?dev"
16+
import { evaluate } from "https://esm.sh/@mdx-js/mdx?bundle"
1717
import * as runtime from "https://esm.sh/react/jsx-runtime.js"
1818

19-
import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.4.0-next.1/dist/index.browser.mjs"
20-
import { CH } from "https://esm.sh/@code-hike/mdx@0.4.0-next.1/components"
21-
import theme from "https://esm.sh/[email protected]/themes/nord.json" assert { type: "json" }
19+
import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.5.2-next.2/dist/index.browser.mjs?bundle"
20+
import { CH } from "https://esm.sh/@code-hike/mdx@0.5.2-next.2/components"
21+
import theme from "https://esm.sh/[email protected]/themes/dracula.json" assert { type: "json" }
2222

2323
const mdx = `# Test
2424
25-
~~~python hello.py mark=1[22:30]
26-
print("Rendered with Code Hike")
27-
~~~
25+
<CH.Code>
26+
27+
~~~python hello.py mark=1[22:30]
28+
print("Rendered with Code Hike")
29+
~~~
30+
31+
~~~js hello.js mark=1[23:36]
32+
console.log("Rendered with Code Hike")
33+
~~~
34+
35+
</CH.Code>
2836
`
2937

3038
const { default: Content } = await evaluate(mdx, {

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
"packages": [
55
"packages/mdx",
66
"examples/*",
7+
"playground",
78
"site"
89
]
910
},
1011
"scripts": {
1112
"build": "lerna run --stream build",
1213
"build:lib": "lerna run --stream --scope @*/mdx build",
14+
"build:playground": "lerna run --stream --scope playground build",
1315
"test": "lerna run --stream test",
1416
"dev": "lerna run --stream --scope @*/mdx dev",
1517
"release": "auto shipit"

‎packages/mdx/dev/content/markdown.mdx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
Test nested syntax highlighting
2+
3+
````md hi.md
4+
# Hi
5+
6+
```js
7+
export default {
8+
data() {
9+
return {
10+
greeting: "Hello World!",
11+
}
12+
},
13+
}
14+
```
15+
16+
[lorem](https://loremipsum.com)
17+
````
18+
19+
```js hi.js
20+
export default {
21+
data() {
22+
return {
23+
greeting: "Hello World!",
24+
}
25+
},
26+
}
27+
```

‎packages/mdx/dev/files.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import fs from "fs"
22
import { remarkCodeHike } from "../src/index"
33
import { compile } from "@mdx-js/mdx"
4-
import theme from "shiki/themes/nord.json"
4+
import theme from "shiki/themes/rose-pine-moon.json"
55
import { withDebugger } from "mdx-debugger"
66

77
export async function getFiles() {

‎packages/mdx/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"scripts": {
3535
"dev": "next",
3636
"build": "rollup -c rollup.config.js",
37+
"watch": "rollup --watch -c rollup.config.js",
3738
"test": "vitest",
3839
"coverage": "vitest run --coverage"
3940
},
@@ -71,6 +72,7 @@
7172
"react-json-view": "^1.21.3",
7273
"rollup": "^2.41.2",
7374
"rollup-plugin-delete": "^2.0.0",
75+
"rollup-plugin-dts": "^4.2.1",
7476
"rollup-plugin-postcss": "^4.0.0",
7577
"rollup-plugin-typescript2": "^0.27.1",
7678
"sass": "^1.49.9",

‎packages/mdx/rollup.config.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import path from "path"
88
import json from "@rollup/plugin-json"
99
import del from "rollup-plugin-delete"
1010
import replace from "@rollup/plugin-replace"
11+
import dts from "rollup-plugin-dts"
1112
import { nodeResolve } from "@rollup/plugin-node-resolve"
1213
// import { terser } from "rollup-plugin-terser"
1314
import commonjs from "@rollup/plugin-commonjs"
@@ -72,6 +73,12 @@ export default function makeConfig(commandOptions) {
7273
}),
7374
],
7475
},
76+
{
77+
input: `src/index.tsx`,
78+
output: [{ file: `./dist/index.d.ts`, format: "es" }],
79+
external: [...remarkExternal, "shiki"],
80+
plugins: [dts()],
81+
},
7582
// for the browser esm we need to replace shiki with shiki/dist/index.browser.mjs
7683
// https://github.com/shikijs/shiki/issues/131#issuecomment-1094281851
7784
{
@@ -125,5 +132,13 @@ export default function makeConfig(commandOptions) {
125132
}),
126133
],
127134
},
135+
{
136+
input: `src/components.tsx`,
137+
output: [
138+
{ file: `./dist/components.d.ts`, format: "es" },
139+
],
140+
external: clientExternal,
141+
plugins: [dts()],
142+
},
128143
]
129144
}

‎packages/mdx/src/highlighter/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,17 @@ export async function highlight({
3333
}
3434
}
3535
if (highlighterPromise === null) {
36+
const isBrowser = typeof window !== "undefined"
37+
// if we are on the server we load all the languages
38+
// if we are on the browser just load the first language
39+
// subsequent calls with different languages will lazy load
40+
const langs = isBrowser ? [lang as Lang] : undefined
41+
3642
// TODO add version
3743
setCDN("https://unpkg.com/shiki/")
3844
highlighterPromise = getHighlighter({
3945
theme: theme as IShikiTheme,
40-
// langs: [lang as Lang], // TODO change lang from string to Lang
46+
langs,
4147
})
4248
}
4349

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
EditorProps,
66
EditorStep,
77
} from "../mini-editor"
8-
import { CodeHikeConfig } from "remark/config"
8+
import { CodeHikeConfig } from "../remark/config"
99

1010
export function Code(
1111
props: EditorProps & Partial<CodeHikeConfig>

‎packages/mdx/src/mini-editor/editor-frame.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const EditorFrame = React.forwardRef<
6363
style={{
6464
background: getColor(
6565
theme,
66-
ColorName.EditorGroupHeaderBackground
66+
ColorName.EditorBackground
6767
),
6868
...style,
6969
}}
@@ -72,6 +72,10 @@ export const EditorFrame = React.forwardRef<
7272
className={"ch-frame-title-bar"}
7373
style={{
7474
color: getColor(theme, ColorName.IconForeground),
75+
background: getColor(
76+
theme,
77+
ColorName.EditorGroupHeaderBackground
78+
),
7579
}}
7680
>
7781
<TabsContainer
@@ -98,6 +102,10 @@ export const EditorFrame = React.forwardRef<
98102
theme,
99103
ColorName.IconForeground
100104
),
105+
background: getColor(
106+
theme,
107+
ColorName.EditorGroupHeaderBackground
108+
),
101109
}}
102110
>
103111
<TabsContainer

‎packages/mdx/src/remark/comment-data.ts‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,25 @@ export function getCommentData(
2828
}
2929
}
3030

31+
function getTextAfter(
32+
line: Code["lines"][0],
33+
prefix: string
34+
) {
35+
const firstIndex = line.tokens.findIndex(t =>
36+
t.content.trim().startsWith(prefix)
37+
)
38+
if (firstIndex === -1) {
39+
return undefined
40+
}
41+
return line.tokens
42+
.slice(firstIndex)
43+
.map(t => t.content)
44+
.join("")
45+
}
46+
3147
const commentRegex = /\/\/\s+(\w+)(\S*)\s*(.*)/
3248
function otherComment(line: Code["lines"][0]) {
33-
const comment = line.tokens.find(t =>
34-
t.content.trim().startsWith("//")
35-
)?.content
49+
const comment = getTextAfter(line, "//")
3650

3751
if (!comment) {
3852
return []
@@ -56,9 +70,7 @@ const bashLikeLangs = [
5670
]
5771
const bashLikeCommentRegex = /#\s+(\w+)(\S*)\s*(.*)/
5872
function bashLikeComment(line: Code["lines"][0]) {
59-
const comment = line.tokens.find(t =>
60-
t.content.trim().startsWith("#")
61-
)?.content
73+
const comment = getTextAfter(line, "#")
6274

6375
if (!comment) {
6476
return []

0 commit comments

Comments
 (0)