https://github.com/shinokada/svelte-rune-highlight

Syntax highlighting for Svelte 5 Runes using highlight.js
https://github.com/shinokada/svelte-rune-highlight

highlightjs runes svelte sveltekit

Last synced: about 2 months ago
JSON representation

Syntax highlighting for Svelte 5 Runes using highlight.js

• Host: GitHub
• URL: https://github.com/shinokada/svelte-rune-highlight
• Owner: shinokada
• License: mit
• Created: 2024-02-22T05:15:15.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-05-28T19:18:10.000Z (8 months ago)
• Last Synced: 2024-05-29T10:23:00.941Z (8 months ago)
• Topics: highlightjs, runes, svelte, sveltekit
• Language: CSS
• Homepage: https://svelte-rune-highlight.codewithshin.com
• Size: 2.02 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: License

Awesome Lists containing this project

README

        
# Svelte Rune Highlight

[DEMO](https://svelte-rune-highlight.codewithshin.com/)

Syntax highlighting for Svelte using [highlight.js](https://github.com/highlightjs/highlight.js).

This lib is ported from [Svelte-Highlight](https://www.npmjs.com/package/svelte-highlight).

## Installation

Install Svelte 5 and enable runes in svelte.config.js:

```

import adapter from '@sveltejs/adapter-auto';

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */

const config = {

  preprocess: [vitePreprocess({})],

  compilerOptions: {

    runes: true

  },

  kit: {

    adapters.

    adapter: adapter()

  }

};

export default config;

```

Install `svelte-rune-highlight`:

```

pnpm i -D svelte-rune-highlight highlight.js

```

## Docs

[Docs](https://svelte-rune-highlight.codewithshin.com/)

## Highlight component

[Highlight](https://svelte-rune-highlight.codewithshin.com/highlight)

## HighlightAuto component

[HighlightAuto](https://svelte-rune-highlight.codewithshin.com/auto)

## HighlightSvelte component

[HighlightSvelte](https://svelte-rune-highlight.codewithshin.com/svelte)

## Line numbers

[Line numbers](https://svelte-rune-highlight.codewithshin.com/line-numbers)

## Custom wrapper

[Custom wrapper](https://svelte-rune-highlight.codewithshin.com/wrapper)

## Credit

[Svelte-Highlight](https://www.npmjs.com/package/svelte-highlight)