Use monaco-mermaid for syntax highlighting and many syntax highlighting improvements

[Yash-Singh1]

📑 Summary

This changes the syntax highlighting of the documentation:

• Use monaco-mermaid to highlight code snippets that is Mermaid code
• Add mermaid-example to remove redundant code snippet and diagram scenarios.
• Many other code fences with syntax highlighting (added while I was going through the documentation)
• Added code in places where an example was provided and the diagram rendered was only shown

Related to mermaid-js/mermaid-live-editor#404

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

• Imports monaco-editor and monaco-mermaid
• Adds plain elements to docs
• Asynchronously colorized elements

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 🔖 targeted develop branch

[sidharthv96]

The highlighting works perfectly when a page is loaded for me, but when I navigate to another page using the navbar, highlighting isn't done.

Screen.Recording.2021-11-01.at.11.54.34.PM.mov

[sidharthv96]

The next step you mentioned for removing duplicate is a very welcome addition. As there were issues reported in live editor citing lack of example and it'll free up the maintainers from having to keep the copies in sync.

Ref: #2394 (comment)

[Yash-Singh1]

The next step you mentioned for removing duplicate is a very welcome addition. As there were issues reported in live editor citing lack of example and it'll free up the maintainers from having to keep the copies in sync.

Ref: #2394 (comment)

Sure I will include that in this PR.

The highlighting works perfectly when a page is loaded for me, but when I navigate to another page using the navbar, highlighting isn't done.

I will look into this.

[knsv]

@Yash-Singh1 This looks very promising!