Code

Show a block of code for any programming language.

This component adds some features to the basic Shiki setup such as line numbers and a copy button.

Look to the right!

Prop	Type	Description
code	`string`	Required Code formatted by Shiki
lang	`string`	Required Code syntax highlighting language
lineNumbers	`boolean`	Show line numbers (default: `true`)
startingLineNumber	`number`	Number of first line (default: `1`)
showCopy	`boolean`	Show the copy button (default: `true`)
copyText	`string`	Text for the copy button (default: `'code'`)
copiedText	`string`	Text for the copy button after click (default: `'copied'`)
copiedDuration	`number`	Duration copiedText shows, in ms (default: `2000`)
shiki	`object`
shiki.highlighter	`object`	Shiki highlighter options (e.g. theme and langs)
shiki.cdn	`string`	Path passed to setCDN

<script lang="ts" context="module">
const shikiOptions = {
  highlighter: {
    theme: 'material-theme-palenight',
    langs: ['css', 'html', 'javascript', 'shell', 'svelte'],
  },
  cdn: '/assets/shiki',
};
</script>

<script lang="ts">
import Code from '../components/code.svelte';

const code = `<script lang="ts" context="module">
const shikiOptions = {
  highlighter: {
    theme: 'material-theme-palenight',
    langs: ['css', 'html', 'javascript', 'shell', 'svelte'],
  },
  cdn: '/assets/shiki',
};
</script>

<script lang="ts">
import Code from '../components/code.svelte';

const code = '<h1>This has to stop</h1>';
</script>

<Code {code} shiki={shikiOptions} lang="svelte" />`;
</script>

<Code {code} shiki={shikiOptions} lang="svelte" />