Syntax highlighting

This commit is contained in:
Chris Eppstein 2010-02-07 13:58:52 -08:00
parent 4f6beead0a
commit 827e81d2ea
10 changed files with 487 additions and 8 deletions

View File

@ -7,3 +7,5 @@ gem 'rack'
gem 'mime-types'
gem 'fssm'
gem 'serve'
gem 'nokogiri'
gem 'coderay'

View File

@ -22,6 +22,7 @@ end
compile '/examples/*/' do
filter :haml, :ugly => true
filter :highlight if ENV['SYNTAX']
layout 'example'
end
@ -29,12 +30,18 @@ compile '/stylesheets/*/' do
filter :sass, Compass.sass_engine_options
end
compile '/reference/*/' do
filter :haml, :ugly => true
filter :highlight if ENV['SYNTAX']
layout 'default'
end
compile '*' do
filter :haml, :ugly => true
layout 'default'
end
route '/stylesheets/_*/' do
route '/stylesheets/*/_*/' do
# don't output partials, so return nil
nil
end

View File

@ -3,12 +3,24 @@ body
#example
width: 100%
td
> tbody > tr > td
border: 2px solid black
padding: 6px 4px
vertical-align: top
width: 48%
min-width: 400px
pre
margin: 0
overflow: auto
td.line_numbers, td.linenos
padding: 6px 3px
border-right: 1px solid #333
background-color: #ccc
td.code
padding: 6px 3px
max-width: 400px
pre
margin: 0
overflow: auto
overflow: auto
@import partials/syntax.sass

View File

@ -116,4 +116,6 @@ ol#breadcrumbs
visibility: hidden
body#home #logo
+replace-text("compass.png", 0px)
height: 159px
height: 159px
@import partials/syntax.sass

View File

@ -0,0 +1,2 @@
@import partials/syntax/coderay.sass
@import partials/syntax/pygments.sass

View File

@ -0,0 +1,211 @@
.CodeRay
.debug
color: white ! important
background: blue ! important
.af
color: #00C
.an
color: #007
.at
color: #f08
.av
color: #700
.aw
color: #C00
.bi
color: #509
font-weight: bold
.c
color: #888
.ch
color: #04D
.k
color: #04D
.dl
color: #039
.cl
color: #B06
font-weight: bold
.cm
color: #A08
font-weight: bold
.co
color: #036
font-weight: bold
.cr
color: #0A0
.cv
color: #369
.de
color: #B0B
.df
color: #099
font-weight: bold
.di
color: #088
font-weight: bold
.dl
color: black
.do
color: #970
.dt
color: #34b
.ds
color: #D42
font-weight: bold
.e
color: #666
font-weight: bold
.en
color: #800
font-weight: bold
.er
color: #F00
background-color: #FAA
.ex
color: #C00
font-weight: bold
.fl
color: #60E
font-weight: bold
.fu
color: #06B
font-weight: bold
.gv
color: #d70
font-weight: bold
.hx
color: #058
font-weight: bold
.i
color: #00D
font-weight: bold
.ic
color: #B44
font-weight: bold
.il
background: #ddd
color: black
.il
background: #ccc
.il
background: #bbb
.idl
background: #ddd
font-weight: bold
color: #666
.idl
background-color: #bbb
font-weight: bold
color: #666
.im
color: #f00
.in
color: #B2B
font-weight: bold
.iv
color: #33B
.la
color: #970
font-weight: bold
.lv
color: #963
.oc
color: #40E
font-weight: bold
.of
color: #000
font-weight: bold
.pc
color: #038
font-weight: bold
.pd
color: #369
font-weight: bold
.pp
color: #579
.ps
color: #00C
font-weight: bold
.pt
color: #074
font-weight: bold
.r, .kw
color: #080
font-weight: bold
.ke
color: #808
.dl
color: #606
.ch
color: #80f
.vl
color: #088
.rx
background-color: #fff0ff
.k
color: #808
.dl
color: #404
.mod
color: #C2C
.fu
color: #404
font-weight: bold
.s
background-color: #fff0f0
color: #D20
.s
background-color: #ffe0e0
.s
background-color: #ffd0d0
.ch
color: #b0b
.dl
color: #710
.sh
background-color: #f0fff0
color: #2B2
.dl
color: #161
.sy
color: #A60
.k
color: #A60
.dl
color: #630
.ta
color: #070
.tf
color: #070
font-weight: bold
.ts
color: #D70
font-weight: bold
.ty
color: #339
font-weight: bold
.v
color: #036
.xt
color: #444
.ins
background: #afa
.del
background: #faa
.chg
color: #aaf
background: #007
.head
color: #f8f
background: #505
.ins .ins
color: #080
font-weight: bold
.del .del
color: #800
font-weight: bold
.chg .chg
color: #66f
.head .head
color: #f4f

View File

@ -0,0 +1,209 @@
.highlight
.hll
background-color: #ffffcc
.c
color: #606060
font-style: italic
.err
color: #F00000
background-color: #F0A0A0
.k
color: #208090
font-weight: bold
.o
color: #303030
.cm
color: #606060
font-style: italic
.cp
color: #507090
.c1
color: #606060
font-style: italic
.cs
color: #c00000
font-weight: bold
font-style: italic
.gd
color: #A00000
.ge
font-style: italic
.gr
color: #FF0000
.gh
color: #000080
font-weight: bold
.gi
color: #00A000
.go
color: #808080
.gp
color: #c65d09
font-weight: bold
.gs
font-weight: bold
.gu
color: #800080
font-weight: bold
.gt
color: #0040D0
.kc, .kd, .kn
color: #208090
font-weight: bold
.kp
color: #0080f0
font-weight: bold
.kr
color: #208090
font-weight: bold
.kt
color: #6060f0
font-weight: bold
.m
color: #6000E0
font-weight: bold
.s
background-color: #e0e0ff
.na
color: #000070
.nb
color: #007020
.nc
color: #e090e0
font-weight: bold
.no
color: #50e0d0
font-weight: bold
.nd
color: #505050
font-weight: bold
.ni
color: #800000
.ne
color: #F00000
font-weight: bold
.nf
color: #50e0d0
font-weight: bold
.nl
color: #907000
font-weight: bold
.nn
color: #0e84b5
font-weight: bold
.nt
color: #007000
.nv
color: #003060
.ow
color: #000000
font-weight: bold
.w
color: #bbbbbb
.mf
color: #6000E0
font-weight: bold
.mh
color: #005080
font-weight: bold
.mi
color: #6060f0
font-weight: bold
.mo
color: #4000E0
font-weight: bold
.sb
background-color: #e0e0ff
.sc
color: #8080F0
.sd
color: #D04020
.s2
background-color: #e0e0ff
.se
color: #606060
font-weight: bold
background-color: #e0e0ff
.sh
background-color: #e0e0ff
.si
background-color: #e0e0e0
.sx
color: #f08080
background-color: #e0e0ff
.sr
color: #000000
background-color: #e0e0ff
.s1
background-color: #e0e0ff
.ss
color: #f0c080
.bp
color: #007020
.vc
color: #c0c0f0
.vg
color: #f08040
.vi
color: #a0a0f0
.il
color: #6060f0
font-weight: bold

View File

@ -7,10 +7,10 @@
%tr.source
%td.markup
%pre
%code= h(example_html)
%code.html= h(example_html)
%td.stylesheet
%pre
%code= h(example_sass)
%code.sass= h(example_sass)
%tr.output
%th Display
%th Generated CSS
@ -19,4 +19,4 @@
= example_html
%td.stylesheet
%pre
%code= h(example_css)
%code.css= h(example_css)

View File

@ -0,0 +1,34 @@
require 'nokogiri'
require 'coderay'
class SyntaxHighlighterFilter < Nanoc3::Filter
identifier :highlight
def highlight(code, type)
hl_map = Hash.new(:coderay)
hl_map[:sass] = :pygmentize
send(hl_map[type], code, type)
end
def pygmentize(code, type)
IO.popen("pygmentize -l #{type} -f html -O linenos=table", "r+") do |io|
io.write(code)
io.close_write
return io.read
end
end
def coderay(code, type)
CodeRay.scan(code, type).div(:line_numbers => :table, :css => :class)
end
def run(content, params={})
doc = Nokogiri::HTML.fragment(content)
[:html, :css, :sass].each do |format|
doc.css("code.#{format}").each do |el|
el.parent.replace Nokogiri.make(highlight(el.inner_text, format))
end
end
doc.to_s
end
end