From 6581420d860cc5917c4ed661bd91a5978275ef0e Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Thu, 6 May 2010 02:05:07 -0700 Subject: [PATCH] [Docs] Make syntax highlighting work again. --- doc-src/content/reference/blueprint/ie.haml | 5 +- doc-src/content/stylesheets/_reference.scss | 19 +- doc-src/content/stylesheets/_syntax.scss | 2 + doc-src/content/stylesheets/screen.sass | 1 + .../content/stylesheets/syntax/_coderay.scss | 211 ++++++++++++++++++ .../content/stylesheets/syntax/_pygments.scss | 151 +++++++++++++ .../layouts/partials/reference/mixins.haml | 4 +- doc-src/lib/data_sources/core_extensions.rb | 11 + doc-src/lib/data_sources/syntax_highter.rb | 14 +- 9 files changed, 400 insertions(+), 18 deletions(-) create mode 100644 doc-src/content/stylesheets/_syntax.scss create mode 100644 doc-src/content/stylesheets/syntax/_coderay.scss create mode 100644 doc-src/content/stylesheets/syntax/_pygments.scss create mode 100644 doc-src/lib/data_sources/core_extensions.rb diff --git a/doc-src/content/reference/blueprint/ie.haml b/doc-src/content/reference/blueprint/ie.haml index 8cab3f48..d89f0170 100644 --- a/doc-src/content/reference/blueprint/ie.haml +++ b/doc-src/content/reference/blueprint/ie.haml @@ -32,7 +32,6 @@ classnames: The stylesheet should then be linked like so: - 
-    
+    
<!--[if lt IE 8]><link rel="stylesheet" href="/stylesheets/ie.css"
+       type="text/css" media="screen, projection"><![endif]-->
     

diff --git a/doc-src/content/stylesheets/_reference.scss b/doc-src/content/stylesheets/_reference.scss
index 14c52909..44ec523c 100644
--- a/doc-src/content/stylesheets/_reference.scss
+++ b/doc-src/content/stylesheets/_reference.scss
@@ -40,18 +40,20 @@ body.reference {
   .color-snippet { width: 100px; height: 20px; @include border-radius(3px); }
   a.help { font-size: 75%; }
   .mixin-source {
-    pre {
+    table { margin: 0; }
+    tbody { width: 100%;}
+    table td:last-child { width: 100%; }
+    .elided-code {display: none;}
+    .elided-code:target {display: block;}
+    pre.source-code,
+    .highlight pre,
+    .linenos pre {
       @include box-sizing(border-box);
-      display: none;
       overflow-x: auto;
-      width: 100%;
       padding: $base-rhythm-unit;
-    }
-    pre:target {
-      display: block;
+      width: 100%;
     }
   }
-  
 }
 
 body.docs {
@@ -99,8 +101,5 @@ dl.table {
 body.helpers {
   .helper {
     dl { @extend dl.table; }
-    dg:not(.head) {
-      dt, dd { @extend code; }
-    }
   }
 }
\ No newline at end of file
diff --git a/doc-src/content/stylesheets/_syntax.scss b/doc-src/content/stylesheets/_syntax.scss
new file mode 100644
index 00000000..848cc852
--- /dev/null
+++ b/doc-src/content/stylesheets/_syntax.scss
@@ -0,0 +1,2 @@
+@import "syntax/coderay";
+@import "syntax/pygments";
diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass
index 07b3863c..1e7a0ec1 100644
--- a/doc-src/content/stylesheets/screen.sass
+++ b/doc-src/content/stylesheets/screen.sass
@@ -265,6 +265,7 @@ aside[role="sidebar"] + article
 @import examples
 @import sidebar
 @import specifics
+@import syntax
 
 /* @group OVERRIDES by page
 
diff --git a/doc-src/content/stylesheets/syntax/_coderay.scss b/doc-src/content/stylesheets/syntax/_coderay.scss
new file mode 100644
index 00000000..9b91e48c
--- /dev/null
+++ b/doc-src/content/stylesheets/syntax/_coderay.scss
@@ -0,0 +1,211 @@
+.CodeRay {
+  .debug {
+    color: white !important;
+    background: blue !important; }
+  .af {
+    color: #0000cc; }
+  .an {
+    color: #000077; }
+  .at {
+    color: #ff0088; }
+  .av {
+    color: #770000; }
+  .aw {
+    color: #cc0000; }
+  .bi {
+    color: #550099;
+    font-weight: bold; }
+  .c {
+    color: #888888; }
+  .ch {
+    color: #0044dd;
+    .k {
+      color: #0044dd; }
+    .dl {
+      color: #003399; } }
+  .cl {
+    color: #bb0066;
+    font-weight: bold; }
+  .cm {
+    color: #aa0088;
+    font-weight: bold; }
+  .co {
+    color: #003366;
+    font-weight: bold; }
+  .cr {
+    color: #00aa00; }
+  .cv {
+    color: #336699; }
+  .de {
+    color: #bb00bb; }
+  .df {
+    color: #009999;
+    font-weight: bold; }
+  .di {
+    color: #008888;
+    font-weight: bold; }
+  .dl {
+    color: black; }
+  .do {
+    color: #997700; }
+  .dt {
+    color: #3344bb; }
+  .ds {
+    color: #dd4422;
+    font-weight: bold; }
+  .e {
+    color: #666666;
+    font-weight: bold; }
+  .en {
+    color: #880000;
+    font-weight: bold; }
+  .er {
+    color: red;
+    background-color: #ffaaaa; }
+  .ex {
+    color: #cc0000;
+    font-weight: bold; }
+  .fl {
+    color: #6600ee;
+    font-weight: bold; }
+  .fu {
+    color: #0066bb;
+    font-weight: bold; }
+  .gv {
+    color: #dd7700;
+    font-weight: bold; }
+  .hx {
+    color: #005588;
+    font-weight: bold; }
+  .i {
+    color: #0000dd;
+    font-weight: bold; }
+  .ic {
+    color: #bb4444;
+    font-weight: bold; }
+  .il {
+    background: #dddddd;
+    color: black;
+    .il {
+      background: #cccccc;
+      .il {
+        background: #bbbbbb; } }
+    .idl {
+      background: #dddddd;
+      font-weight: bold;
+      color: #666666; } }
+  .idl {
+    background-color: #bbbbbb;
+    font-weight: bold;
+    color: #666666; }
+  .im {
+    color: red; }
+  .in {
+    color: #bb22bb;
+    font-weight: bold; }
+  .iv {
+    color: #3333bb; }
+  .la {
+    color: #997700;
+    font-weight: bold; }
+  .lv {
+    color: #996633; }
+  .oc {
+    color: #4400ee;
+    font-weight: bold; }
+  .of {
+    color: black;
+    font-weight: bold; }
+  .pc {
+    color: #003388;
+    font-weight: bold; }
+  .pd {
+    color: #336699;
+    font-weight: bold; }
+  .pp {
+    color: #557799; }
+  .ps {
+    color: #0000cc;
+    font-weight: bold; }
+  .pt {
+    color: #007744;
+    font-weight: bold; }
+  .r, .kw {
+    color: #008800;
+    font-weight: bold; }
+  .ke {
+    color: #880088;
+    .dl {
+      color: #660066; }
+    .ch {
+      color: #8800ff; } }
+  .vl {
+    color: #008888; }
+  .rx {
+    background-color: #fff0ff;
+    .k {
+      color: #880088; }
+    .dl {
+      color: #440044; }
+    .mod {
+      color: #cc22cc; }
+    .fu {
+      color: #440044;
+      font-weight: bold; } }
+  .s {
+    background-color: #fff0f0;
+    color: #dd2200;
+    .s {
+      background-color: #ffe0e0;
+      .s {
+        background-color: #ffd0d0; } }
+    .ch {
+      color: #bb00bb; }
+    .dl {
+      color: #771100; } }
+  .sh {
+    background-color: #f0fff0;
+    color: #22bb22;
+    .dl {
+      color: #116611; } }
+  .sy {
+    color: #aa6600;
+    .k {
+      color: #aa6600; }
+    .dl {
+      color: #663300; } }
+  .ta {
+    color: #007700; }
+  .tf {
+    color: #007700;
+    font-weight: bold; }
+  .ts {
+    color: #dd7700;
+    font-weight: bold; }
+  .ty {
+    color: #333399;
+    font-weight: bold; }
+  .v {
+    color: #003366; }
+  .xt {
+    color: #444444; }
+  .ins {
+    background: #aaffaa; }
+  .del {
+    background: #ffaaaa; }
+  .chg {
+    color: #aaaaff;
+    background: #000077; }
+  .head {
+    color: #ff88ff;
+    background: #550055; }
+  .ins .ins {
+    color: #008800;
+    font-weight: bold; }
+  .del .del {
+    color: #880000;
+    font-weight: bold; }
+  .chg .chg {
+    color: #6666ff; }
+  .head .head {
+    color: #ff44ff; } }
diff --git a/doc-src/content/stylesheets/syntax/_pygments.scss b/doc-src/content/stylesheets/syntax/_pygments.scss
new file mode 100644
index 00000000..8622ad5f
--- /dev/null
+++ b/doc-src/content/stylesheets/syntax/_pygments.scss
@@ -0,0 +1,151 @@
+.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: red; }
+  .gh {
+    color: navy;
+    font-weight: bold; }
+  .gi {
+    color: #00a000; }
+  .go {
+    color: gray; }
+  .gp {
+    color: #c65d09;
+    font-weight: bold; }
+  .gs {
+    font-weight: bold; }
+  .gu {
+    color: purple;
+    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: maroon; }
+  .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: black;
+    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: black;
+    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/reference/mixins.haml b/doc-src/layouts/partials/reference/mixins.haml
index 84060aaa..bb1c9819 100644
--- a/doc-src/layouts/partials/reference/mixins.haml
+++ b/doc-src/layouts/partials/reference/mixins.haml
@@ -10,8 +10,8 @@
     %h3.mixin{:id=>"mixin-#{mixin.name}"}
       %a.permalink{:href => "#mixin-#{mixin.name}"}= mixin_signature(mixin)
     .mixin-source{:id=>"mixin-#{mixin.name}-source"}
-      %pre{:id=>"mixin-#{mixin.name}-sass"}= mixin.to_sass
-      %pre{:id=>"mixin-#{mixin.name}-scss"}= mixin.to_scss
+      %pre.source-code.sass.elided-code{:id=>"mixin-#{mixin.name}-sass"}= mixin.to_sass
+      %pre.source-code.scss.elided-code{:id=>"mixin-#{mixin.name}-scss"}= mixin.to_scss
 
     .source-documentation
       = format_doc(mixin.comment)
diff --git a/doc-src/lib/data_sources/core_extensions.rb b/doc-src/lib/data_sources/core_extensions.rb
new file mode 100644
index 00000000..e512b3d2
--- /dev/null
+++ b/doc-src/lib/data_sources/core_extensions.rb
@@ -0,0 +1,11 @@
+class Object
+  def try(method, *args, &block)
+    send(method, *args, &block)
+  end
+end
+
+class NilClass
+  def try(*args)
+    nil
+  end
+end
diff --git a/doc-src/lib/data_sources/syntax_highter.rb b/doc-src/lib/data_sources/syntax_highter.rb
index 7cb2b18b..f0caee72 100644
--- a/doc-src/lib/data_sources/syntax_highter.rb
+++ b/doc-src/lib/data_sources/syntax_highter.rb
@@ -10,7 +10,8 @@ class SyntaxHighlighterFilter < Nanoc3::Filter
   end
 
   def pygmentize(code, type)
-    IO.popen("pygmentize -l #{type} -f html -O linenos=table", "r+") do |io|
+    # -O linenos=table
+    IO.popen("pygmentize -l #{type} -f html", "r+") do |io|
       io.write(code)
       io.close_write
       return io.read
@@ -18,14 +19,21 @@ class SyntaxHighlighterFilter < Nanoc3::Filter
   end
   
   def coderay(code, type)
-    CodeRay.scan(code, type).div(:line_numbers => :table, :css => :class)
+    # :line_numbers => :table,
+    type = :css if type == :scss
+    CodeRay.scan(code, type).div(:css => :class)
   end
 
   def run(content, params={})
     doc = Nokogiri::HTML.fragment(content)
     [:html, :css, :sass].each do |format|
       doc.css("pre.source-code.#{format}, code.#{format}").each do |el|
-        el.replace Nokogiri.make(highlight(el.inner_text, format))
+        new_element = Nokogiri.make(highlight(el.inner_text, format))
+        new_element.set_attribute("class", new_element.attribute("class").value+" "+el.attribute("class").value)
+        if id = el.attribute("id")
+          new_element.set_attribute("id", id)
+        end
+        el.replace new_element
       end
     end
     doc.to_s