Syntax highlighting
This commit is contained in:
parent
4f6beead0a
commit
827e81d2ea
@ -7,3 +7,5 @@ gem 'rack'
|
||||
gem 'mime-types'
|
||||
gem 'fssm'
|
||||
gem 'serve'
|
||||
gem 'nokogiri'
|
||||
gem 'coderay'
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
@import partials/syntax.sass
|
||||
|
@ -117,3 +117,5 @@ ol#breadcrumbs
|
||||
body#home #logo
|
||||
+replace-text("compass.png", 0px)
|
||||
height: 159px
|
||||
|
||||
@import partials/syntax.sass
|
2
doc-src/content/stylesheets/partials/_syntax.sass
Normal file
2
doc-src/content/stylesheets/partials/_syntax.sass
Normal file
@ -0,0 +1,2 @@
|
||||
@import partials/syntax/coderay.sass
|
||||
@import partials/syntax/pygments.sass
|
211
doc-src/content/stylesheets/partials/syntax/_coderay.sass
Normal file
211
doc-src/content/stylesheets/partials/syntax/_coderay.sass
Normal 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
|
209
doc-src/content/stylesheets/partials/syntax/_pygments.sass
Normal file
209
doc-src/content/stylesheets/partials/syntax/_pygments.sass
Normal 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
|
@ -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)
|
34
doc-src/lib/data_sources/syntax_highter.rb
Normal file
34
doc-src/lib/data_sources/syntax_highter.rb
Normal 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
|
Loading…
Reference in New Issue
Block a user