HIGHLIGHT DEM CODEZ

nakajima · May 22, 2010 · 12e8287 · 12e8287
1 parent 06c0c3f
commit 12e8287
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 17 deletions.
diff --git a/app/models/bookmarklet.rb b/app/models/bookmarklet.rb
@@ -3,14 +3,33 @@ class Bookmarklet < ActiveRecord::Base
   validates_presence_of :code
   validate :spam_check, :if => :spam?
 
+  before_create :highlight_code!, :if => :code?
+
   attr_accessor :body # This is for spam detection
-  
+
   def spam?
     @body.present? || SpamChecker.new(code).spam?
   end
 
+  def highlighted_code
+    self[:highlighted_code] || begin
+      highlight_code!
+      save!
+      highlighted_code
+    rescue
+      code
+    end
+  end
+
   private
 
+  def highlight_code!
+    self.highlighted_code = Net::HTTP.post_form(URI.parse('http://pygments.appspot.com/'), {
+      'lang' => 'javascript',
+      'code' => code
+    }).body
+  end
+
   def spam_check
     errors.add(:spam, "detection failed.")
   end

diff --git a/app/views/bookmarklets/show.html.erb b/app/views/bookmarklets/show.html.erb
@@ -9,17 +9,15 @@ Drag this to your Bookmarks Bar:
 
 <blockquote><%= h(@bookmarklet.description) %></blockquote>
 
-<%= link_to_function 'View Source', '$("source").toggle()'  %>
+<%= link_to_function 'View Source', 'showTheCodes(); return false'  %>
 
-<div id="source" style="display:none">
-  <pre><%= h(@bookmarklet.code) %></pre>
+<div id="source" style="display:none;">
+  <pre><%= @bookmarklet.highlighted_code %></pre>
 </div>
 
-<br>
-
-<%= link_to 'Click Here to Edit', edit_bookmarklet_path(@bookmarklet) if @bookmarklet.password? %>
-
-<br>
+<%- if @bookmarklet.password? -%>
+  <p><%= link_to 'Click Here to Edit', edit_bookmarklet_path(@bookmarklet) %></p>
+<%- end -%>
 
 <p>
   <a href="/">Click here to go home.</a>

diff --git a/app/views/layouts/bookmarklets.html.erb b/app/views/layouts/bookmarklets.html.erb
@@ -6,7 +6,10 @@
   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
   <title>Bookmarklets: <%= yield :title %></title>
   <%= stylesheet_link_tag 'styles' %>
+  <%= stylesheet_link_tag 'code' %>
   <%= javascript_include_tag 'prototype' %>
+  <%= javascript_include_tag 'effects' %>
+  <%= javascript_include_tag 'application' %>
 </head>
 <body>
 

diff --git a/db/migrate/20100522191825_add_highlighted_code_to_bookmarklets.rb b/db/migrate/20100522191825_add_highlighted_code_to_bookmarklets.rb
@@ -0,0 +1,9 @@
+class AddHighlightedCodeToBookmarklets < ActiveRecord::Migration
+  def self.up
+    add_column :bookmarklets, :highlighted_code, :text
+  end
+
+  def self.down
+    remove_column :bookmarklets, :highlighted_code
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
@@ -9,16 +9,17 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 20100522140049) do
+ActiveRecord::Schema.define(:version => 20100522191825) do
 
   create_table "bookmarklets", :force => true do |t|
-    t.string   "name"
-    t.text     "code"
-    t.integer  "count",       :default => 0
-    t.datetime "created_at"
-    t.datetime "updated_at"
-    t.text     "description"
-    t.string   "password"
+    t.string    "name"
+    t.text      "code"
+    t.integer   "count",            :default => 0
+    t.timestamp "created_at"
+    t.timestamp "updated_at"
+    t.text      "description"
+    t.string    "password"
+    t.text      "highlighted_code"
   end
 
 end
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -1,2 +1,5 @@
 // Place your application-specific JavaScript functions and classes here
 // This file is automatically included by javascript_include_tag :defaults
+function showTheCodes() {
+  $('source').appear({ duration: 0.3 });
+}
diff --git a/public/stylesheets/code.css b/public/stylesheets/code.css
@@ -0,0 +1,60 @@
+/* - Ripped shamefully from GitHub - */
+pre .c { color: #999988; font-style: italic } /* Comment */
+pre .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+pre .k { font-weight: bold } /* Keyword */
+pre .o { font-weight: bold } /* Operator */
+pre .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+pre .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+pre .c1 { color: #999988; font-style: italic } /* Comment.Single */
+pre .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+pre .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+pre .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+pre .ge { font-style: italic } /* Generic.Emph */
+pre .gr { color: #aa0000 } /* Generic.Error */
+pre .gh { color: #999999 } /* Generic.Heading */
+pre .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+pre .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+pre .go { color: #888888 } /* Generic.Output */
+pre .gp { color: #555555 } /* Generic.Prompt */
+pre .gs { font-weight: bold } /* Generic.Strong */
+pre .gu { color: #aaaaaa } /* Generic.Subheading */
+pre .gt { color: #aa0000 } /* Generic.Traceback */
+pre .kc { font-weight: bold } /* Keyword.Constant */
+pre .kd { font-weight: bold } /* Keyword.Declaration */
+pre .kp { font-weight: bold } /* Keyword.Pseudo */
+pre .kr { font-weight: bold } /* Keyword.Reserved */
+pre .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+pre .m { color: #009999 } /* Literal.Number */
+pre .s { color: #d14 } /* Literal.String */
+pre .na { color: #008080 } /* Name.Attribute */
+pre .nb { color: #0086B3 } /* Name.Builtin */
+pre .nc { color: #445588; font-weight: bold } /* Name.Class */
+pre .no { color: #008080 } /* Name.Constant */
+pre .ni { color: #800080 } /* Name.Entity */
+pre .ne { color: #990000; font-weight: bold } /* Name.Exception */
+pre .nf { color: #990000; font-weight: bold } /* Name.Function */
+pre .nn { color: #555555 } /* Name.Namespace */
+pre .nt { color: #000080 } /* Name.Tag */
+pre .nv { color: #008080 } /* Name.Variable */
+pre .ow { font-weight: bold } /* Operator.Word */
+pre .w { color: #bbbbbb } /* Text.Whitespace */
+pre .mf { color: #009999 } /* Literal.Number.Float */
+pre .mh { color: #009999 } /* Literal.Number.Hex */
+pre .mi { color: #009999 } /* Literal.Number.Integer */
+pre .mo { color: #009999 } /* Literal.Number.Oct */
+pre .sb { color: #d14 } /* Literal.String.Backtick */
+pre .sc { color: #d14 } /* Literal.String.Char */
+pre .sd { color: #d14 } /* Literal.String.Doc */
+pre .s2 { color: #d14 } /* Literal.String.Double */
+pre .se { color: #d14 } /* Literal.String.Escape */
+pre .sh { color: #d14 } /* Literal.String.Heredoc */
+pre .si { color: #d14 } /* Literal.String.Interpol */
+pre .sx { color: #d14 } /* Literal.String.Other */
+pre .sr { color: #009926 } /* Literal.String.Regex */
+pre .s1 { color: #d14 } /* Literal.String.Single */
+pre .ss { color: #990073 } /* Literal.String.Symbol */
+pre .bp { color: #999999 } /* Name.Builtin.Pseudo */
+pre .vc { color: #008080 } /* Name.Variable.Class */
+pre .vg { color: #008080 } /* Name.Variable.Global */
+pre .vi { color: #008080 } /* Name.Variable.Instance */
+pre .il { color: #009999 } /* Literal.Number.Integer.Long */
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
@@ -67,6 +67,7 @@ textarea {
   padding: 4px;
   margin-top: 20px;
   font-size: 14px;
+  line-height: 1.6em;
 }
 
 blockquote {