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.