Code Blocks is a service that syntax highlights source code for use on your web pages.
Try it
Go to the Code Blocks web page, select the language (let me know if I should add more), select the VS Code theme to use, then paste in (or type!) your source code in the box provided.
You will see a live preview of how your code block will look and the HTML code for it will be displayed below that.
The HTML code is self contained and doesn't require any external resources so you can paste it into any web page and it should look just like the preview.
The project
I wanted to be able to display snippets of source code on this website, to aid in explanations and as a hopefully useful reference.
I also wanted the source code to look good and be easy to follow, similar to if it was open in a code editor.
Solutions I have used in the past have worked fine but have fallen short with frustrating inconsistencies and incorrect rendering.
While looking for options I found Shiki, made by Pine.
From the website: "Shiki uses TextMate grammar to tokenize strings, and colors the tokens with VS Code themes. In short, Shiki generates HTML that looks exactly like your code in VS Code."
It really achieves that consistency with the theme you choose and as it uses TextMate grammar it gets the rendering right.
I put together the Code Blocks page to take some source code and output a completely self contained piece of HTML that will render the highlighted code in a block with a title bar and logo for the language selected.
The logo for the language is an inline SVG and all the style is inline too.
There are pros and cons to having the code block self contained.
It will load fast and doesn't require JavaScript or any other external resource and can be moved anywhere on its own and render the same way.
The downside is if you have multiple uses of it and want to make a style change to all of them then it would need to be done individually, or programmatically in some way.
Conclusion
This was a fun little project which will hopefully be beneficial and find some use. If nothing else it should provide a good demonstration of Shiki and how well that works.