coderay solarized

Question

如何將solarized-dark顏色添加到coderay？

我在考慮調整alpha.rb文件，但不確定哪個css類定義替換爲哪個顏色代碼。

有什麼更好的點子？ 也許有一些開箱即用的解決方案？ 也發現this，但不知道如何使用它。

Answer 1

下面的結果非常接近日光浴的樣子，但並不完美。基本上，我使用這this stylesheet for solarize，並通過選擇器經過選擇器，並盡我所能將它翻譯成styles used by Coderay。

這裏是紅寶石原solarized例如：

這是我能夠產生與coderay結果：

SO：它並不完美，但不會獲得任何人想在他們的路上爲Coderay使用類似Solarized的「主題」。

以下是你需要做什麼（對於一個Rails 3應用程序）：

首先，你需要重寫它用來生成內聯風格coderay寶石內的模塊。在config/initializers內創建一個名爲coderay.rb的文件。

下貼在下面爲您剛剛創建的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; 
} 

以上將設置你的代碼背景被曝光過度，而不是由codeway註釋在曝光過度使用的還原顏色的任何代碼中使用的深色背景。

現在只需重新啓動您的應用程序。

**同樣，這不是完美的，你可能想要在某個時候再次打開coderay.rb文件並對其進行細化。你可以用它來幫助那個：http://jsfiddle.net/bradleygriffith/CNTw4/ **