Skip to content

Commit b9dbefe

Browse files
pomberpomber
authored
Merge pull request #192 from code-hike/empty-codeblocks
Empty codeblocks
2 parents fc1c61f + 64fae1e commit b9dbefe

File tree

15 files changed

+611
-250
lines changed

15 files changed

+611
-250
lines changed

Diff for: ‎.gitpod.yml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# This configuration file was automatically generated by Gitpod.
2+
# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
3+
# and commit this file to your remote git repository to share the goodness with others.
4+
5+
tasks:
6+
- init: yarn install && yarn run build
7+
command: yarn run dev
8+
9+

Diff for: ‎examples/contentlayer/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
"dependencies": {
1111
"@code-hike/mdx": "^0.5.2",
1212
"@types/node": "^17.0.30",
13-
"contentlayer": "latest",
14-
"next": "^12.1.0",
15-
"next-contentlayer": "latest",
13+
"contentlayer": "0.2.5",
14+
"next": "^12.1.5",
15+
"next-contentlayer": "0.2.5",
1616
"react": "^17.0.2",
1717
"react-dom": "^17.0.2"
1818
},

Diff for: ‎packages/mdx/dev/content/empty-codeblocks.mdx

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# Spotlight
2+
3+
<CH.Spotlight>
4+
5+
```text
6+
123456789
7+
123456789
8+
123456789
9+
123456789
10+
123456789
11+
123456789
12+
123456789
13+
```
14+
15+
---
16+
17+
```text focus=1:5
18+
19+
```
20+
21+
focus=1:5
22+
23+
---
24+
25+
```text focus=1,2,3
26+
27+
```
28+
29+
focus=1,2,3
30+
31+
---
32+
33+
```text focus=2[1:6]
34+
35+
```
36+
37+
focus=2[1:6]
38+
39+
</CH.Spotlight>
40+
41+
# Scrolly
42+
43+
<CH.Scrollycoding>
44+
45+
```text
46+
123456789
47+
123456789
48+
123456789
49+
123456789
50+
123456789
51+
123456789
52+
123456789
53+
```
54+
55+
focus=1:5
56+
57+
---
58+
59+
```text focus=1,2,3
60+
61+
```
62+
63+
focus=1,2,3
64+
65+
---
66+
67+
```text focus=2[1:6]
68+
69+
```
70+
71+
focus=2[1:6]
72+
73+
</CH.Scrollycoding>
74+
75+
# Slides
76+
77+
<CH.Slideshow>
78+
79+
```text
80+
123456789
81+
123456789
82+
123456789
83+
123456789
84+
123456789
85+
123456789
86+
123456789
87+
```
88+
89+
focus=1:5
90+
91+
---
92+
93+
```text focus=1,2,3
94+
95+
```
96+
97+
focus=1,2,3
98+
99+
---
100+
101+
```text focus=2[1:6]
102+
103+
```
104+
105+
focus=2[1:6]
106+
107+
</CH.Slideshow>

Diff for: ‎packages/mdx/dev/content/section.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum [dolore](f
2828

2929
Lorem dolor sit amet, [javascript](focus://index.js#2:3) adipiscing elit, sed do eiusmod [styles](focus://styles.css#2:3) incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3030

31-
<CH.Code>
31+
<CH.Code lineNumbers={true}>
3232

3333
```js index.js
3434
function lorem(ipsum, dolor) {

Diff for: ‎packages/mdx/dev/content/test.mdx

+117-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,124 @@
1-
Lorem ipsum dolor sit amet. _`console.log("foo bar")`_.
1+
Annotations allow you to change how the code is displayed and also to add interactivity.
22

3-
Lorem ipsum dolor sit amet. `console.log("foo bar")`.
3+
<CH.Spotlight lineNumbers={true}>
44

5-
_`console.log("foo bar")`_
5+
````mdx mark=1[7:13],5[1:7]
6+
```py focus=2
7+
print(1)
8+
print(2)
9+
print(3)
10+
# focus
11+
print(4)
12+
print(5)
13+
```
14+
````
615

7-
_`console.log("foo bar")`_
16+
There are two ways to add annotations:
817

9-
X <CH.InlineCode>console.log("foo bar")</CH.InlineCode>
18+
---
1019

11-
Lorem ipsum `var x = 1`
20+
```mdx mark=1[7:13],5[1:7] focus=1
1221

13-
_Lorem ipsum `var x = 1`_
22+
```
1423

15-
**`console.log("foo bar")`**
24+
- using the codeblock metastring
25+
26+
---
27+
28+
```mdx mark=1[7:13],5[1:7] focus=5
29+
30+
```
31+
32+
- using comments inside the code
33+
34+
</CH.Spotlight>
35+
36+
_`focus`_ is only one of the possible annotations. The full list is:
37+
38+
- _`focus`_: keep the targeted code bright while dimming the rest
39+
- _`mark`_: add a background color to the targeted tokens
40+
- _`link`_: add links inside the code
41+
42+
First let's see the syntax to target different parts of the code.
43+
44+
## Targeting lines and columns
45+
46+
<CH.Spotlight maxZoom={1.5} lineNumbers={true} >
47+
48+
<CH.Code lineNumbers={true}>
49+
50+
```text
51+
123456789
52+
123456789
53+
123456789
54+
123456789
55+
123456789
56+
123456789
57+
123456789
58+
```
59+
60+
</CH.Code>
61+
62+
---
63+
64+
```text focus=2
65+
123456789
66+
123456789
67+
123456789
68+
123456789
69+
123456789
70+
123456789
71+
123456789
72+
```
73+
74+
To select a specific line, use the line number:
75+
_`focus=2`_
76+
77+
---
78+
79+
```text focus=3:5
80+
123456789
81+
123456789
82+
123456789
83+
123456789
84+
123456789
85+
123456789
86+
123456789
87+
```
88+
89+
To select a range of lines use a colon:
90+
_`focus=3:5`_
91+
92+
---
93+
94+
```text focus=5[3:6]
95+
123456789
96+
123456789
97+
123456789
98+
123456789
99+
123456789
100+
123456789
101+
123456789
102+
```
103+
104+
Select a range of column from a line using brackets:
105+
_`focus=5[3:6]`_
106+
107+
---
108+
109+
```text focus=1,3:5,7[1:4,7:9]
110+
123456789
111+
123456789
112+
123456789
113+
123456789
114+
123456789
115+
123456789
116+
123456789
117+
```
118+
119+
Combine selectors using a comma separated list:
120+
_`focus=1,3:5,7[1:4,7:9]`_
121+
122+
</CH.Spotlight>
123+
124+
## Comment syntax

Diff for: ‎packages/mdx/src/mdx-client/code.tsx

+28-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react"
2-
import { CodeSpring } from "../smooth-code"
2+
import { CodeConfig, CodeSpring } from "../smooth-code"
33
import {
44
EditorSpring,
55
EditorProps,
@@ -20,23 +20,29 @@ export function Code(
2020
return <InnerCode {...step} onTabClick={onTabClick} />
2121
}
2222

23-
export function InnerCode({
24-
onTabClick,
25-
...props
26-
}: EditorProps & {
27-
onTabClick?: (filename: string) => void
28-
} & Partial<CodeHikeConfig>) {
23+
// build the CodeConfig from props and props.codeConfig
24+
export function mergeCodeConfig<T>(
25+
props: Partial<CodeConfig> & {
26+
codeConfig: Partial<CodeConfig>
27+
} & T
28+
) {
2929
const {
3030
lineNumbers,
3131
showCopyButton,
3232
showExpandButton,
33-
className,
34-
style,
35-
...editorProps
33+
minZoom,
34+
maxZoom,
35+
...rest
3636
} = props
37-
3837
const codeConfig = {
3938
...props.codeConfig,
39+
maxZoom:
40+
maxZoom == null ? props.codeConfig?.maxZoom : maxZoom,
41+
minZoom:
42+
minZoom == null ? props.codeConfig?.minZoom : minZoom,
43+
horizontalCenter:
44+
props.codeConfig?.horizontalCenter ??
45+
props.horizontalCenter,
4046
lineNumbers:
4147
lineNumbers == null
4248
? props.codeConfig?.lineNumbers
@@ -50,6 +56,17 @@ export function InnerCode({
5056
? props.codeConfig?.showExpandButton
5157
: showExpandButton,
5258
}
59+
return { ...rest, codeConfig }
60+
}
61+
62+
export function InnerCode({
63+
onTabClick,
64+
...props
65+
}: EditorProps & {
66+
onTabClick?: (filename: string) => void
67+
} & Partial<CodeHikeConfig>) {
68+
const { className, style, codeConfig, ...editorProps } =
69+
mergeCodeConfig(props)
5370

5471
if (
5572
!props.southPanel &&

Diff for: ‎packages/mdx/src/mdx-client/scrollycoding.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export function Scrollycoding({
1111
codeConfig,
1212
presetConfig,
1313
start = 0,
14+
...rest
1415
}: {
1516
children: React.ReactNode
1617
editorSteps: EditorStep[]
@@ -88,10 +89,11 @@ export function Scrollycoding({
8889
</div>
8990
<div className="ch-scrollycoding-sticker">
9091
<InnerCode
92+
showExpandButton={true}
93+
{...rest}
9194
{...(tab as any)}
9295
codeConfig={codeConfig}
9396
onTabClick={onTabClick}
94-
showExpandButton={true}
9597
/>
9698
{presetConfig && (
9799
<Preview

Diff for: ‎packages/mdx/src/mdx-client/section.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -63,15 +63,21 @@ export function Section({
6363
)
6464
}
6565

66-
export function SectionCode() {
66+
export function SectionCode(innerProps) {
6767
const { props, setFocus } =
6868
React.useContext(SectionContext)
6969

7070
const onTabClick = (filename: string) => {
7171
setFocus({ fileName: filename, focus: null, id: "" })
7272
}
7373

74-
return <InnerCode {...props} onTabClick={onTabClick} />
74+
return (
75+
<InnerCode
76+
{...innerProps}
77+
{...props}
78+
onTabClick={onTabClick}
79+
/>
80+
)
7581
}
7682

7783
// ---

Diff for: ‎packages/mdx/src/mdx-client/slideshow.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export function Slideshow({
99
codeConfig,
1010
presetConfig,
1111
code,
12+
...rest
1213
}: {
1314
children: React.ReactNode
1415
editorSteps: EditorStep[]
@@ -45,6 +46,7 @@ export function Slideshow({
4546
>
4647
<div className="ch-slideshow-slide">
4748
<InnerCode
49+
{...rest}
4850
{...(tab as any)}
4951
codeConfig={{
5052
...codeConfig,

0 commit comments

Comments
 (0)