Skip to content

Commit 4ddd4c9

Browse files
metonymmetonym
committed
v0.1.0
0 parents  commit 4ddd4c9

File tree

19 files changed

+1398
-0
lines changed

19 files changed

+1398
-0
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: CI
2+
3+
on:
4+
pull_request:
5+
push:
6+
branches: [master]
7+
8+
jobs:
9+
test:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v2
13+
- uses: actions/cache@v2
14+
id: yarn-cache
15+
with:
16+
path: "**/node_modules"
17+
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
18+
19+
- name: Run unit tests
20+
run: |
21+
yarn
22+
yarn test

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.DS_Store
2+
node_modules
3+
dist

‎.prettierignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist
2+
example/src/App.svelte

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [0.1.0](https://github.com/metonym/svelte-preprocess-highlight/releases/tag/v0.1.0) - 2022-06-26
9+
10+
- Initial release

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019-present Eric Liu
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
# svelte-preprocess-highlight
2+
3+
> Svelte preprocessor that syntax highlights code using [highlight.js](https://github.com/highlightjs/highlight.js)
4+
5+
This preprocessor uses `highlight.js` to syntax highlight and [Prettier](https://github.com/prettier/prettier) to format the text. This approach can greatly decrease the amount of client-side JavaScript because the transformations are done at compile time.
6+
7+
Bundle sizes:
8+
9+
```diff
10+
highlight.js@11.5.1
11+
- 896 kB (minified)
12+
13+
prettier@2.7.1
14+
- 423.2 kB (minified)
15+
```
16+
17+
**Original**
18+
19+
```svelte
20+
<pre data-language="typescript">
21+
{`
22+
const sum = (a: number, b: number) => a + b;
23+
`}
24+
</pre>
25+
```
26+
27+
**Processed**
28+
29+
<!-- prettier-ignore-start -->
30+
```svelte
31+
<pre><code class="hljs"><span class="hljs-keyword">const</span> <span class="hljs-title function_">sum</span> = (<span class="hljs-params">a: <span class="hljs-built_in">number</span>, b: <span class="hljs-built_in">number</span></span>) =&gt; a + b;
32+
</code></pre>
33+
```
34+
<!-- prettier-ignore-end -->
35+
36+
## Limitations
37+
38+
The preprocessor only works for static text; the result must be deterministic. For dynamic use cases, you must include `highlight.js` and Prettier on the client-side.
39+
40+
For example, the following will not work because the code must be re-highlighted when it changes.
41+
42+
```svelte
43+
<pre>
44+
{toggleFunctionCode
45+
? "const sum = (a: number, b: number) => a + b;"
46+
: "const difference = (a: number, b: number) => a - b;"}
47+
</pre>
48+
```
49+
50+
## Installation
51+
52+
```bash
53+
# Yarn
54+
yarn add -D svelte-preprocess-highlight
55+
56+
# NPM
57+
npm i -D svelte-preprocess-highlight
58+
59+
# pnpm
60+
pnpm i -D svelte-preprocess-highlight
61+
```
62+
63+
## Set-up
64+
65+
Add `highlight` to the list of Svelte preprocessors.
66+
67+
### SvelteKit
68+
69+
```js
70+
// svelte.config.js
71+
import { highlight } from "svelte-preprocess-highlight";
72+
73+
const config = {
74+
preprocess: [highlight()],
75+
};
76+
77+
export default config;
78+
```
79+
80+
### Vite
81+
82+
```js
83+
// vite.config.js
84+
import { defineConfig } from "vite";
85+
import { svelte } from "@sveltejs/vite-plugin-svelte";
86+
import { highlight } from "svelte-preprocess-highlight";
87+
88+
export default defineConfig({
89+
plugins: [
90+
svelte({
91+
preprocess: [highlight()],
92+
}),
93+
],
94+
});
95+
```
96+
97+
## Usage
98+
99+
Use a `pre` element with a `data-language` attribute to denote what to highlight. The code to highlight should be placed inside of the `pre` element.
100+
101+
**Single Line**
102+
103+
```svelte
104+
<pre data-language="typescript">{"const sum = (a: number, b: number) => a + b;"}</pre>
105+
```
106+
107+
**Multi-line**
108+
109+
```svelte
110+
<pre data-language="typescript">
111+
{`
112+
const sum = (a: number, b: number) => a + b;
113+
114+
const difference = (a: number, b: number) => a - b;
115+
`}
116+
</pre>
117+
```
118+
119+
## Options
120+
121+
### `ignorePath`
122+
123+
By default, the preprocessor will ignore files in `node_modules` and auto-generated files by SvelteKit (located in `.svelte-kit`).
124+
125+
Use the `ignorePath` option to customize files to ignore.
126+
127+
```js
128+
highlight({
129+
ignorePath: (filename) => {
130+
// Ignore file names that do not end with `.svelte`
131+
if (!/\.(svelte)$/.test(filename)) return true;
132+
133+
// Ignore file names that do not contain "demo"
134+
return !/demo/.test(filename);
135+
},
136+
});
137+
```
138+
139+
### `prettierOptions`
140+
141+
The text is formatted by Prettier before being highlighted.
142+
143+
Pass custom [Prettier options](https://prettier.io/docs/en/options.html) to `prettierOptions`.
144+
145+
```js
146+
highlight({
147+
prettierOptions: {
148+
printWidth: 100,
149+
svelteStrictMode: true,
150+
},
151+
});
152+
```
153+
154+
## Changelog
155+
156+
[CHANGELOG.md](CHANGELOG.md)
157+
158+
## License
159+
160+
[MIT](LICENSE)

‎example/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
.vscode
3+
node_modules/
4+
dist/

‎example/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://unpkg.com/svelte-highlight@6.1.0/styles/monokai-sublime.css"
9+
/>
10+
</head>
11+
<body>
12+
<script type="module">
13+
import App from "./src/App.svelte";
14+
15+
const app = new App({ target: document.body });
16+
</script>
17+
</body>
18+
</html>

‎example/package.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"dev": "vite",
5+
"build": "vite build",
6+
"preview": "vite preview"
7+
},
8+
"devDependencies": {
9+
"@sveltejs/vite-plugin-svelte": "1.0.0-next.49",
10+
"svelte": "^3.48.0",
11+
"vite": "^2.9.12"
12+
}
13+
}

‎example/src/App.svelte‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!-- Expected error: No code provided -->
2+
<pre data-language="typescript" />
3+
4+
<!-- Expected error: Invalid language "typescript2" -->
5+
<pre data-language="typescript2">{"const a= (b:number) =>4"}</pre>
6+
7+
<!-- Expected error: Formatting error > 1 | const a= b:number) =>4 -->
8+
<pre data-language="typescript">{"const a= b:number) =>4"}</pre>
9+
10+
<pre data-language="typescript">{"const a= (b:number) =>4"}</pre>
11+
12+
<pre data-language="typescript">
13+
{`
14+
const sum = (a: number, b: number) => a + b;
15+
`}
16+
</pre>
17+
18+
<pre data-language="svelte">{`
19+
<script>
20+
import Highlight from "svelte-highlight";
21+
import typescript from "svelte-highlight/languages/typescript";
22+
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
23+
24+
const code = "const add = (a: number, b: number) => a + b;";
25+
</script>
26+
27+
<svelte:head>
28+
{@html atomOneDark}
29+
</svelte:head>
30+
31+
<Highlight language={typescript} {code} />`}</pre>
32+
33+
<pre data-language="typescript">
34+
{`
35+
// helpers.js
36+
37+
export function multiply(a: number, b: number) {
38+
return a * b;
39+
}
40+
41+
export function divide(a: number, b: number) {
42+
return a / b;
43+
}
44+
45+
export function add(a: number, b: number) {
46+
return a + b;
47+
}
48+
49+
export function subtract(a: number, b: number) {
50+
return a - b;
51+
}
52+
`}
53+
</pre>
54+
55+
<pre data-language="css">
56+
{`
57+
body {
58+
color: red;
59+
}
60+
`}
61+
</pre>

0 commit comments

Comments
 (0)