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 { Code, javascript } from '@kwangure/strawberry/default/code';

	const code = 'const five = 5;\nconst thirty = five * 6';

</script>

<Code highlight={javascript} code={code}/>

Inline usage

Use the inline boolean prop to render code inline along with text.

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

    const code = '<h1>Hello world!</h1>';
</script>

Use <Code highlight={plainHTML} inline code={code}/> to greet the planet.

Supported languages

The following is a sample of the different supported languages.

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

<h3>HTML</h3>
<Code highlight={mixedHTML} code={'<h1>Hello world!</h1>\nI\'m <em>NOT</em> a wizard.'}/>

<h3>CSS</h3>
<Code highlight={css} code={`.center {
    display: flex;
    align-items: center;
    justify-content: center;
}`}/>

<h3>JavaScript</h3>
<Code highlight={javascript} code={`function isEven( i ) {
    return i % 2 === 0;
  }`}/>

<h3>Python</h3>
<Code highlight={python} code={`def is_even(i):
    return (i % 2) == 0`}/>

<h3>C++</h3>
<Code highlight={cpp} code={`bool isEven(int x)
{
    return !(x % 2);
}`}/>

<h3>Rust</h3>
<Code highlight={rust} code={'let is_even = |x: i32| x % 2 == 0;'}/>