生成海报3 

在本主题中，支持自定义代码块高亮样式，使用的是highlightjs

下载css

在使用之前，你需要先下载highlightjs的css文件，我们是通过导入高亮css样式，来切换代码块高亮样式的，请在当前博客中，运行下面命令

npm install highlight.js

导入css

当运行npm install highlight.js命令之后，会将highlight.js的所有文件放置在node_modules目录中，你需要在此目录中，找到一个文件夹为highlight.js的目录，点击进去

如果你实在没有找到这个highlight.js文件夹，那么就是你没有运行npm install highlight.js这个命令，或者是没有在正确的地方运行

修改config.js

进入docs/.vuepress/config.js文件内，将下面的代码加入到此文件中

extendsMarkdown: (md) => {
    md.set({
        highlight: function (str, lang) {
            if (lang && require('highlight.js').getLanguage(lang)) {
                try {
                    //if (lang === "c") {
                    //    lang = "csharp"
                    //}
                    return require('highlight.js').highlight(str, { language: lang }).value;
                } catch (__) {}
            }

            return '';
        }
    })
},

必看

使用样式

待你上面步骤完成之后，你现在只需要在docs/.vuepress/styles/index.css文件内，使用你刚才复制的那些样式就行了

@import "css样式路径";

这里的css样式文件，就是你刚才在第二步中，从\node_modules\highlight.js\styles内复制出来的文件，如果你的路径正确的话，那么你现在刷新网页，就会看到代码块样式发生改变了

TIP

因为highlightjs的样式非常多，有200多款，你具体喜欢哪种，请自己尝试，上图中的,styles目录下的css样式，每一个css文件，就是一个代码块样式，我这里也没有能够直接展示这200多款样式的工具，需要你自己修改@import "css样式路径";的样式文件路径，才能看到效果

关于C#代码块不能高亮问题

如果C#代码块不能高亮，请修改一下下面的判断条件，如果你使用其他语言，也是代码块高亮不正确的话，也是一样的，修改一下判断条件

extendsMarkdown: (md) => {
    md.set({
        highlight: function (str, lang) {
            if (lang && require('highlight.js').getLanguage(lang)) {
                try {
                    /*
                    修改一下下面，如果同时存在多个语言，代码块不能正常显示，也是增加多个判断就行
                    这是是写c，但是我修改成csharp的原因是因为，C#代码块，默认显示的时候，是c，但是其真正的名字需要为csharp，才能正常显示，否则C#代码
                    块，最终就是以C的高亮显示
                    */
                    if (lang === "c") {
                        lang = "csharp"
                    }
                    return require('highlight.js').highlight(str, { language: lang }).value;
                } catch (__) {}
            }

            return '';
        }
    })
},