https://github.com/stabldev/highlight.svelte
Svelte Language Definition for highlight.js with Typescript support.
https://github.com/stabldev/highlight.svelte
highlightjs language-definition svelte svelte-5 typescript
Last synced: 5 months ago
JSON representation
Svelte Language Definition for highlight.js with Typescript support.
- Host: GitHub
- URL: https://github.com/stabldev/highlight.svelte
- Owner: stabldev
- Created: 2024-10-28T06:28:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-22T11:00:44.000Z (5 months ago)
- Last Synced: 2025-07-22T13:05:46.832Z (5 months ago)
- Topics: highlightjs, language-definition, svelte, svelte-5, typescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/highlight.svelte
- Size: 1.55 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
highlight.svelte
**Svelte** Language Definition for highlight.js with Typescript support.\
Updated fork of [`highlightjs-svelte`](https://github.com/AlexxNB/highlightjs-svelte)
## Installation
```bash
npm install highlight.js highlight.svelte --save-dev
```
## Importing the Lib
To use the Svelte language definition with `highlight.js`, you have two options for importing:
### 1. Optimized Imports (Recommended)
```js
// import core hljs api and register required languages
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
// optional: if you are using 'lang="ts"'
import typescript from 'highlight.js/lib/languages/typescript';
import css from 'highlight.js/lib/languages/css';
import xml from 'highlight.js/lib/languages/xml';
import svelte from 'highlight.svelte';
// register each language definition
hljs.registerLanguage([lang - name], [lang - module]);
```
### 2. Full Import (Less Optimal)
If you prefer to load all languages provided by `highlight.js`, you can use this approach. However, this may significantly increase your bundle size since it imports all available languages.
```js
import hljs from 'highlight.js';
import svelte from 'highlight.svelte';
hljs.registerLanguage('svelte', svelte);
```
## Usage
> Follow [optimized importing](#1-optimized-imports-recommended).\
> Usage examples are based on [less optimal way](#2-full-import-less-optimal) to reduce docs length.
### Node.js / `require`
```js
const hljs = require('highlight.js');
hljs.registerLanguage('svelte', require('highlight.svelte'));
const highlightedCode = hljs.highlight(code, { language: 'svelte' }).value;
```
### ES6 Modules / `import`
```js
import hljs from 'highlight.js';
import svelte from 'highlight.svelte';
hljs.registerLanguage('svelte', svelte);
const highlightedCode = hljs.highlight(code, { language: 'svelte' }).value;
```
### Browser / `cdn`
```html
hljs.highlightAll();
{code}
```
## Development
Project is powered by nx workspace.\
Follow basic steps:
1. `npm i`
2. `npm run dev`
This will build package and spin up an example svelte-vite app with package installed.\
Visit: [localhost:5173](http://localhost:5173)