HighlightAuto Component

HighlightAuto automatically detects the programming language of the provided code using Highlight.js and applies syntax highlighting. Optionally, it can display a language tag overlay showing the detected language.

<HighlightAuto code={sample-code} />

Examples

HTML

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example</title>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
  </html>

<script lang="ts">
  import { HighlightAuto } from 'svelte-rune-highlight';
  const code = `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example</title>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
  </html>`;
</script>

<HighlightAuto {code} />

CSS

body {
    font-family: sans-serif;
    margin: 0;
  }

  h1 {
    text-align: center;
    font-size: 2em;
  }

  p {
    color: #333;
    line-height: 1.5;
  }

  a {
    text-decoration: none;
    color: blue;
  }

  img {
    max-width: 100%;
    height: auto;
  }

<script lang="ts">
  import { HighlightAuto } from 'svelte-rune-highlight';
  const code = `body {
    font-family: sans-serif;
    margin: 0;
  }

  h1 {
    text-align: center;
    font-size: 2em;
  }

  p {
    color: #333;
    line-height: 1.5;
  }

  a {
    text-decoration: none;
    color: blue;
  }

  img {
    max-width: 100%;
    height: auto;
  }
`;
</script>

<HighlightAuto {code} />

Javascript

You can use vite's `import.meta.glob()`:

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 { HighlightAuto } from 'svelte-rune-highlight';
  const examples = import.meta.glob('../../examples/*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  });
</script>

<HighlightAuto code={examples['../../examples/js.md'] as string} />

Markdown

# 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 { HighlightAuto } from 'svelte-rune-highlight';
  const examples = import.meta.glob('../../examples/*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  });
</script>

<HighlightAuto code={examples['../../examples/md.md'] as string} />

Typescript

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

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

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

<HighlightAuto code={examples['../../examples/ts.md'] as string} />

Python

message = "Hello, world!"
print(message)

age = 25
if age >= 18:
print("You are eligible to vote.")

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

<HighlightAuto code={examples['../../examples/python.md'] as string} />

Rust

let message = "Hello, world!";
println!("{}", message);

let age = 25;
if age >= 18 {
  println!("You are eligible to vote.");
}

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

<HighlightAuto code={examples['../../examples/rust.md'] as string} />

Props

@prop code = ''
@prop langtag = false
@prop class: className
@prop ...restProps

Language Tag: Caution - This may not be accurate.

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

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