From 252dc3f89a06036062a181b9adef6dd49e36cea2 Mon Sep 17 00:00:00 2001 From: Sam Soffes Date: Wed, 26 Oct 2011 21:18:22 -0700 Subject: [PATCH] Pretify --- config.ru | 4 ++ main.rb | 10 ++--- public/style.css | 101 +++++++++++++++++++++++++++++++++++++++++++++++ views/index.erb | 26 ++++++++++++ 4 files changed, 135 insertions(+), 6 deletions(-) create mode 100644 public/style.css create mode 100644 views/index.erb diff --git a/config.ru b/config.ru index 14b2ecf..9bd8fc7 100644 --- a/config.ru +++ b/config.ru @@ -1,2 +1,6 @@ +require 'rubygems' +require 'bundler' +Bundler.require + require './main' run Sinatra::Application diff --git a/main.rb b/main.rb index 827f4d1..39987df 100644 --- a/main.rb +++ b/main.rb @@ -1,8 +1,6 @@ -require 'sinatra' -require 'pygmentize' - get '/' do - source = "function foo() { return 'bar'; }" - - Pygmentize.process(source, :javascript) + @gemfile = Pygmentize.process(File.open('Gemfile', 'r').read, :ruby) + @source = Pygmentize.process(File.open(__FILE__, 'r').read, :ruby) + @config = Pygmentize.process(File.open('config.ru', 'r').read, :ruby) + erb :index end diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..cbcf8e3 --- /dev/null +++ b/public/style.css @@ -0,0 +1,101 @@ +/* Reset */ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}section,header,footer,nav,article,aside,figure{display:block;width:100%}mark,time,meter,progress{display:inline} + +/* General */ + +html { +-webkit-font-smoothing:antialiased; +} + +body,input,textarea { + color: #222; + font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 300; + font-size: 17px; + line-height: 1.5em; +} + +a { + color: #0881b3; + text-decoration: none; + border-bottom: 1px solid transparent; + -moz-transition-property: color; + -webkit-transition-property: color; + -o-transition-property: color; + transition-property: color; + -moz-transition-duration: 0.2s; + -webkit-transition-duration: 0.2s; + -o-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +a:hover { + border-bottom: 1px solid; +} + +p { + margin:0 0 1em; +} + +pre { + background-color: #f8f8ff; + border: 1px solid #dedede; + color: #444; + font-family: Monaco,Courier,monospace; + font-size: 13px; + overflow: auto; + margin: 0 0 2em; + padding: 0.5em; +} + +pre code { + background-color: #f8f8ff; + border: medium none; + font-size: 1em; + padding: 0; +} + +code { + background-color: #f8f8ff; + border: 1px solid #dedede; + color: #444; + font-family: Monaco,Courier,monospace; + font-size: 0.8em; + padding: 0 0.2em; +} + +h1 { + color: #000; + font-size: 2.5em; + font-weight: 700; + margin-bottom: 0.25em; +} + +h3 { + font-size: 1em; + font-weight: 700; +} + +body > header, body > section { + width:640px; + margin:0 auto; +} + +body > header { + margin:5em auto 4em; +} + +span.gray { + color: #999; +} + +span.gray a { + color: #999; +} + +span.gray a:hover { + color: #0881b3; +} + +/* Pygments */ +.highlight{background:#fff}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k,.highlight .o,.highlight .kc,.highlight .kd,.highlight .kp,.highlight .kr{font-weight:bold}.highlight .cm,.highlight .c1{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr,.highlight .gt{color:#a00}.highlight .gh,.highlight .bp{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp,.highlight .nn{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:#aaa}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .nb{color:#0086b3}.highlight .nc{color:#458;font-weight:bold}.highlight .ni{color:#800080}.highlight .ne,.highlight .nf{color:#900;font-weight:bold}.highlight .nt{color:#000080}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,.highlight .il{color:#099}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .na,.highlight .no,.highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi{color:#008080} diff --git a/views/index.erb b/views/index.erb new file mode 100644 index 0000000..659b5e5 --- /dev/null +++ b/views/index.erb @@ -0,0 +1,26 @@ + + + + + Pygmentize Example + + + + + +
+

Pygmentize Example

+
+
+

Pygmentize is a fantastic gem for syntax highlighting. It's super easy to get going, even on Heroku!. The source for this page is below. See the full project on GitHub. Brought to you by Sam Soffes. +

Sinatra App

+ <%= @source %> + +

Gemfile

+ <%= @gemfile %> + +

config.ru

+ <%= @config %> +
+ +