v0.1.0

Author: metonym

.github/workflows/ci.yml

@@ -0,0 +1,22 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Run unit tests
+        run: |
+          yarn
+          yarn test

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

.prettierignore

@@ -0,0 +1,2 @@
+dist
+example/src/App.svelte

CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0](https://github.com/metonym/svelte-preprocess-highlight/releases/tag/v0.1.0) - 2022-06-26
+
+- Initial release

LICENSE

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

README.md

@@ -0,0 +1,160 @@
+# svelte-preprocess-highlight
+
+> Svelte preprocessor that syntax highlights code using [highlight.js](https://github.com/highlightjs/highlight.js)
+
+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.
+
+Bundle sizes:
+
+```diff
+highlight.js@11.5.1
+- 896 kB (minified)
+
+prettier@2.7.1
+- 423.2 kB (minified)
+```
+
+**Original**
+
+```svelte
+<pre data-language="typescript">
+{`
+  const sum = (a: number, b: number) => a + b;
+`}
+</pre>
+```
+
+**Processed**
+
+<!-- prettier-ignore-start -->
+```svelte
+<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;
+</code></pre>
+```
+<!-- prettier-ignore-end -->
+
+## Limitations
+
+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.
+
+For example, the following will not work because the code must be re-highlighted when it changes.
+
+```svelte
+<pre>
+  {toggleFunctionCode
+    ? "const sum = (a: number, b: number) => a + b;"
+    : "const difference = (a: number, b: number) => a - b;"}
+</pre>
+```
+
+## Installation
+
+```bash
+# Yarn
+yarn add -D svelte-preprocess-highlight
+
+# NPM
+npm i -D svelte-preprocess-highlight
+
+# pnpm
+pnpm i -D svelte-preprocess-highlight
+```
+
+## Set-up
+
+Add `highlight` to the list of Svelte preprocessors.
+
+### SvelteKit
+
+```js
+// svelte.config.js
+import { highlight } from "svelte-preprocess-highlight";
+
+const config = {
+  preprocess: [highlight()],
+};
+
+export default config;
+```
+
+### Vite
+
+```js
+// vite.config.js
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { highlight } from "svelte-preprocess-highlight";
+
+export default defineConfig({
+  plugins: [
+    svelte({
+      preprocess: [highlight()],
+    }),
+  ],
+});
+```
+
+## Usage
+
+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.
+
+**Single Line**
+
+```svelte
+<pre data-language="typescript">{"const sum = (a: number, b: number) => a + b;"}</pre>
+```
+
+**Multi-line**
+
+```svelte
+<pre data-language="typescript">
+{`
+  const sum = (a: number, b: number) => a + b;
+
+  const difference = (a: number, b: number) => a - b;
+`}
+</pre>
+```
+
+## Options
+
+### `ignorePath`
+
+By default, the preprocessor will ignore files in `node_modules` and auto-generated files by SvelteKit (located in `.svelte-kit`).
+
+Use the `ignorePath` option to customize files to ignore.
+
+```js
+highlight({
+  ignorePath: (filename) => {
+    // Ignore file names that do not end with `.svelte`
+    if (!/\.(svelte)$/.test(filename)) return true;
+
+    // Ignore file names that do not contain "demo"
+    return !/demo/.test(filename);
+  },
+});
+```
+
+### `prettierOptions`
+
+The text is formatted by Prettier before being highlighted.
+
+Pass custom [Prettier options](https://prettier.io/docs/en/options.html) to `prettierOptions`.
+
+```js
+highlight({
+  prettierOptions: {
+    printWidth: 100,
+    svelteStrictMode: true,
+  },
+});
+```
+
+## Changelog
+
+[CHANGELOG.md](CHANGELOG.md)
+
+## License
+
+[MIT](LICENSE)

example/.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+.vscode
+node_modules/
+dist/

example/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/svelte-highlight@6.1.0/styles/monokai-sublime.css"
+    />
+  </head>
+  <body>
+    <script type="module">
+      import App from "./src/App.svelte";
+
+      const app = new App({ target: document.body });
+    </script>
+  </body>
+</html>

example/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "1.0.0-next.49",
+    "svelte": "^3.48.0",
+    "vite": "^2.9.12"
+  }
+}

example/src/App.svelte

@@ -0,0 +1,61 @@
+<!-- Expected error: No code provided -->
+<pre data-language="typescript" />
+
+<!-- Expected error: Invalid language "typescript2" -->
+<pre data-language="typescript2">{"const a= (b:number) =>4"}</pre>
+
+<!-- Expected error: Formatting error > 1 | const a= b:number) =>4 -->
+<pre data-language="typescript">{"const a= b:number) =>4"}</pre>
+
+<pre data-language="typescript">{"const a= (b:number) =>4"}</pre>
+
+<pre data-language="typescript">
+{`
+  const sum = (a: number, b: number) => a + b;
+`}
+</pre>
+
+<pre data-language="svelte">{`
+<script>
+  import Highlight from "svelte-highlight";
+    import typescript from "svelte-highlight/languages/typescript";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+
+    const code = "const add = (a: number, b: number) => a + b;";
+</script>
+
+<svelte:head>
+  {@html atomOneDark}
+</svelte:head>
+
+<Highlight language={typescript} {code} />`}</pre>
+
+<pre data-language="typescript">
+{`
+// helpers.js
+  
+  export function multiply(a: number, b: number) {
+    return a * b;
+  }
+  
+  export function divide(a: number, b: number) {
+    return a / b;
+  }
+  
+  export function add(a: number, b: number) {
+    return a + b;
+  }
+  
+  export function subtract(a: number, b: number) {
+    return a - b;
+  }
+`}
+</pre>
+
+<pre data-language="css">
+  {`
+  body {
+    color: red;
+  }
+  `}
+</pre>

example/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { highlight } from "svelte-preprocess-highlight";
+
+export default defineConfig({
+  plugins: [
+    svelte({
+      preprocess: [highlight()],
+    }),
+  ],
+});