Pretify

config.ru

@@ -1,2 +1,6 @@
+require 'rubygems'
+require 'bundler'
+Bundler.require
+
 require './main'
 run Sinatra::Application

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

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}

views/index.erb

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Pygmentize Example</title>
+    <link rel="me" href="http://www.google.com/profiles/samsoffes" />
+    <link rel="author" type="text/plain" href="http://samsoff.es/humans.txt" />
+    <link href="/style.css" media="screen" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <header>
+      <h1>Pygmentize Example</h1>
+    </header>
+    <section>
+      <p><a href="https://github.com/djanowski/pygmentize" rel="external nofollow">Pygmentize</a> 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 <a href="https://github.com/samsoffes/pygmentize-example" rel="external nofollow">full project on GitHub</a>. <span class="gray">Brought to you by <a href="http://samsoff.es" rel="external nofollow">Sam Soffes</a>.</span>
+      <h3>Sinatra App</h3>
+      <%= @source %>
+
+      <h3>Gemfile</h3>
+      <%= @gemfile %>
+
+      <h3>config.ru</h3>
+      <%= @config %>
+    </section>
+  </body>
+</html>