Formatting code with lesstile and coderay

[adamwong246]

How do you change the styling of highlighted code? I see that lesstile is applying colors as inline styles

<span style="color:#080;font-weight:bold">class</span> <span style="color:#B06;font-weight:bold">Post</span> &lt; <span style="color:#036;font-weight:bold">ActiveRecord</span>::<span style="color:#036;font-weight:bold">Base</span>

Is there any way to have lesstile not apply inline styles but to append the html with classes? I'd rather do the styling on the client side. This is the css I'd like to use

/* Credits: Ryan Bates, https://github.com/ryanb/railscasts-episodes/blob/master/episode-207/blog/public/stylesheets/coderay.css */
/* Note the customization of pre! */

.CodeRay {
  background-color: #232323;
  border: 1px solid black;
  font-family: 'Courier New', 'Terminal', monospace;
  color: #E6E0DB;
  padding: 3px 5px;
  overflow: auto;
  font-size: 12px;
  margin: 12px 0;
}

.CodeRay pre {                                      /* important: overwrite pre from scaffold.css */
  background-color: #232323 !important;
  margin: 0px !important;
  padding: 0px !important;
}

.CodeRay .an { color:#E7BE69 }                      /* html attribute */
.CodeRay .c  { color:#BC9358; font-style: italic; } /* comment */
.CodeRay .ch { color:#509E4F }                      /* escaped character */
.CodeRay .cl { color:#FFF }                         /* class */
.CodeRay .co { color:#FFF }                         /* constant */
.CodeRay .fl { color:#A4C260 }                      /* float */
.CodeRay .fu { color:#FFC56D }                      /* function */
.CodeRay .gv { color:#D0CFFE }                      /* global variable */
.CodeRay .i  { color:#A4C260 }                      /* integer */
.CodeRay .il { background:#151515 }                 /* inline code */
.CodeRay .iv { color:#D0CFFE }                      /* instance variable */
.CodeRay .pp { color:#E7BE69 }                      /* doctype */
.CodeRay .r  { color:#CB7832 }                      /* keyword */
.CodeRay .rx { color:#A4C260 }                      /* regex */
.CodeRay .s  { color:#A4C260 }                      /* string */
.CodeRay .sy { color:#6C9CBD }                      /* symbol */
.CodeRay .ta { color:#E7BE69 }                      /* html tag */
.CodeRay .pc { color:#6C9CBD }                      /* boolean */

So how does one change the styling of highlighted code?

[xaviershay]

Untested, but you should be able to combine an example from http://coderay.rubychan.de/ with a custom formatter.

Find and replace Lesstile::CodeRayFormatter in the enki source with your own MyFormatter (there are two: one for comment formatting and one for post formatting):

MyFormatter = lambda {|code, lang| 
  CodeRay.scan(CGI::unescapeHTML(code), lang).div(:line_numbers => :table, :css => :class)
}

(from https://github.com/xaviershay/lesstile/blob/master/lib/lesstile.rb#L77)

[adamwong246]

Works like a dream. Thanks!

class EnkiFormatter
  class << self
    def format_as_xhtml(text)
      Lesstile.format_as_xhtml(
        text,
        :text_formatter => lambda {|text| RedCloth.new(CGI::unescapeHTML(text)).to_html},
        # :code_formatter => Lesstile::CodeRayFormatter
        :code_formatter => lambda {|code, lang| 
          CodeRay.scan(CGI::unescapeHTML(code), lang).div(:line_numbers => :table, :css => :class)
        }

      )
    end
  end
end