Creating a SvelteKit Blog Using mdsvex and shiki

1-22-2024 sveltekitsveltemdsvex

This is an example of creating an mdsvex blog post using shiki for syntax highlighting

mdsvex

SvelteKit is a modern web framework that builds on the principles of the Svelte framework, aiming to simplify the process of building efficient and performant web applications. Developed by the creators of Svelte, SvelteKit provides a higher-level abstraction for routing, navigation, and project structure, making it easier for developers to create dynamic and interactive web experiences. It embraces a file-system-based routing approach, where each route corresponds to a file in the project directory, facilitating a clean and intuitive project structure. SvelteKit also includes built-in support for server-side rendering (SSR), client-side rendering (CSR), and static site generation (SSG), offering flexibility in how developers choose to optimize their applications for speed and search engine visibility. The framework prioritizes developer experience, enabling efficient development with minimal boilerplate while leveraging the power of Svelte's compiler to generate highly optimized and lightweight JavaScript code for the browser.

Joy of Code - Build And Deploy A SvelteKit Markdown Blog



Creating a stunning blog site is now easier than ever with SvelteKit and mdsvex. Thanks to the comprehensive tutorial provided at joyofcode.xyz, you can effortlessly build a feature-rich blog using SvelteKit's powerful framework and mdsvex for seamless Markdown integration. The tutorial covers essential topics such as syntax highlighting, guiding you through the process of setting up your blog site and ensuring a smooth integration of Markdown content. Whether you're a beginner or an experienced developer, this tutorial provides step-by-step instructions, making the journey enjoyable and rewarding. Dive into the world of SvelteKit and mdsvex, and unlock the potential to create a dynamic and visually appealing blog site for your audience.


// App.svelte

/**
 * 
 * This is an example of a svelte code
 * Moreover, this is an example of how we can add code snippets in Markdown,
 * as well implementing code highlighting syntax using shiki
 * 
 * https://github.com/shikijs/shiki
 * https://svelte.dev/
 * 
 */
<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>

Enhancing the visual appeal of your code snippets is a breeze with the inclusion of Shiki in your SvelteKit and mdsvex-powered blog. Shiki, a powerful syntax highlighter, ensures that your code snippets are not only functional but also aesthetically pleasing. The tutorial at joyofcode.xyz provides clear guidance on incorporating Shiki into your project, allowing you to customize the appearance of your code blocks to match the overall design of your blog. With Shiki's extensive language support and themes, you can effortlessly create a professional-looking blog that caters to developers and readers alike. Elevate your blog's coding experience by following the tutorial's instructions on integrating Shiki for top-notch syntax highlighting.