Sooner or later I will have to completely rewrite the code of my blog. Two years ago I switched from WordPress to Jekyll - it was a good choice. But the deeper I delve into Svelte the more curious I am to see what I can do. The last thing I got hooked on was how to show code snippets in Svelte. To my amazement it doesn’t seem like a very in-depth topic, but I think I’ve found 4 ways that can work for me.
PrismJS and Svelte
The first method is to use Prismjs directly on a Markdown page. As an example I use my MEMENTO - SvelteKit & GitHub Pages. In this project the blog pages are md (markdown) files. Each page in the blog folder is a post from a hypothetical blog. And the code is shown using what’s called code fencing:
I want the code to look something like this:
How to do? First I import Prism into my template using:
npm i -D prismjs
I can use it directly in a Svelte file but it is better to insert it only once, in the __layout__ file: in this way every piece of code will appear the same way on every post of the blog.
Based on the blog theme I can change the theme used to show the codes. I can also use a custom theme, maybe Dracula. To use it I import prism-themes with the command:
npm i -D prism-themes
then I import the theme in the file with:
import "prism-themes/themes/prism-dracula.css";
Svelte-Prism
The second way is to use a Svelte component: svelte-prism. This component by Jakob Rosenberg is very convenient if you work inside a file with the .svelte extension. Why? Because in this case I can’t use the 3 backtick sequence.
I install the component:
npm i -D svelte-prism
then I import svelte-prims
The final result is almost identical to the first example:
Embed GitHub Gist in Svelte with easy-gist-async
The third method is to use GitHub Gist to show the various code snippets. The advantage is the ability to show something much more beautiful. The main disadvantage is that the code to be shown lives outside the post: it makes it a little more complicated to edit.
Normally it would be enough to create a Gist and then copy the import code with the button at the top right
The problem is that the code to use is in this format:
<script src="https://gist.github.com/el3um4s/b2ce146321ba67d7420f2a14f1a38544.js"></script>
This involves adding another js script to a Svelte page. But Svelte only accepts one Script element per component. Consequently, I create a new component.
I have found two ways to do this. The first is to use the npm easy-gist-async package. I install it with:
npm i -D easy-gist-async
Then I create an AsyncGist.svelte component:
I use my new component on my page:
The result depends on the style of the page into which the component is imported. It can be a good thing to customize the look but for what I need it is a problem.
Gist.svelte
The last way is my reworking of this svelte.dev/repl. The idea is to create an HTML frame around the imported script: in this way the original styles are maintained. Compared to the original code I have added a mechanism to vary the size of the frame based on the content. I think it is more convenient and more useful.
I create the Gist.svelte component:
and I use it on my page:
The result I get is
Finally I can put all these techniques one after the other and I get
