Cleanup code syntax highlighting (Pygments, Coderay)

_posts/2013-08-16-code-highlighting-post.md

@@ -17,6 +17,8 @@ Syntax highlighting is a feature that displays source code, in different colors
 
 ### Pygments Code Blocks
 
+To modify styling and highlight colors edit `/assets/less/pygments.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.highlight`.
+
 {% highlight css %}
 #container {
     float: left;
@@ -26,6 +28,7 @@ Syntax highlighting is a feature that displays source code, in different colors
 {% endhighlight %}
 
 {% highlight html %}
+{% raw %}
 <nav class="pagination" role="navigation">
     {% if page.previous %}
         <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
@@ -34,6 +37,7 @@ Syntax highlighting is a feature that displays source code, in different colors
         <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
     {% endif %}
 </nav><!-- /.pagination -->
+{% endraw %}
 {% endhighlight %}
 
 {% highlight ruby %}
@@ -59,14 +63,22 @@ end
 
 ### Standard Code Block
 
+    {% raw %}
     <nav class="pagination" role="navigation">
-          <a href="/previous-article-page.html" class="btn" title="Previous Page Title Goes Here">Previous article</a>
+        {% if page.previous %}
-          <a href="/next-article-page.html" class="btn" title="Next Page Title Goes Here">Next article</a>
+            <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+        {% endif %}
+        {% if page.next %}
+            <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+        {% endif %}
     </nav><!-- /.pagination -->
+    {% endraw %}
 
 
 ### Fenced Code Blocks
 
+To modify styling and highlight colors edit `/assets/less/coderay.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.coderay`. Line numbers and a few other things can be modified in `_config.yml` under `coderay`.
+
 ~~~ css
 #container {
     float: left;
@@ -76,14 +88,14 @@ end
 ~~~
 
 ~~~ html
-<nav class="pagination" role="navigation">
+{% raw %}<nav class="pagination" role="navigation">
     {% if page.previous %}
         <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
     {% endif %}
     {% if page.next %}
         <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
     {% endif %}
-</nav><!-- /.pagination -->
+</nav><!-- /.pagination -->{% endraw %}
 ~~~
 
 ~~~ ruby

assets/css/main.css

@@ -47,8 +47,8 @@ blockquote{font-family:'volkhov',serif;font-style:italic;font-size:24px;font-siz
 .footnotes{font-size:14px;font-size:0.875rem;line-height:1.7143;font-family:'source-sans-pro',sans-serif;}
 tt,code,kbd,samp,pre{font-family:'source-code-pro',monospace;}
 p code,li code{font-size:12px;font-size:0.75rem;line-height:2;white-space:nowrap;margin:0 2px;padding:0 5px;border:1px solid #e6e6e6;background-color:#f2f2f2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
-pre{font-size:12px;font-size:0.75rem;line-height:2;}
+pre{font-size:12px;font-size:0.75rem;line-height:2;overflow-x:auto;}
-.highlight{overflow-x:auto;font-size:12px;font-size:0.75rem;line-height:2;border:1px solid #dedede;}.highlight pre{position:relative;margin:0;padding:1em;}
+.highlight{margin-bottom:1.5em;font-size:12px;font-size:0.75rem;line-height:2;border:1px solid #dedede;}.highlight pre{position:relative;margin:0;padding:1em;}
 .highlight .hll{background-color:#ffffcc;}
 .highlight .c{color:#999988;font-style:italic;}
 .highlight .err{color:#a61717;background-color:#e3d2d2;}
@@ -110,6 +110,100 @@ pre{font-size:12px;font-size:0.75rem;line-height:2;}
 .highlight .vg{color:#008080;}
 .highlight .vi{color:#008080;}
 .highlight .il{color:#009999;}
+.CodeRay{font-family:'source-code-pro',monospace;font-size:12px;font-size:0.75rem;line-height:2;color:#333332;margin-bottom:1.5em;border:1px solid #dedede;}
+.CodeRay code{margin:0;padding:1em;}
+span.CodeRay{white-space:pre;border:0px;padding:2px;}
+table.CodeRay{border-collapse:collapse;width:100%;padding:2px;}
+table.CodeRay td{padding:1em 0.5em;vertical-align:top;}
+.CodeRay .line-numbers,.CodeRay .no{color:#AAA;text-align:right;}
+.CodeRay .line-numbers a{color:#AAA;}
+.CodeRay .line-numbers tt{font-weight:bold;}
+.CodeRay .line-numbers .highlighted{color:#ff0000;}
+.CodeRay .line{display:block;float:left;width:100%;}
+.CodeRay span.line-numbers{padding:0 24px 0 4px;}
+.CodeRay .code{width:100%;}
+ol.CodeRay{font-size:10pt;}
+ol.CodeRay li{white-space:pre;}
+.CodeRay .code pre{overflow:auto;}
+.CodeRay .debug{color:white ! important;background:blue ! important;}
+.CodeRay .annotation{color:#000077;}
+.CodeRay .attribute-name{color:#ff0088;}
+.CodeRay .attribute-value{color:#770000;}
+.CodeRay .binary{color:#509;font-weight:bold;}
+.CodeRay .comment{color:#998;font-style:italic;}
+.CodeRay .char{color:#0044dd;}
+.CodeRay .char .content{color:#0044dd;}
+.CodeRay .char .delimiter{color:#003399;}
+.CodeRay .class{color:#458;font-weight:bold;}
+.CodeRay .complex{color:#A08;font-weight:bold;}
+.CodeRay .constant{color:teal;}
+.CodeRay .color{color:#00aa00;}
+.CodeRay .class-variable{color:#336699;}
+.CodeRay .decorator{color:#B0B;}
+.CodeRay .definition{color:#099;font-weight:bold;}
+.CodeRay .directive{color:#088;font-weight:bold;}
+.CodeRay .delimiter{color:#000000;}
+.CodeRay .doc{color:#997700;}
+.CodeRay .doctype{color:#3344bb;}
+.CodeRay .doc-string{color:#D42;font-weight:bold;}
+.CodeRay .escape{color:#666;font-weight:bold;}
+.CodeRay .entity{color:#800;font-weight:bold;}
+.CodeRay .error{color:#F00;background-color:#ffaaaa;}
+.CodeRay .exception{color:#C00;font-weight:bold;}
+.CodeRay .filename{color:#099;}
+.CodeRay .function{color:#900;font-weight:bold;}
+.CodeRay .global-variable{color:teal;font-weight:bold;}
+.CodeRay .hex{color:#058;font-weight:bold;}
+.CodeRay .integer{color:#099;}
+.CodeRay .include{color:#B44;font-weight:bold;}
+.CodeRay .inline{color:#000000;}
+.CodeRay .inline .inline{background:#cccccc;}
+.CodeRay .inline .inline .inline{background:#bbbbbb;}
+.CodeRay .inline .inline-delimiter{color:#D14;}
+.CodeRay .inline-delimiter{color:#D14;}
+.CodeRay .important{color:#f00;}
+.CodeRay .interpreted{color:#B2B;font-weight:bold;}
+.CodeRay .instance-variable{color:#008080;}
+.CodeRay .label{color:#970;font-weight:bold;}
+.CodeRay .local-variable{color:#996633;}
+.CodeRay .octal{color:#40E;font-weight:bold;}
+.CodeRay .predefined-constant{font-weight:bold;}
+.CodeRay .predefined{color:#369;font-weight:bold;}
+.CodeRay .preprocessor{color:#579;}
+.CodeRay .pseudo-class{color:#00C;font-weight:bold;}
+.CodeRay .predefined-type{color:#074;font-weight:bold;}
+.CodeRay .reserved,.keyword{color:#000;font-weight:bold;}
+.CodeRay .key{color:#808;}
+.CodeRay .key .delimiter{color:#606;}
+.CodeRay .key .char{color:#80f;}
+.CodeRay .value{color:#088;}
+.CodeRay .regexp{background-color:#fff0ff;}
+.CodeRay .regexp .content{color:#880088;}
+.CodeRay .regexp .delimiter{color:#440044;}
+.CodeRay .regexp .modifier{color:#cc22cc;}
+.CodeRay .regexp .function{color:#404;font-weight:bold;}
+.CodeRay .string{color:#D20;}
+.CodeRay .string .string .string{background-color:#ffd0d0;}
+.CodeRay .string .content{color:#D14;}
+.CodeRay .string .char{color:#D14;}
+.CodeRay .string .delimiter{color:#D14;}
+.CodeRay .shell{color:#dd1144;}
+.CodeRay .shell .delimiter{color:#dd1144;}
+.CodeRay .symbol{color:#990073;}
+.CodeRay .symbol .content{color:#aa6600;}
+.CodeRay .symbol .delimiter{color:#663300;}
+.CodeRay .tag{color:#007700;}
+.CodeRay .tag-special{color:#D70;font-weight:bold;}
+.CodeRay .type{color:#339;font-weight:bold;}
+.CodeRay .variable{color:#003366;}
+.CodeRay .insert{background:#afa;}
+.CodeRay .delete{background:#faa;}
+.CodeRay .change{color:#aaf;background:#007;}
+.CodeRay .head{color:#f8f;background:#550055;}
+.CodeRay .insert .insert{color:#080;font-weight:bold;}
+.CodeRay .delete .delete{color:#800;font-weight:bold;}
+.CodeRay .change .change{color:#66f;}
+.CodeRay .head .head{color:#f4f;}
 .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
 .clearfix:after{clear:both;}
 .hidden{display:none;visibility:hidden;}

assets/less/coderay.less

@@ -1,13 +1,13 @@
 .CodeRay {
-  background-color: #efefef;
   font-family: @code-font;
-  font-size: 80%;
+  .font(12);
   color: #333332;
   margin-bottom: 1.5em;
+  border: 1px solid darken(@body-color, 5);
 }
 
-.CodeRay pre {
+.CodeRay code {
-  margin: 0px;
+  margin: 0;
   padding: 1em;
 }
 
@@ -21,7 +21,6 @@ table.CodeRay td {
 }
 
 .CodeRay .line-numbers, .CodeRay .no {
-  background-color: #ECECEC;
   color: #AAA;
   text-align: right;
 }

assets/less/main.less

@@ -14,6 +14,8 @@
 @import "typography.less";
 // Pygments Syntax highlighting ===============================
 @import "pygments.less";
+// Coderay Syntax highlighting ===============================
+@import "coderay.less";
 // MIXINS =====================================================
 @import "mixins.less";
 @import "grid.less";

assets/less/pygments.less

@@ -1,5 +1,5 @@
 .highlight {
-	overflow-x: auto;
+	margin-bottom: 1.5em;
 	.font(12);
 	border: 1px solid darken(@body-color, 5);
 	pre {

assets/less/typography.less

@@ -120,4 +120,5 @@ li {
 }
 pre {
 	.font(12);
+	overflow-x: auto;
 }