https://github.com/moonlitgrace/highlight.svelte

Svelte Language Definition for highlight.js with Typescript support.
https://github.com/moonlitgrace/highlight.svelte

highlightjs language-definition svelte svelte-5 typescript

Last synced: 2 days ago
JSON representation

Svelte Language Definition for highlight.js with Typescript support.

• Host: GitHub
• URL: https://github.com/moonlitgrace/highlight.svelte
• Owner: moonlitgrace
• Created: 2024-10-28T06:28:26.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-12T16:13:53.000Z (10 days ago)
• Last Synced: 2024-12-12T17:25:22.870Z (10 days ago)
• Topics: highlightjs, language-definition, svelte, svelte-5, typescript
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/highlight.svelte
• Size: 806 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• 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)

![NPM Version](https://img.shields.io/npm/v/highlight.svelte?style=for-the-badge)

![NPM Downloads](https://img.shields.io/npm/dw/highlight.svelte?style=for-the-badge)

![image](https://github.com/user-attachments/assets/91b34879-5347-4cf6-844f-041d93f002a6)

## Installation

```bash

npm i highlight.js highlight.svelte

```

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