Skip to content

Commit 458b4d8

Browse files
pomberpomber
committed
Update vite example
1 parent 746f79c commit 458b4d8

File tree

5 files changed

+235
-7
lines changed

5 files changed

+235
-7
lines changed

‎examples/vite/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Vite + Code Hike
2+
3+
See [this guide](https://codehike.org/docs/installation/vite) or try it on [Stackblitz](https://stackblitz.com/github/code-hike/codehike/tree/main/examples/vite?file=src/hello.mdx).

‎examples/vite/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Vite App</title>
6+
<title>Vite + Code Hike</title>
77
</head>
88
<body>
99
<div id="root"></div>

‎examples/vite/src/App.jsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import '@code-hike/mdx/styles'
2-
import Content from './hello.mdx'
1+
import "@code-hike/mdx/styles"
2+
import Content from "./hello.mdx"
33

44
function App() {
5-
65
return (
7-
<div style={{width: 800, margin: '0 auto'}}>
8-
<Content/>
6+
<div style={{ maxWidth: 768, margin: "0 auto", fontFamily: "sans-serif" }}>
7+
<Content />
98
</div>
109
)
1110
}

‎examples/vite/src/hello.mdx

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,229 @@ print("Rendered with Code Hike")
77
```
88

99
Lorem ipsum dolor sit amet.
10+
11+
# Scrollycoding
12+
13+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
14+
15+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
16+
17+
<CH.Scrollycoding>
18+
19+
## Step 1
20+
21+
Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
22+
23+
> Nova in illis at dabat legi harundine non, ova miratur? _Quid in_ sole aer
24+
> ad diffusa illis voluisti fidensque coniugiale laniata curam. Aras rivus
25+
> eripuit, qua fistula haec partus; serpens, negat.
26+
27+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.
28+
29+
```js app.js focus=3:10
30+
const { lorem, ipsum } = dolor({
31+
sit: {
32+
amet: 1,
33+
consectetur: 2,
34+
adipiscing: (elit) => ({
35+
sed: elit,
36+
}),
37+
eiusmod: (tempor) => ({
38+
incididunt: tempor,
39+
}),
40+
ut: (labore) => ({
41+
et: labore,
42+
dolore: labore + 1,
43+
}),
44+
magna: (aliqua) => ({
45+
ut: aliqua,
46+
}),
47+
nostrud: (elit) => ({
48+
exercitation: elit,
49+
ullamco: elit,
50+
}),
51+
laboris: (elit) => ({
52+
nisi: elit,
53+
}),
54+
},
55+
})
56+
```
57+
58+
---
59+
60+
## Step 2
61+
62+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
63+
64+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
65+
66+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
67+
68+
Morbi quis commodo.
69+
70+
```js app.js focus=11:17
71+
72+
```
73+
74+
---
75+
76+
## Step 3
77+
78+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
79+
80+
- Nisi lacus sed viverra tellus in
81+
- Nibh cras pulvinar mattis nunc sed
82+
- Luctus accumsan tortor posuere ac
83+
84+
Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
85+
86+
```js app.js focus=11:14
87+
const { lorem, ipsum } = dolor({
88+
sit: {
89+
amet: 1,
90+
consectetur: 2,
91+
adipiscing: (elit) => ({
92+
sed: elit,
93+
}),
94+
eiusmod: (tempor) => ({
95+
incididunt: tempor,
96+
}),
97+
ut: (labore) => ({
98+
et: lorem(labore * ipsum),
99+
dolore: lorem(labore + 1),
100+
}),
101+
nostrud: (elit) => ({
102+
exercitation: elit,
103+
ullamco: elit,
104+
}),
105+
laboris: (elit) => ({
106+
nisi: elit,
107+
}),
108+
},
109+
})
110+
```
111+
112+
---
113+
114+
## Step 4
115+
116+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.
117+
118+
Sed blandit libero volutpat sed cras.
119+
120+
- Nisi lacus sed viverra tellus in
121+
- Nibh cras pulvinar mattis nunc sed
122+
123+
Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.
124+
125+
```js app.js focus=15:21
126+
127+
```
128+
129+
---
130+
131+
## Step 5
132+
133+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
134+
135+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
136+
137+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat.
138+
139+
Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra.
140+
141+
- Fringilla ut morbi tincidunt augue interdum velit euismod.
142+
- Luctus accumsan tortor posuere ac ut consequat semper viverra.
143+
144+
Morbi quis commodo.
145+
146+
```js app.js
147+
148+
```
149+
150+
</CH.Scrollycoding>
151+
152+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
153+
154+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
155+
156+
# Spotlight
157+
158+
This is how to use the `<CH.Spotlight>` component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam.
159+
160+
<CH.Spotlight>
161+
162+
```js app.js
163+
function lorem(ipsum, dolor = 1) {
164+
const sit = ipsum == null && 0
165+
dolor = sit - amet(dolor)
166+
return sit ? consectetur(ipsum) : []
167+
}
168+
```
169+
170+
---
171+
172+
Change focus
173+
174+
```js app.js focus=2:4
175+
176+
```
177+
178+
---
179+
180+
Or change the code
181+
182+
```js app.js focus=6:10
183+
function lorem(ipsum, dolor = 1) {
184+
const sit = ipsum == null && 0
185+
dolor = sit - amet(dolor)
186+
return sit ? consectetur(ipsum) : []
187+
}
188+
189+
function adipiscing(...elit) {
190+
console.log(elit)
191+
return elit.map((ipsum) => ipsum.sit)
192+
}
193+
```
194+
195+
---
196+
197+
Or change the file
198+
199+
<CH.Code>
200+
201+
```js app.js focus=1:4
202+
function adipiscing(...elit) {
203+
console.log(elit)
204+
return elit.map((ipsum) => ipsum.sit)
205+
}
206+
```
207+
208+
---
209+
210+
```css styles.css
211+
.lorem {
212+
color: #fff;
213+
padding: 10px;
214+
background: #000;
215+
}
216+
```
217+
218+
</CH.Code>
219+
220+
---
221+
222+
### By the way
223+
224+
- you can
225+
- put any
226+
- markdown
227+
- here
228+
229+
👍
230+
231+
```js app.js
232+
233+
```
234+
235+
</CH.Spotlight>

‎examples/vite/vite.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineConfig } from "vite"
22
import react from "@vitejs/plugin-react"
33
import { remarkCodeHike } from "@code-hike/mdx"
4-
import theme from "shiki/themes/github-dark.json"
4+
import theme from "shiki/themes/material-palenight.json"
55

66
export default defineConfig(async () => {
77
const mdx = await import("@mdx-js/rollup")

0 commit comments

Comments
 (0)