Skip to content

Commit e074d59

Browse files
pomberpomber
authored
Merge pull request #200 from code-hike/next
v0.6.0
2 parents dcaebd8 + a8709a7 commit e074d59

24 files changed

+752
-322
lines changed

‎.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+

‎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
},

‎packages/mdx/dev/content/comment-annotations.mdx

+7-7
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,22 @@ function adipiscing(...elit) {
2020
console.log("hey")
2121
```
2222

23-
Same with other annotations like `bg` and `box`.
23+
Same with other annotations like `mark` and `box`.
2424

2525
```js
26-
// bg(1:2)
26+
// mark(1:2)
2727
function foo() {
28-
// box[6:9]
28+
// mark[6:9] mark-box
2929
console.log("hover me")
3030
return 8
3131
}
3232
```
3333

34-
You can pass a string parameter to comment annotations. For `bg` and `box`, it will be used as a color.
34+
You can pass a string parameter to comment annotations. For `mark` and `box`, it will be used as a color.
3535

3636
```js index.js
3737
function lorem(ipsum, dolor = 1) {
38-
// bg(1:3) linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%)
38+
// mark(1:3) mark-red-background
3939
const sit = ipsum == null && 0
4040
dolor = sit - amet(dolor)
4141
return sit ? consectetur(ipsum) : []
@@ -47,7 +47,7 @@ function lorem(ipsum, dolor = 1) {
4747
// å
4848
function adipiscing(...elit) {
4949
console.log(elit)
50-
// box[19:36] aqua
50+
// mark[19:36]
5151
return elit.map(ipsum => ipsum.sit)
5252
}
5353
```
@@ -85,7 +85,7 @@ def lorem(ipsum, dolor = 1):
8585
```bash
8686
function lorem(ipsum, dolor = 1) {
8787
# focus(1:3)
88-
# box[3:7]
88+
# mark[3:7]
8989
local sit=0
9090
# label something something
9191
dolor=$((sit - amet(dolor)))

‎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>

‎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) {

‎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

‎packages/mdx/pages/styles.css

+16
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,19 @@ div#__next > div {
3636
.annotation-class span {
3737
text-decoration: line-through;
3838
}
39+
40+
.mark-red-background {
41+
background: #550000 !important;
42+
}
43+
44+
.mark-red-background .ch-code-multiline-mark-border {
45+
background: #bb0000 !important;
46+
}
47+
48+
.mark-box {
49+
background: #000 !important;
50+
}
51+
52+
.mark-box * {
53+
color: #0f0 !important;
54+
}

‎packages/mdx/pages/themes.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const mdx = `
99
1010
<CH.Code>
1111
12-
~~~json package.json
12+
~~~json package.json mark=2[12:23]
1313
{
1414
"name": "package.json"
1515
}
@@ -31,6 +31,7 @@ function PostPage() {
3131
3232
~~~js pages/alpha.ts
3333
function AlphaPage() {
34+
// mark
3435
return 1
3536
}
3637
~~~

‎packages/mdx/src/index.scss

+13
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,16 @@
5353
.ch-section-link[data-active="true"] * {
5454
text-decoration-thickness: 1.5px;
5555
}
56+
57+
.ch-code-inline-mark {
58+
border-radius: 0.25rem;
59+
padding: 0.2rem 0.15rem 0.1rem;
60+
margin: 0 -0.15rem;
61+
}
62+
63+
.ch-code-multiline-mark-border {
64+
width: 3px;
65+
height: 100%;
66+
position: absolute;
67+
left: 0;
68+
}

0 commit comments

Comments
 (0)