Highlight Component

Basic

The Highlight component requires language and code props. The langtag prop is optional and it will add a language tag.

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'svelte-rune-highlight/languages/typescript';
  const modules = import.meta.glob('./samples/*.md', { query: '?raw', import: 'default', eager: true });
</script>

<Highlight language={typescript} code={modules['./samples/javascript.md'] as string} />

The above code will produce:

let message = "Hello, world!";
console.log(message);

const age = 25;

if (age > 18) {
console.log("You are more than 18 years.");
}

Language Tag

Markdown

Set langtag and language props to display the language name in the top right corner of the code block.

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import markdown from 'svelte-rune-highlight/languages/markdown';
  const modules = import.meta.glob('./samples/*.md', { query: '?raw', import: 'default', eager: true });
</script>

<Highlight language={markdown} code={modules['./samples/markdown.md'] as string} langtag --langtag-color="lightgreen" />

Here's what you'll see when you run this code:

# This is a heading

This is some paragraph text.

- Here is an unordered list item.
- Another list item.

**This text is bold.**

YAML

Yaml example:

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import yaml from 'svelte-rune-highlight/languages/yaml';
  const modules = import.meta.glob('./samples/*.md', { query: '?raw', import: 'default', eager: true });
</script>

<Highlight language={yaml} code={modules['./samples/yaml.md'] as string} langtag --langtag-color="lightcoral" />

This code generates the following output:

name: My Application
version: 1.0.0
services:

- name: web
  image: my-image:latest
  ports:
  - 80:80

JSON

JSON example:

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import json from 'svelte-rune-highlight/languages/json';
  const modules = import.meta.glob('./samples/*.md', { query: '?raw', import: 'default', eager: true });
</script>

<Highlight language={json} code={modules['./samples/json.md'] as string} langtag --langtag-color="springgreen" />

The code produces this output:

{
"name": "John Doe",
"age": 30,
"city": "New York",
"is_active": true,
"hobbies": ["reading", "hiking", "coding"]
}

Props

Props example:

numberLine?: boolean;
language: any;
code: string;
langtag?: boolean;
hideBorder?: boolean;
wrapLines?: boolean;
startingLineNumber?: number = 1;
highlightedLines?: number[];

Language tag style

Customize the language tag background, color, and border-radius using style props.

--langtag-top = 0: Top position of the langtag
--langtag-right = 0: Right position of the langtag
--langtag-background = inherit: Background color of the langtag
--langtag-color = inherit: Text color of the langtag
--langtag-border-radius = 0: Border radius of the langtag
--langtag-padding = 1em: Padding of the langtag

See more about line numbers in the Line Numbers page.