# svelte-highlight
![npm](https://img.shields.io/npm/v/svelte-highlight?color=ff3e00&style=for-the-badge)
![npm](https://img.shields.io/npm/dt/svelte-highlight?color=ff3e00&style=for-the-badge)
![Travis (.com)](https://img.shields.io/travis/com/metonym/svelte-highlight?style=for-the-badge)
> Syntax Highlighting for Svelte using [highlight.js](https://github.com/highlightjs/highlight.js).
This component wraps [highlight.js](https://github.com/highlightjs/highlight.js) to provide syntax highlighting in [Svelte 3](https://github.com/sveltejs/svelte).
## [Live Demo](https://metonym.github.io/svelte-highlight)
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Injected Styles](#injected-styles)
- [CSS StyleSheet](#css-stylesheet)
- [Svelte Syntax Highlighting](#svelte-syntax-highlighting)
- [Custom Language](#custom-language)
- [API](#api)
- [Props](#props)
- [Forwarded Events](#forwarded-events)
- [Dispatched Events](#dispatched-events)
- [TypeScript](#typescript)
- [Supported Languages](#supported-languages)
- [Supported Styles](#supported-styles)
- [Examples](#examples)
- [Changelog](#changelog)
- [License](#license)
## Install
```bash
yarn add -D svelte-highlight
# OR
npm i -D svelte-highlight
```
## Usage
There are two ways to apply `highlight.js` styles:
1. inject JavaScript styles through `svelte:head`
2. import CSS StyleSheets using a css file loader.
### Injected Styles
This component exports `highlight.js` themes in JavaScript. Import the theme from `svelte-highlight/styles` and inject it using the [svelte:head](https://svelte.dev/docs#svelte_head) API.
```svelte
{@html github}
```
### CSS StyleSheet
Importing a CSS StyleSheet in Svelte requires a CSS file loader. Refer to [examples/webpack](examples/webpack) for a sample set-up.
```svelte
```
## Svelte Syntax Highlighting
This library uses [highlightjs-svelte](https://github.com/AlexxNB/highlightjs-svelte) to highlight Svelte code.
```svelte
{@html github}
```
## Custom Language
For custom language highlighting, pass a `name` and `register` function to the language prop.
Refer to the highlight.js [language definition guide](https://highlightjs.readthedocs.io/en/latest/language-guide.html) for guidance.
```svelte
```
## API
### Props
| Property name | Value |
| ---------------- | ----------------------------------------------------- |
| code | `string` |
| language | `object` { name: `string`; register: hljs => object } |
| `...$$restProps` | (forwarded to the `pre` element) |
### Forwarded Events
The following events are forwarded to the `pre` element:
- on:click
- on:mouseover
- on:mouseenter
- on:mouseleave
- on:focus
- on:blur
### Dispatched Events
- on:highlight
```svelte
..."
}}"
/>
```
## TypeScript
Svelte version 3.31 or greater is required to use this component with TypeScript.
## [Supported Languages](SUPPORTED_LANGUAGES.md)
## [Supported Styles](SUPPORTED_STYLES.md)
## Examples
- [examples/rollup](examples/rollup)
- [examples/rollup-typescript](examples/rollup-typescript)
- [examples/snowpack](examples/snowpack)
- [examples/svite](examples/svite)
- [examples/webpack](examples/webpack)
## [Changelog](CHANGELOG.md)
## License
[MIT](LICENSE)