Highlight Component

Basic

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

let message = "Hello, world!";
console.log(message);
const age = 25;
if (age > 18) {
  console.log("You are more than 18 years.");
}

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import javascript from 'highlight.js/lib/languages/javascript';
  const code = `let message = "Hello, world!";
console.log(message);
const age = 25;
if (age > 18) {
  console.log("You are more than 18 years.");
}`;
  const jsLang = {
    name: 'javascript',
    register: javascript
  };
</script>

<Highlight langtag --langtag-color="LightCyan" --code-font-size="20px" language={jsLang} {code} />

Language Tag with different styles

Markdown

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

# This is a heading This is some paragraph text. 

- Here is an unordered list item. 
- Another list item. 
 
**This text is bold.**

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import markdown from 'highlight.js/lib/languages/markdown';
  const code = `# This is a heading This is some paragraph text. 

- Here is an unordered list item. 
- Another list item. 
 
**This text is bold.**`;
  const mdLang = {
    name: 'markdown',
    register: markdown
  };
</script>

<Highlight langtag --langtag-color="Violet" --langtag-background="Gold" --langtag-border-radius="20px" language={mdLang} {code} />

YAML

name: My Application
version: 1.0.0
services:

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

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import yaml from 'highlight.js/lib/languages/yaml';
  const code = `name: My Application
version: 1.0.0
services:

- name: web
  image: my-image:latest
  ports:
  - 80:80
`;
  const jsYaml = {
    name: 'yaml',
    register: yaml
  };
</script>

<Highlight langtag --langtag-color="Pink" --code-line-height="2" --code-padding="2rem" --code-font-size="1rem" --code-font-family="Monaco" language={jsYaml} {code} />

JSON

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

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import json from 'highlight.js/lib/languages/json';
  const code = `{
  "name": "John Doe",
  "age": 30,
  "city": "New York",
  "is_active": true,
  "hobbies": ["reading", "hiking", "coding"]
}`;
  const jsonLang = {
    name: 'json',
    register: json
  };
</script>

<Highlight langtag --langtag-color="DeepPink" --code-font-size="10px" language={jsonLang} {code} />

Typescript

const message: string = "Hello, world!";
console.log(message);

function greet(fname: string): string {
  return "Hello, ${fname}!";
}
console.log(greet("Bard"));

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'highlight.js/lib/languages/typescript';
  const code = `const message: string = "Hello, world!";
console.log(message);

function greet(fname: string): string {
  return "Hello, \${fname}!";
}
console.log(greet("Bard"));`;
  const tsLang = {
    name: 'typescript',
    register: typescript
  };
</script>

<Highlight langtag --langtag-color="Violet" --langtag-background="#fff" --langtag-border-radius="10px" --code-font-family="cursive" language={tsLang} {code} />

Props

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