feat: support rendering syntax diagrams

[kennytm]

This PR introduced a remark plugin to supplement code blocks of the form:

```ebnf+diagram
TableName ::= ( Identifier '.' )? Identifier
```

with an SVG syntax diagram. A <SyntaxDiagram> shortcode is introduced for the user to toggle between the diagram and EBNF.

This is intended to gradually replace the entire media/sqlgram directory, to unify the appearances, simplify documentation process, and improve accessibility (images can't be searched).

Preview

Syntax diagram view
Source code view

---

The syntax diagram is generated using @prantlf/railroad-diagrams, and the style has been tweaked to mimic the Railroad Diagram generator used to produce the original images. There are two differences though:

1. The diagrams do not "wrap". You have to scroll horizontally if they become too long.
2. The drop shadow filter does not work on Chrome, so they are removed.

Horizontal scrollbar

In theory @prantlf/railroad-diagrams has the Stack element for manually breaking up the diagram into multiple rows. But in reality there is some bug in the height calculation which caused different rows to overlap. So in this PR we won't include such feature. (And scrolling is needed for mobile anyway.)

[kennytm]

ping @YiniXu9506

[YiniXu9506]

@kennytm Thanks for your contribution, I will take a look ASAP.

[g1eny0ung]

@kennytm Sorry for so late to review this PR because I turned to develop the Chaos Mesh last several months.

I will dig into the implementation of this remark plugin in the next few days.

[kennytm]

Thanks @g1eny0ung.

Material UI has been replaced by Bulma in e0a2773. The style is slightly adjusted (the buttons are no longer ALL CAPS, which was forced by MUI).

Preview

I recommend not to use @material-ui/core because our UI/UX designers want to use the @material-ui/icons. 😢

If we're using Material UI only for the icons, why not use the Material Design Icons instead, which is the same but has zero dependencies 🤔

MUI icons	MDI icons
Add	mdi-plus
Language	mdi-web
Search	mdi-magnify
Flag	mdi-flag
AccountTreeRounded*	mdi-sitemap, rotated left by 90°
Code*	mdi-code-tags
Attachment	mdi-attachment
Warning	mdi-alert

(* = introduced in this PR, so can be replaced by other icons I like 🙃)

[g1eny0ung]

If we're using Material UI only for the icons, why not use the Material Design Icons instead, which is the same but has zero dependencies 🤔

After searching, I found that if we want to use this package with React. We still need to import the @mdi/react library to provide an Icon wrapper. In essence, the difference is not big.

Why we using the @material/icons at the beginning (at that time, we thought it met our needs, so we used it directly, and didn’t consider other options.), these are our three reasons:

1. The @material/icons provide an effective tree shaking solution, so we don't need to import all icons.
2. The Icon wrapper provides consistent behavior for all SVG images, so we can use the other custom images without care about something more.
3. Full documentation support.

[g1eny0ung]

LGTM! 🍾

[lilin90]

@nullnotnil @lysu FYI.