코드화 된 태양열

Question

solarized-dark 색상을 coderay에 어떻게 추가 할 수 있습니까?

alpha.rb 파일을 조정하는 방법에 대해 생각하고 있지만 어떤 CSS 클래스 정의를 사용하여 어떤 색상 코드로 대체 할 것인지 확실하지 않습니다.

더 좋은 아이디어가 있습니까? 어쩌면 상자 솔루션이 존재할 수 있습니까? this도 있지만 사용법은 확실하지 않습니다.

Answer 1

다음의 결과는 솔라리스의 외관에 매우 비슷하지만 완벽하지는 않습니다. 기본적으로 나는이 this stylesheet for solarize을 사용하고 셀렉터를 통해 셀렉터를 거쳐 styles used by Coderay으로 번역했습니다. SO

: 여기

내가 coderay으로 생산할 수입니다 결과입니다 : 여기

는 루비에 대한 원래의 솔라리 예입니다 완벽은 아니지만 원하는 사람을 얻을 것이다 도중에 Coderay에 Solarized와 같은 '테마'를 사용하십시오.

먼저 당신은 인라인 스타일을 생성하는 데 사용하는 coderay 보석 내에서 모듈을 오버라이드 (override) 할 필요가 있습니다 : 여기

는 (레일 3 앱)해야 할 것입니다. 내에 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 

당신은 또한 당신이 원하는 경우에,라는 assets/stylesheets에있는 파일을, 응용 프로그램에 다음 CSS를 추가 (또는 것입니다 : 당신이 방금 만든 config/intializers/coderay.rb 파일에 다음

다음 붙여 넣기 그것을위한 coderay.css) :

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

위의 과다 및 과다에 사용되는 대체 색상 codeway 주석이되지 않은 코드에 의해 사용되는 어두운 배경에 코드 배경을 설정합니다.

이제 앱을 다시 시작하십시오.

** 다시 말하지만,이 방법은 완벽하지 않으며 아마도 coderay.rb 파일을 다시 열어서 수정해야 할 것입니다. 이를 사용하면 다음과 같이 도움이됩니다. http://jsfiddle.net/bradleygriffith/CNTw4/ **