博客代码高亮

Gemfile

@@ -16,6 +16,7 @@ gem 'foundation-icons-sass-rails'
 gem "mongoid"
 gem "mongoid-pagination"
 gem "redcarpet"
+gem "rouge"
 gem 'slim-rails'
 gem "simple_form"
 gem "mini_magick"

app/assets/stylesheets/highlight.css.scss

@@ -0,0 +1,60 @@
+.highlight .c{color:#998;font-style:italic;}
+.highlight .err{color:#a61717;background-color:#e3d2d2;}
+.highlight .k{font-weight:bold;}
+.highlight .o{font-weight:bold;}
+.highlight .cm{color:#998;font-style:italic;}
+.highlight .cp{color:#999;font-weight:bold;}
+.highlight .c1{color:#998;font-style:italic;}
+.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{color:#a00;}
+.highlight .gh{color:#999;}
+.highlight .gi{color:#000;background-color:#dfd;}
+.highlight .gi .x{color:#000;background-color:#afa;}
+.highlight .go{color:#888;}
+.highlight .gp{color:#555;}
+.highlight .gs{font-weight:bold;}
+.highlight .gu{color:#800080;font-weight:bold;}
+.highlight .gt{color:#a00;}
+.highlight .kc{font-weight:bold;}
+.highlight .kd{font-weight:bold;}
+.highlight .kn{font-weight:bold;}
+.highlight .kp{font-weight:bold;}
+.highlight .kr{font-weight:bold;}
+.highlight .kt{color:#458;font-weight:bold;}
+.highlight .m{color:#099;}
+.highlight .s{color:#d14;}
+.highlight .na{color:#008080;}
+.highlight .nb{color:#0086B3;}
+.highlight .nc{color:#458;font-weight:bold;}
+.highlight .no{color:#008080;}
+.highlight .ni{color:#800080;}
+.highlight .ne{color:#900;font-weight:bold;}
+.highlight .nf{color:#900;font-weight:bold;}
+.highlight .nn{color:#555;}
+.highlight .nt{color:#000080;}
+.highlight .nv{color:#008080;}
+.highlight .ow{font-weight:bold;}
+.highlight .w{color:#bbb;}
+.highlight .mf{color:#099;}
+.highlight .mh{color:#099;}
+.highlight .mi{color:#099;}
+.highlight .mo{color:#099;}
+.highlight .sb{color:#d14;}
+.highlight .sc{color:#d14;}
+.highlight .sd{color:#d14;}
+.highlight .s2{color:#d14;}
+.highlight .se{color:#d14;}
+.highlight .sh{color:#d14;}
+.highlight .si{color:#d14;}
+.highlight .sx{color:#d14;}
+.highlight .sr{color:#009926;}
+.highlight .s1{color:#d14;}
+.highlight .ss{color:#990073;}
+.highlight .bp{color:#999;}
+.highlight .vc{color:#008080;}
+.highlight .vg{color:#008080;}
+.highlight .vi{color:#008080;}
+.highlight .il{color:#099;}

app/assets/stylesheets/markdown.css.scss

@@ -0,0 +1,13 @@
+.markdown {
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 1.5rem;
+  }
+
+  pre {
+    border: 1px solid #cccccc;
+    padding: 1rem 0.5rem;
+    margin: 1rem 0;
+    font-weight: 500;
+    color: #d14;
+  }
+}

app/models/post.rb

@@ -1,4 +1,6 @@
 # encoding : utf-8
+#
+require 'markdown'
 class Post
   TECH = "技术"
   LIFE = "生活"
@@ -19,8 +21,8 @@ class Post
   validates :type, :presence=>true, :inclusion => { :in => [ TECH, LIFE, CREATOR ] }
 
   def content_html
-    rd = Redcarpet::Render::HTML.new(:hard_wrap=>true)
-    md = Redcarpet::Markdown.new(rd, :autolink=>true)
+    rd = CodeHTML.new
+    md = Redcarpet::Markdown.new(rd, autolink: true, fenced_code_blocks: true)
     md.render(self.content)
   end
 
@@ -31,9 +33,6 @@ def visited
   end
 
   def sub_content
-    rd = Redcarpet::Render::HTML.new(:hard_wrap=>true)
-    md = Redcarpet::Markdown.new(rd, :autolink=>true)
-    sub_cont = md.render(self.content)
-    HTML_Truncator.truncate(sub_cont,100)
+    HTML_Truncator.truncate(content_html,100)
   end
 end

app/views/blogs/_post.html.slim

@@ -6,20 +6,8 @@ p.ptag
   | 标签:
   span 生活, 感悟
 
-.content
-  p 没错, 科学只是哲学的一个部分, 所以此书给我最大的收获是, 科学只是一种实用主义. 只是这种实用主义更纯粹些:
-  p
-    |  1. 任何公理都值得怀疑
-    |  2. 能够验证与重复
-
-  p 瞧, 第 2 点的感觉就是说, 太阳一直东方升起, 这就是科学, 因为我们一直在重复这个结论. 但是, 我们知道, 1000万年后, 我们可能就再也看不到太阳了, 所以这个结论还需要修正. 这就是科学的本质.
-
-  p  再举个历史的例子: 
-
-  p
-    |  1. 地球是平的
-    |  2. 地球是圆的
-    |  3. 地球是椭圆的
+.content.markdown
+  == post.content_html
 
 p.ptag
   | 发表于:

lib/markdown.rb

@@ -0,0 +1,6 @@
+require 'rouge'
+require 'rouge/plugins/redcarpet'
+
+class CodeHTML < Redcarpet::Render::HTML
+  include Rouge::Plugins::Redcarpet
+end