Implement a Docusaurus Feature

Introduction

This week, I'm working on my Static Site Generator (SSG) - Potato Generator to add a new feature for it.

I was introduced a new tool, which is Docusaurus. It has several useful functionalities that can be used to implement a website such as supporting React components, Themes, Plugins, Markdown support,... It took me a while to download the Docusaurus app, tried to publish it on my own and explored the features. It was interesting, you can take a look at my Docusaurus Demo Website.

I picked Syntax Hightlighting for code block to implement into my SSG. For many programmers, it is needed to have this function in your SSG because every programmer would have the code block in any of their documents.

Process

I broke down the tasks into 2 issues to solve: Identify code block and style for code block.

In order to identify the code block, I wrote code to notice the appearance of code block when I write the output to HTML file. Whenever there is an open syntax of code block, I would put the code following until finding close syntax of code block into a div container.

This is the result after identifying the code block and write them to HTML.

After that, I changed the style for the div container to have black background, white text with normal fonts. It would look more similar like a code block.

Here is the result after modifying the style.

Whenever there is a code block input into my program, it would be exported to HTML in the following format:

<div style='background-color: black; color: white;'>

<p style='font-family:Consolas;'> int main(){</p>
<p style='font-family:Consolas;'> cout << "Hello World";</p>
<p style='font-family:Consolas;'> }</p> 

</div>

Conclusion

Overall, I felt interesting to implement such an useful feature like this. I would like to improve my SSG with more useful functionalities like this in the future.

Looking at my commit of new code block feature on SSG.