Question

如何将solarized-dark颜色添加到coderay？

我正在考虑调整alpha.rb文件，但不确定哪个css类定义会替换为哪种颜色代码。

有更好的想法吗？也许存在一些开箱即用的解决方案？还找到this但不确定如何使用它。

Answer 1

以下结果非常接近于曝光但不完美的外观。基本上，我使用了这个this stylesheet for solarize并通过选择器经过选择器，并尽力将其翻译为styles used by Coderay。

以下是ruby的原始曝光示例： enter image description here

以下是我能够使用coderay生成的结果： enter image description here

所以：它并不完美，但是会让任何想要在Codely上使用类似Solarized的“主题”的人。

这是您需要做的（对于Rails 3应用程序）：

首先，您需要覆盖它用于生成内联样式的coderay gem中的模块。在coderay.rb内创建名为config/initializers的文件。

接下来将以下内容粘贴到您刚刚创建的config/intializers/coderay.rb文件中：

module CodeRay
  module Styles

  # A colorful theme using CSS 3 colors (with alpha channel).
  class Alpha < Style

    register_for :alpha

    code_background = '#073642'
    numbers_background = 'hsl(180,65%,90%)'
    border_color = '#c0c0c0'
    normal_color = '#d5f6f6'

    CSS_MAIN_STYLES = <<-MAIN  # :nodoc:
    .CodeRay {
      background-color:##073642;
      border:1px solid #c0c0c0;
      background: #002B36;
      color:#eee8d5;
    }
    .CodeRay pre {
      margin: 0px;
    }

    span.CodeRay { white-space: pre; border: 0px; padding: 2px; }

    table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px; }
    table.CodeRay td { padding: 2px 4px; vertical-align: top; }

    .CodeRay .line-numbers {
      background-color:#d5f6f6;
      color:#808080;
      text-align:right;
      -webkit-user-select:none;
      -moz-user-select:none;
      user-select:none;
    }
    .CodeRay .line-numbers a {
      background-color:#d5f6f6;
      color:#808080;
      text-decoration:none
    }
    .CodeRay .line-numbers a:target { color:#00f !important; }
    .CodeRay .line-numbers .highlighted { color: red !important; }
    .CodeRay .line-numbers .highlighted a { color: red !important; }
    .CodeRay span.line-numbers { padding: 0px 4px; }
    .CodeRay .line { display: block; float: left; width: 100%; }
    .CodeRay .code { width: 100%; }
    MAIN

    TOKEN_COLORS = <<-'TOKENS'
    .debug{color:#fff;background:#00f}
    .annotation{color:#586E75}
    .attribute-name{color:#93A1A1}
    .attribute-value{color:#93A1A1}
    .binary{color:#509}
    .char .content{color:#d20}
    .char .delimiter{color:#710}
    .char{color:#2AA198}
    .class{color:#268BD2;font-weight:bold}
    .class-variable{color:#268BD2}
    .color{color:#eee8d5}
    .comment{color:#586E75}
    .comment .char{color:#859900}
    .comment .delimiter{color:#859900}
    .complex{color:#a08}
    .constant{color:#B58900;font-weight:bold}
    .decorator{color:#268BD2}
    .definition{color:#099;font-weight:bold}
    .delimiter{color:#000}
    .directive{color:#088;font-weight:bold}
    .doc{color:#93A1A1}
    .doc-string{color:#93A1A1;font-weight:bold}
    .doctype{color:#DC322F}
    .entity{color:#CB4B16;font-weight:bold}
    .error{color:#93A1A1;background-color:#faa}
    .escape{color:#CB4B16}
    .exception{color:#CB4B16;font-weight:bold}
    .float{color:#2AA198}
    .function{color:#268BD2;font-weight:bold}
    .global-variable{color:#268BD2}
    .hex{color:#2AA198}
    .imaginary{color:#f00}
    .include{color:#b44;font-weight:bold}
    .inline{background-color:transparent;color:#93A1A1!important}
    .inline-delimiter{font-weight:bold;color:#DC322F}
    .instance-variable{color:#268BD2}
    .integer{color:#2AA198}
    .key .char{color:#DC322F}
    .key .delimiter{color:#268BD2}
    .key{color:#859900}
    .keyword{color:#859900;font-weight:bold}
    .label{color:#93A1A1;font-weight:bold}
    .local-variable{color:#268BD2}
    .namespace{color:#859900;font-weight:bold}
    .octal{color:#2AA198}
    .operator, .predefined{color:#859900;font-weight:bold}
    .predefined-constant{color:#2AA198}
    .predefined-type{color:#DC322F;font-weight:bold}
    .preprocessor{color:#859900}
    .pseudo-class{color:#859900;font-weight:bold}
    .regexp .content{color:#2AA198}
    .regexp .delimiter{color:#DC322F}
    .regexp .modifier{color:#CB4B16}
    .regexp{background-color:transparent}
    .reserved{color:#268BD2;font-weight:bold}
    .shell .content{color:#2b2}
    .shell .delimiter{color:#161}
    .shell{background-color:transparent}
    .string .char{color:#2AA198}
    .string .content{color:#2AA198}
    .string .delimiter{color:#DC322F}
    .string .modifier{color:#2AA198}
    .string{background-color:transparent}
    .symbol .content{color:#2AA198}
    .symbol .delimiter{color:#2AA198}
    .symbol{color:#2AA198}
    .tag{color: #268BD2}
    .type{color:#DC322F;font-weight:bold}
    .value{color:#268BD2}
    .variable{color:#268BD2}
    .insert{background:transparent}
    .delete{background:transparent}
    .change{color:#CB4B16;background:transparent}
    .head{color:#CB4B16;background:transparent}
    .head .filename{color:#CB4B16}
    .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
    .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
    .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}
    .delete .delete{color:##2AA198;background:transparent;font-weight:bold}
    .change .change{color:#CB4B16}
    .head .head{color:#CB4B16}
    TOKENS

  end

  end
end

您还可以将以下CSS添加到您的应用程序中（或者，如果您愿意，可以在assets/stylesheets中为其创建一个名为coderay.css的文件）：

pre {
  background: #002A35!important;
  color: #93A1A1!important;
}

以上内容将您的代码背景设置为solarize使用的深色背景以及未通过代码注释的任何代码，以用于曝光中使用的后备颜色。

现在只需重启您的应用即可。

**同样，这并不完美，你可能想在某个时刻再次打开coderay.rb文件并改进。您可以使用它来帮助：http://jsfiddle.net/bradleygriffith/CNTw4/ **

代码太阳光了

1 个答案: