DEV Community


Posted on

Add parsing code block after learning Docusaurus

After learning about Docusaurus, I decided to try to add feature syntax highlight for code blocks.

Firstly, I added basic parse coding function which added an isInsideCodeBlock flag to check if it is the coding part. Then I wanna to parse comments like to add the title, highlight some lines, add line number and etc. But when I check the Docusaurus, the title uses class name codeBlockLines_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module appears to be quite specific to a particular code within the Docusaurus documentation theme. I guess it may not be suitable to general HTML.
So I tried to parse the comment by checking the "showLineNumber" and then add the line number for every code.

Image description

In this work, I learned from Docusaurus to parse the comment and show the info according to the comment, I also add the comment and show the line number if I got this comment. But I only add show line number, maybe later I can add more parseComment.

Top comments (0)