Screencast: Syntax Highlighting

Syntax Highlighting wird die visuelle Aufbereitung von Source-Code genant. Die meisten Texteditoren unterstützen Syntax Highlighting, aber auch Web wird gerne darauf zurückgegriffen um Quellcode lesbarer zu machen. Ryan zeigt diese Woche wie man in Ruby/Rails-Applikationen um Syntax Highlighting bereichern kann.

 

Download:

Download (30.9 MB, 9:09)
Alternativer Download für iPod & Apple TV (24.4 MB, 9:09)

 

Resourcen:

 

Quellcode:

[html]
<%= textilize(coderay(@article.content)) %>
[/html]

[ruby]
# config/environment.rb
config.gem "coderay"
config.gem "RedCloth"

# application_helper.rb
def coderay(text)
text.gsub(/<code( lang="(.+?)")?>(.+?)</code>/m) do
content_tag("notextile", CodeRay.scan($3, $2).div(:css => :class))
end
end

# syntax_benchmark.rb
require "rubygems"
require "benchmark"
require "coderay"
require "uv"

path = __FILE__
content = File.read(__FILE__)

# run it once to initialize
CodeRay.scan("print ‚hello’", "ruby").div(:css => :class)
Uv.parse("print ‚test’", "xhtml", "ruby", true, "amy")

Benchmark.bm(11) do |b|
b.report("coderay") do
50.times { CodeRay.scan(content, "ruby").div(:css => :class) }
end

b.report("ultraviolet") do
50.times { Uv.parse(content, "xhtml", "ruby", true, "amy") }
end

b.report("pygments") do
50.times { `pygmentize -f html "#{path}"` }
end
end
[/ruby]

[css]
.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 {
margin: 0px;
padding: 0px;
}

.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 */
[/css]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.