Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The results of what follows are very close to the look of solarized but not perfect. Basically, I used this <a href="https://github.com/zealot128/Notes-App/blob/master/app/assets/stylesheets/solarize.css.scss" rel="noreferrer">this stylesheet for solarize</a> and went through selector by selector and did my best to translate it into the <a href="https://github.com/rubychan/coderay/blob/master/lib/coderay/styles/alpha.rb" rel="noreferrer">styles used by Coderay</a>.</p> <p>Here is the original solarized example for ruby: <img src="https://i.stack.imgur.com/L1km8.png" alt="enter image description here"></p> <p>Here is the results I am able to produce with coderay: <img src="https://i.stack.imgur.com/nJyoS.png" alt="enter image description here"></p> <p>SO: it's not perfect, but will get anyone that wants to use a Solarized-like 'theme' for Coderay on their way. </p> <p>Here is what you need to do (for a Rails 3 app):</p> <p>First you will need to override the module within the coderay gem that it uses to generate inline styles. Create a file called <code>coderay.rb</code> within <code>config/initializers</code>.</p> <p>Next paste in the following into the <code>config/intializers/coderay.rb</code> file you've just created:</p> <pre><code>module CodeRay module Styles # A colorful theme using CSS 3 colors (with alpha channel). class Alpha &lt; Style register_for :alpha code_background = '#073642' numbers_background = 'hsl(180,65%,90%)' border_color = '#c0c0c0' normal_color = '#d5f6f6' CSS_MAIN_STYLES = &lt;&lt;-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 = &lt;&lt;-'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 </code></pre> <p>You'll also add the following CSS to your application (or, if you want, make a file in <code>assets/stylesheets</code> called <code>coderay.css</code> for it):</p> <pre><code>pre { background: #002A35!important; color: #93A1A1!important; } </code></pre> <p>The above will set your code background to the dark background used by solarize and any code not annotated by codeway to the fallback color used in solarize.</p> <p>Now just restart your app. </p> <p>** Again, this isn't perfect and youll probably want to crack open that <code>coderay.rb</code> file again at some point and refine things. You can use this to help with that: <a href="http://jsfiddle.net/bradleygriffith/CNTw4/" rel="noreferrer">http://jsfiddle.net/bradleygriffith/CNTw4/</a> **</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload