sveltekit-helpers

Syntax Highlighting Made Easy with Shiki in SvelteKit

Thilo Maier •

Blockquote

Here is a long quote:

The journey of a thousand miles begins with a single step. Every great achievement starts with the courage to dream, the determination to persist, and the wisdom to learn from every obstacle along the way. Success is not a destination, but rather a continuous process of growth, reflection, and meaningful progress toward what truly matters to you. — Ancient Wisdom

And here is a short quote:

The only limit to our realization of tomorrow will be our doubts of today. — Franklin D. Roosevelt

Bash

CodeSnippet component:

Code fences:

echo "Hello, world!"

HTML

CodeSnippet component:

Code fences:

<h1>Hello, world!</h1>

JavaScript

CodeSnippets component:

Code fences:

console.log('Hello, world!');

JSON

CodeSnippet component:

Code fences:

{
	"name": "John",
	"age": 30
}

Markdown

CodeSnippet component:

Code fences:

# Hello, world!

Svelte

CodeSnippet component:

Code fences:

<script>
	let message = $state('Hello, world!');
</script>

<h1>{message}</h1>

Text

CodeSnippet component:

Code fences:

Hello, world!

TypeScript

CodeSnippet component:

Code fences:

export type User = {
	name: string;
	age: number;
};

YAML

CodeSnippet component:

Code fences:

name: John
age: 30

XML

CodeSnippet component:

Code fences:

<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>