Skip to content

Commit 058066f

Browse files
metonymmetonym
authored
docs: update SvelteKit/Vite usage (#223)
* chore(deps-dev): bump deps * style(demo): remove gutters from homepage * chore(demo): update description to be consistent with README * chore(demo): use default xlg search size * chore(examples): bump deps * docs: update SvelteKit/Vite usage Closes #221 * docs: brevity * docs: fix typo
1 parent c2446a0 commit 058066f

File tree

20 files changed

+510
-483
lines changed

20 files changed

+510
-483
lines changed

‎README.md

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
> Syntax highlighting for Svelte using [highlight.js](https://github.com/highlightjs/highlight.js).
77
8-
Try it in the [StackBlitz](https://stackblitz.com/edit/svelte-highlight?file=src%2Froutes%2Findex.svelte).
8+
Try it in [StackBlitz](https://stackblitz.com/edit/svelte-highlight?file=src%2Froutes%2Findex.svelte).
99

1010
## [Documentation](https://svhe.onrender.com)
1111

@@ -22,25 +22,54 @@ npm i -D svelte-highlight
2222
pnpm i -D svelte-highlight highlight.js
2323
```
2424

25-
Note that [pnpm](https://github.com/pnpm/pnpm) users must also install `highlight.js` as a development dependency.
25+
Note that [pnpm](https://github.com/pnpm/pnpm) users must also install `highlight.js`.
2626

2727
## SvelteKit Set-up
2828

2929
To use this library with [SvelteKit](https://github.com/sveltejs/kit) or [vite](https://github.com/sveltejs/vite-plugin-svelte), instruct vite to optimize `highlight.js` and `highlight.js/lib/core`:
3030

3131
```diff
32-
# svelte.config.js
32+
+ optimizeDeps: {
33+
+ include: ["highlight.js", "highlight.js/lib/core"],
34+
+ },
35+
```
36+
37+
As of [SvelteKit version 1.0.0-next.359](https://github.com/sveltejs/kit/releases/tag/%40sveltejs/kit%401.0.0-next.359), `vite` options are defined in `vite.config.js`.
38+
39+
**vite.config.js**
40+
41+
```js
42+
import { sveltekit } from "@sveltejs/kit/vite";
43+
44+
/** @type {import('vite').UserConfig} */
45+
const config = {
46+
plugins: [sveltekit()],
47+
optimizeDeps: {
48+
include: ["highlight.js", "highlight.js/lib/core"],
49+
},
50+
};
51+
52+
export default config;
53+
```
54+
55+
<details>
56+
<summary>SvelteKit <=1.0.0-next.358</summary>
57+
58+
```js
59+
// svelte.config.js
3360
export default {
3461
kit: {
35-
+ vite: {
36-
+ optimizeDeps: {
37-
+ include: ["highlight.js", "highlight.js/lib/core"],
38-
+ },
39-
+ },
62+
vite: {
63+
optimizeDeps: {
64+
include: ["highlight.js", "highlight.js/lib/core"],
65+
},
66+
},
4067
},
4168
};
4269
```
4370

71+
</details>
72+
4473
Refer to [examples/sveltekit](examples/sveltekit) or [examples/vite](examples/vite).
4574

4675
## Usage

‎demo/lib/ListSearch.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@
4949
</Row>
5050

5151
<Row>
52-
<Column noGutter>
52+
<Column>
5353
<Search
54-
size="lg"
5554
bind:ref
5655
bind:value
56+
spellcheck="false"
5757
placeholder={`Search ${itemName}s (e.g., "${placeholderExample}")`}
5858
/>
5959
</Column>

‎demo/routes/index.svelte

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,18 @@
2020
const NAME = process.env.NAME;
2121
2222
const sveltekit = `export default {
23-
kit: {
24-
vite: {
25-
optimizeDeps: {
26-
include: ["highlight.js", "highlight.js/lib/core"],
27-
},
28-
},
23+
optimizeDeps: {
24+
include: ["highlight.js", "highlight.js/lib/core"],
2925
},
3026
};`;
3127
</script>
3228

3329
<Row>
3430
<Column xlg={16} lg={16}>
3531
<h4 class="mb-7">
36-
<code class="code">{NAME}</code> provides Svelte components for code
37-
syntax highlighting using <Link
32+
Syntax Highlighting for Svelte using <Link
3833
inline
3934
style="font-size: inherit"
40-
rel="external"
4135
href="https://github.com/highlightjs/highlight.js">highlight.js</Link
4236
>.
4337
</h4>
@@ -50,7 +44,7 @@
5044
</Column>
5145
</Row>
5246

53-
<Row noGutter>
47+
<Row>
5448
<Column xlg={9} lg={12}>
5549
<Tabs>
5650
<Tab label="Yarn" />
@@ -71,7 +65,7 @@
7165
</Column>
7266
</Row>
7367

74-
<Row noGutter>
68+
<Row>
7569
<Column>
7670
<hr />
7771
</Column>
@@ -90,25 +84,23 @@
9084
>"highlight.js"</code
9185
>
9286
and <code class="code">"highlight.js/lib/core"</code>
93-
to the dependencies for vite to optimize:
87+
to the dependencies for vite to optimize.
9488
</p>
9589

96-
<Row class="mb-7" noGutter>
97-
<CodeSnippet type="multi" code={sveltekit} />
98-
</Row>
90+
<h5 class="mb-5">vite.config.js</h5>
91+
92+
<CodeSnippet class="mb-5" type="multi" code={sveltekit} />
9993

10094
<p class="mb-5">
10195
For example set-ups, refer to <Link
10296
inline
10397
size="lg"
104-
rel="external"
10598
href="https://github.com/metonym/svelte-highlight/tree/master/examples/sveltekit"
10699
>
107100
examples/sveltekit
108101
</Link> or <Link
109102
inline
110103
size="lg"
111-
rel="external"
112104
href="https://github.com/metonym/svelte-highlight/tree/master/examples/vite"
113105
>
114106
examples/vite
@@ -142,7 +134,7 @@
142134
list of supported languages.
143135
</p>
144136
</Column>
145-
<Column noGutter xlg={12}>
137+
<Column xlg={12}>
146138
<ScopedStyle name="atom-one-dark" moduleName="atomOneDark" />
147139
</Column>
148140
<Column xlg={9} lg={12}>
@@ -182,7 +174,7 @@
182174
highlighting.
183175
</p>
184176
</Column>
185-
<Column noGutter xlg={12}>
177+
<Column xlg={12}>
186178
<ScopedStyleSvelte name="atom-one-dark" moduleName="atomOneDark" />
187179
</Column>
188180
</Row>
@@ -205,7 +197,7 @@
205197
to infer a language. Prefer to specify a language if possible.
206198
</p>
207199
</Column>
208-
<Column noGutter xlg={12}>
200+
<Column xlg={12}>
209201
<ScopedStyleAuto name="atom-one-dark" moduleName="atomOneDark" />
210202
</Column>
211203
</Row>
@@ -229,7 +221,7 @@
229221
list of supported languages.
230222
</p>
231223
</Column>
232-
<Column noGutter xlg={12}>
224+
<Column xlg={12}>
233225
<HighlightAuto
234226
code={'[data-language="css"] {\n /* custom style rules */\n}'}
235227
class="atomOneDark"
@@ -272,7 +264,7 @@
272264
list of supported languages.
273265
</p>
274266
</Column>
275-
<Column noGutter xlg={12}>
267+
<Column xlg={12}>
276268
<HighlightSvelte
277269
code={`<script>
278270
import { HighlightAuto } from "svelte-highlight";
@@ -296,7 +288,7 @@
296288
</Column>
297289
</Row>
298290

299-
<Row noGutter>
291+
<Row>
300292
<Column>
301293
<hr />
302294
</Column>
@@ -322,7 +314,6 @@
322314
<Link
323315
inline
324316
size="lg"
325-
rel="external"
326317
href="https://github.com/metonym/svelte-highlight/tree/master/examples"
327318
>examples folder in the GitHub repository</Link
328319
>.
@@ -337,7 +328,7 @@
337328
</Column>
338329
</Row>
339330

340-
<Row noGutter>
331+
<Row>
341332
<Column>
342333
<hr />
343334
</Column>

‎examples/rollup-typescript/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
"@rollup/plugin-node-resolve": "^13.3.0",
1111
"@rollup/plugin-typescript": "^8.3.3",
1212
"@tsconfig/svelte": "^3.0.0",
13-
"rollup": "^2.75.7",
13+
"rollup": "^2.76.0",
1414
"rollup-plugin-svelte": "^7.0.0",
1515
"rollup-plugin-terser": "^7.0.2",
16-
"svelte": "^3.48.0",
16+
"svelte": "^3.49.0",
1717
"svelte-check": "2.8.0",
18-
"svelte-highlight": "^6.1.2",
18+
"svelte-highlight": "^6.2.0",
1919
"svelte-preprocess": "^4.10.7",
2020
"tslib": "^2.4.0",
2121
"typescript": "^4.7.4"

‎examples/rollup-typescript/yarn.lock

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -375,10 +375,10 @@ has@^1.0.3:
375375
dependencies:
376376
function-bind "^1.1.1"
377377

378-
highlight.js@11.5.0:
379-
version "11.5.0"
380-
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.5.0.tgz#00abb7ed926491adbdabc93a4f3fd2b88b451b4a"
381-
integrity sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw==
378+
highlight.js@11.6.0:
379+
version "11.6.0"
380+
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a"
381+
integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==
382382

383383
import-fresh@^3.2.1:
384384
version "3.3.0"
@@ -633,10 +633,10 @@ rollup-pluginutils@^2.8.2:
633633
dependencies:
634634
estree-walker "^0.6.1"
635635

636-
rollup@^2.75.7:
637-
version "2.75.7"
638-
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.75.7.tgz#221ff11887ae271e37dcc649ba32ce1590aaa0b9"
639-
integrity sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==
636+
rollup@^2.76.0:
637+
version "2.76.0"
638+
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.76.0.tgz#c69fe03db530ac53fcb9523b3caa0d3c0b9491a1"
639+
integrity sha512-9jwRIEY1jOzKLj3nsY/yot41r19ITdQrhs+q3ggNWhr9TQgduHqANvPpS32RNpzGklJu3G1AJfvlZLi/6wFgWA==
640640
optionalDependencies:
641641
fsevents "~2.3.2"
642642

@@ -749,12 +749,12 @@ [email protected]:
749749
svelte-preprocess "^4.0.0"
750750
typescript "*"
751751

752-
svelte-highlight@^6.1.2:
753-
version "6.1.2"
754-
resolved "https://registry.yarnpkg.com/svelte-highlight/-/svelte-highlight-6.1.2.tgz#aed8ac838c8f198f6bfa520d997bdcc6c349eefa"
755-
integrity sha512-Oe78gBhU8YrQSA9K8mBYn23oNLtitEi7dO0AvKmDKHqNvQR9WCBFT6BhPPWXC7ONInH8F6dv4hRrgJYJM7iXOw==
752+
svelte-highlight@^6.2.0:
753+
version "6.2.0"
754+
resolved "https://registry.yarnpkg.com/svelte-highlight/-/svelte-highlight-6.2.0.tgz#ebd75f72c9367e5eaa88892535097dbbfa836d7a"
755+
integrity sha512-OxaWIPDbHCsn3s/ztCi5aY5YIqqP0+VmLTXuV+oO5fRXbd3AAWLaTsfn8ksIppjs9vdnfYj0X6fLhe6CNmAQgg==
756756
dependencies:
757-
highlight.js "11.5.0"
757+
highlight.js "11.6.0"
758758

759759
svelte-preprocess@^4.0.0:
760760
version "4.10.4"
@@ -780,10 +780,10 @@ svelte-preprocess@^4.10.7:
780780
sorcery "^0.10.0"
781781
strip-indent "^3.0.0"
782782

783-
svelte@^3.48.0:
784-
version "3.48.0"
785-
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.48.0.tgz#f98c866d45e155bad8e1e88f15f9c03cd28753d3"
786-
integrity sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==
783+
svelte@^3.49.0:
784+
version "3.49.0"
785+
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
786+
integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
787787

788788
terser@^5.0.0:
789789
version "5.12.1"

‎examples/rollup/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
"devDependencies": {
88
"@rollup/plugin-commonjs": "^22.0.1",
99
"@rollup/plugin-node-resolve": "^13.3.0",
10-
"rollup": "^2.75.7",
10+
"rollup": "^2.76.0",
1111
"rollup-plugin-svelte": "^7.1.0",
1212
"rollup-plugin-terser": "^7.0.2",
13-
"svelte": "^3.48.0",
14-
"svelte-highlight": "^6.1.2"
13+
"svelte": "^3.49.0",
14+
"svelte-highlight": "^6.2.0"
1515
}
1616
}

‎examples/rollup/yarn.lock

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -214,10 +214,10 @@ has@^1.0.3:
214214
dependencies:
215215
function-bind "^1.1.1"
216216

217-
highlight.js@11.5.0:
218-
version "11.5.0"
219-
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.5.0.tgz#00abb7ed926491adbdabc93a4f3fd2b88b451b4a"
220-
integrity sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw==
217+
highlight.js@11.6.0:
218+
version "11.6.0"
219+
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a"
220+
integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==
221221

222222
inflight@^1.0.4:
223223
version "1.0.6"
@@ -358,10 +358,10 @@ rollup-pluginutils@^2.8.2:
358358
dependencies:
359359
estree-walker "^0.6.1"
360360

361-
rollup@^2.75.7:
362-
version "2.75.7"
363-
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.75.7.tgz#221ff11887ae271e37dcc649ba32ce1590aaa0b9"
364-
integrity sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==
361+
rollup@^2.76.0:
362+
version "2.76.0"
363+
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.76.0.tgz#c69fe03db530ac53fcb9523b3caa0d3c0b9491a1"
364+
integrity sha512-9jwRIEY1jOzKLj3nsY/yot41r19ITdQrhs+q3ggNWhr9TQgduHqANvPpS32RNpzGklJu3G1AJfvlZLi/6wFgWA==
365365
optionalDependencies:
366366
fsevents "~2.3.2"
367367

@@ -414,17 +414,17 @@ supports-color@^7.0.0:
414414
dependencies:
415415
has-flag "^4.0.0"
416416

417-
svelte-highlight@^6.1.2:
418-
version "6.1.2"
419-
resolved "https://registry.yarnpkg.com/svelte-highlight/-/svelte-highlight-6.1.2.tgz#aed8ac838c8f198f6bfa520d997bdcc6c349eefa"
420-
integrity sha512-Oe78gBhU8YrQSA9K8mBYn23oNLtitEi7dO0AvKmDKHqNvQR9WCBFT6BhPPWXC7ONInH8F6dv4hRrgJYJM7iXOw==
417+
svelte-highlight@^6.2.0:
418+
version "6.2.0"
419+
resolved "https://registry.yarnpkg.com/svelte-highlight/-/svelte-highlight-6.2.0.tgz#ebd75f72c9367e5eaa88892535097dbbfa836d7a"
420+
integrity sha512-OxaWIPDbHCsn3s/ztCi5aY5YIqqP0+VmLTXuV+oO5fRXbd3AAWLaTsfn8ksIppjs9vdnfYj0X6fLhe6CNmAQgg==
421421
dependencies:
422-
highlight.js "11.5.0"
422+
highlight.js "11.6.0"
423423

424-
svelte@^3.48.0:
425-
version "3.48.0"
426-
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.48.0.tgz#f98c866d45e155bad8e1e88f15f9c03cd28753d3"
427-
integrity sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==
424+
svelte@^3.49.0:
425+
version "3.49.0"
426+
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
427+
integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
428428

429429
terser@^5.0.0:
430430
version "5.7.1"

‎examples/snowpack/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"build": "snowpack build --reload"
66
},
77
"dependencies": {
8-
"svelte": "^3.48.0",
9-
"svelte-highlight": "^6.1.2"
8+
"svelte": "^3.49.0",
9+
"svelte-highlight": "^6.2.0"
1010
},
1111
"devDependencies": {
1212
"@snowpack/plugin-svelte": "^3.7.0",

0 commit comments

Comments
 (0)