MkDocs代码高亮不支持JSX格式的解决方法咨询

问题说明 #

我的MkDocs配置如下：

theme:
    name: material
    highlightjs: true
    hljs_languages:
        - yaml
        - bash
        - javascript

已经配置了yaml、bash、javascript的语法高亮，但JSX代码没法正常高亮，示例代码：

let component = <span>{this.state.name}</span>;

本地用Typora编辑时这段代码能正常高亮，求解决办法。

解决方法 #

• 直接在配置的hljs_languages里加上jsx，修改后的配置：

theme:
    name: material
    highlightjs: true
    hljs_languages:
        - yaml
        - bash
        - javascript
        - jsx

• 写Markdown的时候，JSX代码块要指定语言为jsx（就是代码块开头用```jsx），别用javascript，这样Highlight.js才会用JSX的规则来高亮。

原因说明 #

Typora自带的高亮引擎默认支持JSX，但MkDocs Material主题用的Highlight.js需要明确指定要加载的语言，没声明的话就不会自动加载JSX的高亮规则。

内容的提问来源于stack exchange，提问作者Michael An