Learn about Docusaurus
Tags: opensource, react, typescript
Published: 2023-10-27 16:34:57


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jempn4x05082dtkcuohz.png)

[Docusaurus](https://github.com/facebook/docusaurus) is a React-based static site generator built and maintained by Facebook. It helps projects document their technology for users and developers, without having to put a lot of effort into creating a full website. Lots of projects use Docusaurus for their project documentation, for example Jest, Redis, creact-react-app, Home Assistant, React Native, and many more.

In order to learn how to do a large open source project, I learned Docusaurus project this week. 

First, I tried run it on my computer according to the [Installation](https://docusaurus.io/docs/installation). It's quite simple to run it, I just run two commands:
`npx create-docusaurus@latest my-website classic
npx docusaurus start`
then a browser window opened at http://localhost:3000. It's really cool!

Then I played around it according to the tutorial showed on my page to create a page, document, blog post:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb0iw4ktxdygrb4a8d5m.png)


Docusaurus has many cool [features](https://docusaurus.io/docs/category/guides), among these I was more interested in [Sidebar](https://docusaurus.io/docs/sidebar) and [code block](https://docusaurus.io/docs/markdown-features/code-blocks). 

At first, I tried to search "sidebar" on github, but I got 448 code files. Luckily I found the sidebars folder at the top:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ocgdnemoypc3qdeycoz.png)

So I went to the [sidebars folder](https://github.com/facebook/docusaurus/tree/495c7936b605e6b8881f000d23a8463a9d6d850c/packages/docusaurus-plugin-content-docs/src/sidebars) which has a README and gives the basic steps, but the sidebar is complicated and hard to navigate, also hard for to add in my java project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vewwyk0n189397rzs14j.png)


So I tried to search [code block](https://github.com/search?q=repo%3Afacebook%2Fdocusaurus+code+blocks&type=code) and get two main files:
`packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts
packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx`
I read these two files and get the detail information:
1. **Docusaurus using codeBlockUtils.ts to get commentPattern.**
It has the basic structure:
`type CommentType
type MagicCommentConfig
func getCommentPattern
func getAllMagicCommentDirectiveStyles
func parseCodeBlockTitle
func containsLineNumbers
func parseLanguage
func parseLines
func getPrismCssVariables`
It is a collection of utility functions and regular expressions for handling and processing code blocks in Markdown. It allows to parse code blocks, extract metadata, and apply syntax highlighting based on language-specific comment patterns. 
 
2. **Docusaurus using function CodeBlockString(in String.tsx to create the code part).** It only has two function:
`func normalizeLanguage
func CodeBlockString`
It is a React component used for rendering code blocks in a documentation website. It leverages the prism-react-renderer library to apply syntax highlighting to the code and provides various features like line numbering, copying code to the clipboard, and word wrapping. 

 [CodeBlockString](https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx) using [parseLines](https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts) to get clean code, then output