Syntax highlight with highlight.js.

articles/2013_05_01_Introducing_rollin.mk

@@ -4,7 +4,7 @@ I recently moved to China, and the past three days was a big holiday here. My Ch
 
 So I went after blogging engines. If you ask me why I didn't scaffold it with Rails I'm gonna blow your head. My requirements were that it needed to be easy to style so I could make it look pretty, that it was filesystem based so I could manage it with git, and that it was markdown. [The Ruby Toolbox](https://www.ruby-toolbox.com/) has listed a bunch of Ruby engines in it's [Blog Engine](https://www.ruby-toolbox.com/categories/Blog_Engines), no wonder! And couldn't find much more than that at the webz. 
 
-I won't go in detail in any of them. But it is worth mention in case you want to learn more about it. [Jekyll](http://jekyllrb.com/) looked pretty cool, but I didn't want to setup the infrastructure to it. [Octopress](http://octopress.org/), which is build on top of Jekyll, looks pretty cool! But it does too much stuff and I might have to hack it too much so it worked the way I wanted. [Toto](http://cloudhead.io/toto) was the best alternative. I also tried [Serious](https://github.com/colszowka/serious), which wasn't customizable out of the box. Yes! I know there are some really nice blogging tools in Javascript, I was specially interested in [wheat](https://github.com/creationix/wheat). But in the end I just wanted to build my own website and wanted something to handle the posts for me. I wanted a blog library, not an engine.
+I won't go in detail in any of them. But it is worth mention in case you want to learn more about it. [Jekyll](http://jekyllrb.com/) looked pretty cool, but I didn't want to setup all the necessary infrastructure. [Octopress](http://octopress.org/), which is build on top of Jekyll, looks pretty cool! But it does too much stuff and I might have to hack it too much so it worked the way I wanted. [Toto](http://cloudhead.io/toto) was the best alternative. I also tried [Serious](https://github.com/colszowka/serious), which wasn't customizable out of the box. Yes! I know there are some really nice blogging tools in Javascript, I was specially interested in [wheat](https://github.com/creationix/wheat). But in the end I just wanted to build my own website and wanted something to handle the posts for me. I wanted a blog library, not an engine.
 
 So I started building the website with Sinatra (yes! it still take less lines than any Javascript framework) and eventually ported out the engine to a gem. And [rollin](http://github.com/marano/rollin) was born!
 

controller.rb

@@ -9,10 +9,16 @@ class Controller < Sinatra::Base
     Less.paths << 'views/style/bootstrap'
 
     serve '/style', from: 'views/style'
+    serve '/js', from: 'js'
 
     css :application, '/style/application.css', [
       '/style/bootstrap/bootstrap.css',
-      '/style/my.css'
+      '/style/my.css',
+      '/js/highlight.js/styles/tomorrow.css'
+    ]
+
+    js :application, '/js/application.js', [
+      '/js/highlight.js/highlight.pack.js'
     ]
 
     prebuild true

js/highlight.js/styles/arta.css

@@ -0,0 +1,158 @@
+/*
+Date: 17.V.2011
+Author: pumbur <pumbur@pumbur.net>
+*/
+
+pre code
+{
+  display: block; padding: 0.5em;
+  background: #222;
+}
+
+pre .profile .header *,
+pre .ini .title,
+pre .nginx .title
+{
+  color: #fff;
+}
+
+pre .comment,
+pre .javadoc,
+pre .preprocessor,
+pre .preprocessor .title,
+pre .shebang,
+pre .profile .summary,
+pre .diff,
+pre .pi,
+pre .doctype,
+pre .tag,
+pre .template_comment,
+pre .css .rules,
+pre .tex .special
+{
+  color: #444;
+}
+
+pre .string,
+pre .symbol,
+pre .diff .change,
+pre .regexp,
+pre .xml .attribute,
+pre .smalltalk .char,
+pre .xml .value,
+pre .ini .value,
+pre .clojure .attribute
+{
+  color: #ffcc33;
+}
+
+pre .number,
+pre .addition
+{
+  color: #00cc66;
+}
+
+pre .built_in,
+pre .literal,
+pre .vhdl .typename,
+pre .go .constant,
+pre .go .typename,
+pre .ini .keyword,
+pre .lua .title,
+pre .perl .variable,
+pre .php .variable,
+pre .mel .variable,
+pre .django .variable,
+pre .css .funtion,
+pre .smalltalk .method,
+pre .hexcolor,
+pre .important,
+pre .flow,
+pre .inheritance,
+pre .parser3 .variable
+{
+  color: #32AAEE;
+}
+
+pre .keyword,
+pre .tag .title,
+pre .css .tag,
+pre .css .class,
+pre .css .id,
+pre .css .pseudo,
+pre .css .attr_selector,
+pre .lisp .title,
+pre .clojure .built_in,
+pre .winutils,
+pre .tex .command,
+pre .request,
+pre .status
+{
+  color: #6644aa;
+}
+
+pre .title,
+pre .ruby .constant,
+pre .vala .constant,
+pre .parent,
+pre .deletion,
+pre .template_tag,
+pre .css .keyword,
+pre .objectivec .class .id,
+pre .smalltalk .class,
+pre .lisp .keyword,
+pre .apache .tag,
+pre .nginx .variable,
+pre .envvar,
+pre .bash .variable,
+pre .go .built_in,
+pre .vbscript .built_in,
+pre .lua .built_in,
+pre .rsl .built_in,
+pre .tail,
+pre .avrasm .label,
+pre .tex .formula,
+pre .tex .formula *
+{
+  color: #bb1166;
+}
+
+pre .yardoctag,
+pre .phpdoc,
+pre .profile .header,
+pre .ini .title,
+pre .apache .tag,
+pre .parser3 .title
+{
+  font-weight: bold;
+}
+
+pre .coffeescript .javascript,
+pre .javascript .xml,
+pre .tex .formula,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .xml .css,
+pre .xml .cdata
+{
+  opacity: 0.6;
+}
+
+pre code,
+pre .javascript,
+pre .css,
+pre .xml,
+pre .subst,
+pre .diff .chunk,
+pre .css .value,
+pre .css .attribute,
+pre .lisp .string,
+pre .lisp .number,
+pre .tail .params,
+pre .container,
+pre .haskell *,
+pre .erlang *,
+pre .erlang_repl *
+{
+  color: #aaa;
+}

js/highlight.js/styles/ascetic.css

@@ -0,0 +1,50 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  background: white; color: black;
+}
+
+pre .string,
+pre .tag .value,
+pre .filter .argument,
+pre .addition,
+pre .change,
+pre .apache .tag,
+pre .apache .cbracket,
+pre .nginx .built_in,
+pre .tex .formula {
+  color: #888;
+}
+
+pre .comment,
+pre .template_comment,
+pre .shebang,
+pre .doctype,
+pre .pi,
+pre .javadoc,
+pre .deletion,
+pre .apache .sqbracket {
+  color: #CCC;
+}
+
+pre .keyword,
+pre .tag .title,
+pre .ini .title,
+pre .lisp .title,
+pre .clojure .title,
+pre .http .title,
+pre .nginx .title,
+pre .css .tag,
+pre .winutils,
+pre .flow,
+pre .apache .tag,
+pre .tex .command,
+pre .request,
+pre .status {
+  font-weight: bold;
+}

js/highlight.js/styles/brown_paper.css

@@ -0,0 +1,104 @@
+/*
+
+Brown Paper style from goldblog.com.ua (c) Zaripov Yura <yur4ik7@ukr.net>
+
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  background:#b7a68e url(./brown_papersq.png);
+}
+
+pre .keyword,
+pre .literal,
+pre .change,
+pre .winutils,
+pre .flow,
+pre .lisp .title,
+pre .clojure .built_in,
+pre .nginx .title,
+pre .tex .special,
+pre .request,
+pre .status {
+  color:#005599;
+  font-weight:bold;
+}
+
+pre code,
+pre .subst,
+pre .tag .keyword {
+  color: #363C69;
+}
+
+pre .string,
+pre .title,
+pre .haskell .type,
+pre .tag .value,
+pre .css .rules .value,
+pre .preprocessor,
+pre .ruby .symbol,
+pre .ruby .symbol .string,
+pre .ruby .class .parent,
+pre .built_in,
+pre .sql .aggregate,
+pre .django .template_tag,
+pre .django .variable,
+pre .smalltalk .class,
+pre .javadoc,
+pre .ruby .string,
+pre .django .filter .argument,
+pre .smalltalk .localvars,
+pre .smalltalk .array,
+pre .attr_selector,
+pre .pseudo,
+pre .addition,
+pre .stream,
+pre .envvar,
+pre .apache .tag,
+pre .apache .cbracket,
+pre .tex .number {
+  color: #2C009F;
+}
+
+pre .comment,
+pre .java .annotation,
+pre .python .decorator,
+pre .template_comment,
+pre .pi,
+pre .doctype,
+pre .deletion,
+pre .shebang,
+pre .apache .sqbracket,
+pre .nginx .built_in,
+pre .tex .formula {
+  color: #802022;
+}
+
+pre .keyword,
+pre .literal,
+pre .css .id,
+pre .phpdoc,
+pre .title,
+pre .haskell .type,
+pre .vbscript .built_in,
+pre .sql .aggregate,
+pre .rsl .built_in,
+pre .smalltalk .class,
+pre .diff .header,
+pre .chunk,
+pre .winutils,
+pre .bash .variable,
+pre .apache .tag,
+pre .tex .command {
+  font-weight: bold;
+}
+
+pre .coffeescript .javascript,
+pre .javascript .xml,
+pre .tex .formula,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .xml .css,
+pre .xml .cdata {
+  opacity: 0.8;
+}