Syntax highlighting
This commit is contained in:
parent
4f6beead0a
commit
827e81d2ea
@ -7,3 +7,5 @@ gem 'rack'
|
|||||||
gem 'mime-types'
|
gem 'mime-types'
|
||||||
gem 'fssm'
|
gem 'fssm'
|
||||||
gem 'serve'
|
gem 'serve'
|
||||||
|
gem 'nokogiri'
|
||||||
|
gem 'coderay'
|
@ -22,6 +22,7 @@ end
|
|||||||
|
|
||||||
compile '/examples/*/' do
|
compile '/examples/*/' do
|
||||||
filter :haml, :ugly => true
|
filter :haml, :ugly => true
|
||||||
|
filter :highlight if ENV['SYNTAX']
|
||||||
layout 'example'
|
layout 'example'
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -29,12 +30,18 @@ compile '/stylesheets/*/' do
|
|||||||
filter :sass, Compass.sass_engine_options
|
filter :sass, Compass.sass_engine_options
|
||||||
end
|
end
|
||||||
|
|
||||||
|
compile '/reference/*/' do
|
||||||
|
filter :haml, :ugly => true
|
||||||
|
filter :highlight if ENV['SYNTAX']
|
||||||
|
layout 'default'
|
||||||
|
end
|
||||||
|
|
||||||
compile '*' do
|
compile '*' do
|
||||||
filter :haml, :ugly => true
|
filter :haml, :ugly => true
|
||||||
layout 'default'
|
layout 'default'
|
||||||
end
|
end
|
||||||
|
|
||||||
route '/stylesheets/_*/' do
|
route '/stylesheets/*/_*/' do
|
||||||
# don't output partials, so return nil
|
# don't output partials, so return nil
|
||||||
nil
|
nil
|
||||||
end
|
end
|
||||||
|
@ -3,12 +3,24 @@ body
|
|||||||
|
|
||||||
#example
|
#example
|
||||||
width: 100%
|
width: 100%
|
||||||
td
|
> tbody > tr > td
|
||||||
border: 2px solid black
|
border: 2px solid black
|
||||||
padding: 6px 4px
|
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
width: 48%
|
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
|
max-width: 400px
|
||||||
pre
|
pre
|
||||||
margin: 0
|
margin: 0
|
||||||
overflow: auto
|
overflow: auto
|
||||||
|
|
||||||
|
@import partials/syntax.sass
|
||||||
|
|
@ -116,4 +116,6 @@ ol#breadcrumbs
|
|||||||
visibility: hidden
|
visibility: hidden
|
||||||
body#home #logo
|
body#home #logo
|
||||||
+replace-text("compass.png", 0px)
|
+replace-text("compass.png", 0px)
|
||||||
height: 159px
|
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
|
%tr.source
|
||||||
%td.markup
|
%td.markup
|
||||||
%pre
|
%pre
|
||||||
%code= h(example_html)
|
%code.html= h(example_html)
|
||||||
%td.stylesheet
|
%td.stylesheet
|
||||||
%pre
|
%pre
|
||||||
%code= h(example_sass)
|
%code.sass= h(example_sass)
|
||||||
%tr.output
|
%tr.output
|
||||||
%th Display
|
%th Display
|
||||||
%th Generated CSS
|
%th Generated CSS
|
||||||
@ -19,4 +19,4 @@
|
|||||||
= example_html
|
= example_html
|
||||||
%td.stylesheet
|
%td.stylesheet
|
||||||
%pre
|
%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