From 827e81d2ea5af5327b7a0b71394bcf70b3c7a9c0 Mon Sep 17 00:00:00 2001
From: Chris Eppstein <chris@eppsteins.net>
Date: Sun, 7 Feb 2010 13:58:52 -0800
Subject: [PATCH] Syntax highlighting

---
 doc-src/Gemfile                               |   2 +
 doc-src/Rules                                 |   9 +-
 doc-src/content/stylesheets/example.sass      |  18 +-
 doc-src/content/stylesheets/main.css          |   0
 doc-src/content/stylesheets/main.sass         |   4 +-
 .../content/stylesheets/partials/_syntax.sass |   2 +
 .../stylesheets/partials/syntax/_coderay.sass | 211 ++++++++++++++++++
 .../partials/syntax/_pygments.sass            | 209 +++++++++++++++++
 doc-src/layouts/partials/example.haml         |   6 +-
 doc-src/lib/data_sources/syntax_highter.rb    |  34 +++
 10 files changed, 487 insertions(+), 8 deletions(-)
 delete mode 100644 doc-src/content/stylesheets/main.css
 create mode 100644 doc-src/content/stylesheets/partials/_syntax.sass
 create mode 100644 doc-src/content/stylesheets/partials/syntax/_coderay.sass
 create mode 100644 doc-src/content/stylesheets/partials/syntax/_pygments.sass
 create mode 100644 doc-src/lib/data_sources/syntax_highter.rb

diff --git a/doc-src/Gemfile b/doc-src/Gemfile
index 41535951..bd4ebe04 100644
--- a/doc-src/Gemfile
+++ b/doc-src/Gemfile
@@ -7,3 +7,5 @@ gem 'rack'
 gem 'mime-types'
 gem 'fssm'
 gem 'serve'
+gem 'nokogiri'
+gem 'coderay'
\ No newline at end of file
diff --git a/doc-src/Rules b/doc-src/Rules
index bb5a7625..9e1e03ae 100644
--- a/doc-src/Rules
+++ b/doc-src/Rules
@@ -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
diff --git a/doc-src/content/stylesheets/example.sass b/doc-src/content/stylesheets/example.sass
index 96ac5fc9..3435faeb 100644
--- a/doc-src/content/stylesheets/example.sass
+++ b/doc-src/content/stylesheets/example.sass
@@ -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
\ No newline at end of file
+      overflow: auto
+
+@import partials/syntax.sass
+  
\ No newline at end of file
diff --git a/doc-src/content/stylesheets/main.css b/doc-src/content/stylesheets/main.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/doc-src/content/stylesheets/main.sass b/doc-src/content/stylesheets/main.sass
index a61af886..35b145ea 100644
--- a/doc-src/content/stylesheets/main.sass
+++ b/doc-src/content/stylesheets/main.sass
@@ -116,4 +116,6 @@ ol#breadcrumbs
     visibility: hidden
 body#home #logo
   +replace-text("compass.png", 0px)
-  height: 159px
\ No newline at end of file
+  height: 159px
+
+@import partials/syntax.sass
\ No newline at end of file
diff --git a/doc-src/content/stylesheets/partials/_syntax.sass b/doc-src/content/stylesheets/partials/_syntax.sass
new file mode 100644
index 00000000..4e23826f
--- /dev/null
+++ b/doc-src/content/stylesheets/partials/_syntax.sass
@@ -0,0 +1,2 @@
+@import partials/syntax/coderay.sass
+@import partials/syntax/pygments.sass
\ No newline at end of file
diff --git a/doc-src/content/stylesheets/partials/syntax/_coderay.sass b/doc-src/content/stylesheets/partials/syntax/_coderay.sass
new file mode 100644
index 00000000..53e560f3
--- /dev/null
+++ b/doc-src/content/stylesheets/partials/syntax/_coderay.sass
@@ -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
diff --git a/doc-src/content/stylesheets/partials/syntax/_pygments.sass b/doc-src/content/stylesheets/partials/syntax/_pygments.sass
new file mode 100644
index 00000000..f841225d
--- /dev/null
+++ b/doc-src/content/stylesheets/partials/syntax/_pygments.sass
@@ -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
diff --git a/doc-src/layouts/partials/example.haml b/doc-src/layouts/partials/example.haml
index c16d924b..ef14aa50 100644
--- a/doc-src/layouts/partials/example.haml
+++ b/doc-src/layouts/partials/example.haml
@@ -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)
\ No newline at end of file
+        %code.css= h(example_css)
\ No newline at end of file
diff --git a/doc-src/lib/data_sources/syntax_highter.rb b/doc-src/lib/data_sources/syntax_highter.rb
new file mode 100644
index 00000000..4d8767b4
--- /dev/null
+++ b/doc-src/lib/data_sources/syntax_highter.rb
@@ -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