如何让 Google Prettify 渲染得更像 Visual Studio答案

【问题标题】：How to get Google Prettify to render more like Visual Studio如何让 Google Prettify 渲染得更像 Visual Studio
【发布时间】：2010-12-12 15:10:03
【问题描述】：

我正在使用 Google 的优秀 Code Prettify，我对此非常满意。

但是：有没有人碰巧有一个备用的 CSS 样式表，所以它会渲染得更像 Visual Studios 的默认颜色？绿色 cmets、红色文本/字符串等

【问题讨论】：

这似乎更适合 superuser.com，不是吗？
嗯，我不知道：我希望有人遇到同样的“问题”并相应地修改了 CSS。所以它需要一点点编程......

标签： asp.net css prettify

【解决方案1】：

我不使用 Visual Studio，所以我不知道配色方案，但 Prettify 很容易修改。

下载完整版（不是小版，因为 CSS 已被缩小）
打开 src 目录下的 prettify.css 文件。有 10 个左右的“元素”可以更改颜色。
从 Visual Studio 中获取每种颜色的十六进制值（如果可用；如果没有，您可以使用颜色选择器应用获取十六进制值）。
替换 CSS 文件中每个元素的颜色属性。

如果我知道颜色，我会很快自己拼凑起来，但希望这会有所帮助！

【讨论】：

【解决方案2】：

我花了一些时间，但我准确地复制了我的 Visual Studio 的颜色配置。享受吧。

.com       { color: #008000; }
.str, .tag { color: #A31515; }
.kwd, .atv { color: #0000FF; }
.typ       { color: #2B91AF; }
.lit, .atn { color: #FF0000; }
.pun, .pln { color: #000000; }
.dec       { color: #800080; }

注释为绿色，字符串/标签为红色，关键字为蓝色，类型为蓝色，数字为红色，标点为黑色，声明为紫色。

【讨论】：

广告效果——绝对精彩！谢谢！ :)
如果您使用的是google托管的js，您可能需要将!important添加到每个css规则中。
添加了深色模式版本。在您回答 10.5 年后，似乎是时候...

【解决方案3】：

对于那些有兴趣的人。这是深色主题的配色方案。使用 VS 2019 颜色制成。

.darkmode {
    .com {
        color: #57A64A;
    }

    .str, .tag {
        color: #D69D85;
    }

    .kwd, .atv {
        color: #569CD6;
    }

    .typ {
        color: #4EC9B0;
    }

    .lit, .atn {
        color: #B5CEA8;
    }

    .pun, .pln {
        color: #DCDCDC;
    }

    .dec {
        color: #C284C2;
    }
}

【讨论】：