博客代码高亮

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/assets/stylesheets/wikistyle.css.scss

@@ -1,45 +0,0 @@
-
-/* Wiki Style from Github */
-.wikistyle h1,.wikistyle h2,.wikistyle h3,.wikistyle h4,.wikistyle h5,.wikistyle h6{border:0!important;}
-.wikistyle h1{font-size:170%!important;border-top:4px solid #aaa!important;padding-top:.5em!important;margin-top:1.5em!important;}
-.wikistyle h1:first-child{margin-top:0!important;padding-top:.25em!important;border-top:none!important;}
-.wikistyle h2{font-size:150%!important;margin-top:1.5em!important;border-top:4px solid #e0e0e0!important;padding-top:.5em!important;}
-.wikistyle h3{margin-top:1em!important;}
-.wikistyle hr{border:1px solid #ddd;}
-.wikistyle p{margin:1em 0!important;line-height:1.5em!important;}
-.wikistyle a.absent{color:#a00;}
-.wikistyle del{color:#999;}
-.wikistyle ul,#wiki-form .content-body ul{margin:1em 0 1em 2em!important;}
-.wikistyle ol,#wiki-form .content-body ol{margin:1em 0 1em 2em!important;}
-.wikistyle ul li,#wiki-form .content-body ul li,.wikistyle ol li,#wiki-form .content-body ol li{margin-top:.5em;margin-bottom:.5em; list-style: decimal; }
-.wikistyle ul ul,.wikistyle ul ol,.wikistyle ol ol,.wikistyle ol ul,#wiki-form .content-body ul ul,#wiki-form .content-body ul ol,#wiki-form .content-body ol ol,#wiki-form .content-body ol ul{margin-top:0!important;margin-bottom:0!important; list-style: disc; }
-.wikistyle blockquote{margin:1em 0!important;border-left:5px solid #ddd!important;padding-left:.6em!important;color:#555!important;}
-.wikistyle dt{font-weight:bold!important;margin-left:1em!important;}
-.wikistyle dd{margin-left:2em!important;margin-bottom:1em!important;}
-.wikistyle table{margin:1em 0!important;}
-.wikistyle table th{border-bottom:1px solid #bbb!important;padding:.2em 1em!important;}
-.wikistyle table td{border-bottom:1px solid #ddd!important;padding:.2em 1em!important;}
-.wikistyle a code,.wikistyle a:link code,.wikistyle a:visited code{color:#4183c4!important;}
-.wikistyle img{max-width:100%;}
-.wikistyle pre.console{margin:1em 0!important;font-size:12px!important;background-color:black!important;padding:.5em!important;line-height:1.5em!important;color:white!important;}
-.wikistyle pre.console code{padding:0!important;font-size:12px!important;background-color:black!important;border:none!important;color:white!important;}
-.wikistyle pre.console span{color:#888!important;}
-.wikistyle pre.console span.command{color:yellow!important;}
-.wikistyle .frame{margin:0;display:inline-block;}
-.wikistyle .frame img{display:block;}
-.wikistyle .frame>span{display:block;border:1px solid #aaa;padding:4px;}
-.wikistyle .frame span span{display:block;font-size:10pt;margin:0;padding:4px 0 2px 0;text-align:center;line-height:10pt;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
-.wikistyle .float-left{float:left;padding:.5em 1em .25em 0;}
-.wikistyle .float-right{float:right;padding:.5em 0 .25em 1em;}
-.wikistyle .align-left{display:block;text-align:left;}
-.wikistyle .align-center{display:block;text-align:center;}
-.wikistyle .align-right{display:block;text-align:right;}
-.wikistyle pre{margin:1em 0;font-size:12px;background-color:#eee;border:1px solid #ddd;padding:5px;color:#444;overflow:auto;-webkit-box-shadow:rgba(0,0,0,0.07) 0 1px 2px inset;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
-.wikistyle pre::-webkit-scrollbar{height:8px;width:8px;}
-.wikistyle pre::-webkit-scrollbar-track-piece{margin-bottom:10px;background-color:#e5e5e5;border-bottom-left-radius:4px 4px;border-bottom-right-radius:4px 4px;border-top-left-radius:4px 4px;border-top-right-radius:4px 4px;}
-.wikistyle pre::-webkit-scrollbar-thumb:vertical{height:25px;background-color:#ccc;-webkit-border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(255,255,255,1);}
-.wikistyle pre::-webkit-scrollbar-thumb:horizontal{width:25px;background-color:#ccc;-webkit-border-radius:4px;}
-.wikistyle pre code{padding:0!important;font-size:12px!important;background-color:#eee!important;border:none!important;}
-.wikistyle code{font-size:12px!important;background-color:#f8f8ff!important;color:#444!important;padding:0 .2em!important;border:1px solid #dedede!important;}
-.wikistyle strong {font-weight: bold; }
-.wikistyle em {font-style: italic; }

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)
+    rd = CodeHTML.new
-    md = Redcarpet::Markdown.new(rd, :autolink=>true)
+    md = Redcarpet::Markdown.new(rd, autolink: true, fenced_code_blocks: true)
     md.render(self.content)
   end
 
@@ -31,9 +33,6 @@ class Post
   end
 
   def sub_content
-    rd = Redcarpet::Render::HTML.new(:hard_wrap=>true)
+    HTML_Truncator.truncate(content_html,100)
-    md = Redcarpet::Markdown.new(rd, :autolink=>true)
-    sub_cont = md.render(self.content)
-    HTML_Truncator.truncate(sub_cont,100)
   end
 end

app/views/blogs/_post.html.slim

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