Code

Code highlights snippets of code that appears along with body text, while preserving its formatting. Use inline code snippets when you wish to highlight a short code snippet from the surrounding default text, such as when referencing variable names.

Examples

Basic usage

Import a highlighter for your desired language and pass it along with the code.

<script>
	import { javascript } from '@kwangure/strawberry/code';

	const code = 'const five = 5;\nconst thirty = five * 6';
</script>

<code>
	{#each javascript(code) as { segment, color }}
		<span class='br-token-{color}'>{segment}</span>
	{/each}
</code>

const five = 5; const thirty = five * 6

Inline usage

Use the .br-code-inline class prop to render code inline along with text.

<script>
    import { plainHTML } from '@kwangure/strawberry/code';
</script>

Use <code class="br-code-inline">
	{#each plainHTML('<h1>Hello world!</h1>') as { segment, color }}
		<span class='br-token-{color}'>{segment}</span>
	{/each}
</code> to greet the planet.

Use <h1>Hello world!</h1> to greet the planet.

Supported languages

The following is a sample of the different supported languages.

<script>
    import { cpp, css, javascript, mixedHTML, python, rust } from '@kwangure/strawberry/code';

    const languages = /** @type {const} */ ([
    	['HTML', mixedHTML, '<h1>Hello world!</h1>'],
    	['CSS', css, ['.center {',
    		'    display: flex;',
    		'    align-items: center;',
    		'    justify-content: center;',
    		'}'].join('\n')],
    	['JavaScript', javascript, 'const isEven = (i) => i % 2 === 0;'],
    	['Python', python, 'lambda i: (i % 2) == 0'],
    	['C++', cpp, 'bool isEven(int x) { return !(x % 2); }'],
    	['Rust', rust, 'let is_even = |x: i32| x % 2 == 0;'],
    ]);
</script>

{#each languages as [name, highlighter, code]}
    <h3>{name}</h3>
    <code>
        {#each highlighter(code) as { segment, color }}
            <span class='br-token-{color}'>{segment}</span>
        {/each}
    </code>
{/each}

HTML

<h1>Hello world!</h1>

CSS

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

JavaScript

const isEven = (i) => i % 2 === 0;

Python

lambda i: (i % 2) == 0

C++

bool isEven(int x) { return !(x % 2); }

Rust

let is_even = |x: i32| x % 2 == 0;