I have introduced a new feature to my CLI static site generator, which is support for syntax highlighting in code blocks.
How it Functions
When a Markdown file is passed to our system, we parse all code blocks enclosed by triple backticks line by line. We also identify the code's programming language. We then construct a <pre> tag with a <code> tag inside it, encapsulating the code lines. This code block is given a class corresponding to the language, enabling Prism to apply the appropriate styling.
I implemented this feature because I believe it greatly enhances the presentation of code snippets in web browsers, making them clearer and more comprehensible.
Docusaurus Influence
While reading the Docusaurus documentation last week for my class project, I was struck by the appealing design of code blocks. The ability to copy code with a simple click further impressed me.
I originally conceived the idea of parsing Markdown using a separate parsing function and later integrating it with the main parsed text. I also utilized Prism for syntax highlighting. However, at present, I'm generating HTML with Prism even when it's not Markdown, which should be addressed. The only current distinction in my implementation is that I've streamlined it, as it's a raw implementation, with planned future enhancements.
I will continue working on this feature and will likely create a Trello board to help me stay organized, as I sometimes struggle with maintaining a consistent work schedule. For now, there are a few open issues that address basic functionality and some bugs, which you can find here
Top comments (0)