代码高亮

在默认的模板中, 部分语言的代码无法高亮, 比如我常用的 csharp, 就没有办法在代码块中高亮展示

for(var i = 0; i < 100; i++)
{
    Console.WriteLine(i);
}

此时就需要修改项目配置使其支持csharp的高亮, 其他一些默认不支持的语言也可以使用相同的方式尝试获取对应的支持

打开 docusaurus.config.js 文件, 在 config.themeConfig.prism 中添加一行 additionalLanguages: ['csharp'], 指定需要高亮的语言为csharp

const config = {
    title: '......',
    ......
    themeConfig:
        /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
        ({
            navbar: {
                ......
            },
            footer: {
                ......
            },
            prism: {
                theme: lightCodeTheme,
                darkTheme: darkCodeTheme,
                additionalLanguages: ['csharp'],
            },
        }),
}

这一行添加之后还无法正常显示高亮, 需要执行以下的命令

yarn swizzle @docusaurus/theme-classic prism-include-languages

如果是npm

npm run swizzle @docusaurus/theme-classic prism-include-languages

在之后出现的选项中选择 Eject, 执行完成之后重启文档项目即可

然后之前不支持的csharp代码就能有高亮了

for(var i = 0; i < 100; i++)
{
    Console.WriteLine(i);
}

高亮具体行

有的时候我们需要高亮代码块中的某一行, 比如高亮第三行代码

for(var i = 0; i < 100; i++)
{
    Console.WriteLine(i);
}

在这儿推荐两种方式

使用注释

第一种是写注释, 在需要高亮的行上面添加 // highlight-next-line

```csharp
for(var i = 0; i < 100; i++)
{
    // highlight-next-line
    Console.WriteLine(i);
}

for(var i = 0; i < 100; i++)
{
    Console.WriteLine(i);
}

如果需要高亮多行, 可以使用 // highlight-start 和 // highlight-end

```csharp
for(var i = 0; i < 100; i++)
// highlight-start
{
    Console.WriteLine(i);
}
// highlight-end

for(var i = 0; i < 100; i++)
{
    Console.WriteLine(i);
}

metadata

第二种是使用写在代码块外围的 metadata, 如果是单行的高亮, 可以使用如下写法

```csharp {3}
for(var i = 0; i < 100; i++)
{
    Console.WriteLine(i);
}

for(var i = 0; i < 100; i++)
{
    Console.WriteLine(i);
}

多行如下

```csharp {2-4}
for(var i = 0; i < 100; i++)
{
    Console.WriteLine(i);
}

for(var i = 0; i < 100; i++)
{
    Console.WriteLine(i);
}

不太推荐这种写法, 因为在对代码块中的内容进行修改时, 这种方案需要重新去数行数, 代码量较少时可能不太要紧, 但若是多了, 这样数就比较麻烦了, 不如直接使用上面的注释法