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

Posted 2023-03-06

【中文标题】如何让 Google Prettify 渲染得更像 Visual Studio

【英文标题】：How to get Google Prettify to render more like Visual Studio

【发布时间】：2010-12-12 15:10:03

【问题描述】：

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

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

【问题讨论】：

这似乎更适合 superuser.com，不是吗？

嗯，我不知道：我希望有人遇到同样的“问题”并相应地修改了 CSS。所以它需要一点点编程......

【参考方案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;