https://github.com/metonym/svelte-preprocess-highlight

Svelte preprocessor that syntax highlights code using highlight.js
https://github.com/metonym/svelte-preprocess-highlight

highlight prettier svelte svelte-preprocessor

Last synced: about 1 month ago
JSON representation

Svelte preprocessor that syntax highlights code using highlight.js

• Host: GitHub
• URL: https://github.com/metonym/svelte-preprocess-highlight
• Owner: metonym
• License: mit
• Created: 2022-06-26T18:14:27.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-07-02T20:19:20.000Z (over 1 year ago)
• Last Synced: 2024-09-15T02:12:19.012Z (2 months ago)
• Topics: highlight, prettier, svelte, svelte-preprocessor
• Language: TypeScript
• Homepage:
• Size: 145 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

[email protected]

- 896 kB (minified)

[email protected]

- 423.2 kB (minified)

```

**Original**

```svelte


{`

  const sum = (a: number, b: number) => a + b;

`}



```


**Processed**

```svelte

const sum = (a: number, b: number) => a + b;



```


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


  {toggleFunctionCode

    ? "const sum = (a: number, b: number) => a + b;"

    : "const difference = (a: number, b: number) => a - b;"}



```


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

{"const sum = (a: number, b: number) => a + b;"}

```


**Multi-line**

```svelte


{`

  const sum = (a: number, b: number) => a + b;


  const difference = (a: number, b: number) => a - b;

`}



```


## 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)