Add parsing code block after learning Docusaurus

#opensource #typescript #java #react

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.

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.

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →