Permalink
Browse files

Add markdown code highlighting

Something is causing the test text to loose its newline. Not sure what,
but I had to .chmop the tests with code heredocs. Otherwise, works as
expected!

Add code highlighting styles
  • Loading branch information...
edwardloveall committed Aug 18, 2016
1 parent 1d9de9a commit 003200f79bbde5efe9d8cf819fb615079bd8fa5a
View
@@ -18,6 +18,7 @@ gem 'puma'
gem 'rack-canonical-host'
gem 'rails'
gem 'redcarpet'
gem 'rouge'
gem 'sass-rails'
gem 'simple_form'
gem 'time_for_a_boolean'
View
@@ -202,6 +202,7 @@ GEM
thor (>= 0.18.1, < 2.0)
rake (11.1.2)
redcarpet (3.3.4)
rouge (2.0.5)
rspec-core (3.4.4)
rspec-support (~> 3.4.0)
rspec-expectations (3.4.0)
@@ -308,6 +309,7 @@ DEPENDENCIES
rack-canonical-host
rails
redcarpet
rouge
rspec-rails
rspec_junit_formatter (= 0.2.2)
sass-rails
@@ -15,3 +15,4 @@
@import 'blog/base';
@import 'blog/elements';
@import 'blog/posts';
@import 'blog/tomorrow-theme';
@@ -46,7 +46,9 @@ pre {
white-space: pre-wrap;
code {
padding: 0;
background: white;
display: block;
padding: .5em;
}
}
@@ -55,7 +57,7 @@ code {
background: $light-gray;
border-radius: $border-radius;
color: $dark-gray;
font-family: $monospace;
font-family: $mono;
font-size: $small-font-size;
}
@@ -0,0 +1,145 @@
$white: #FFFFFF;
$black: #545454;
$gray: #929292;
$light-gray: #EFEFEF;
$red: #C82829;
$orange: #F5871F;
$yellow: #EAB700;
$green: #718C00;
$aqua: #3E999F;
$blue: #4271AE;
$purple: #8959A8;
$background: $white;
$text: $gray;
$comment: $gray;
$selection: $light-gray;
$error: $red;
$keyword: $purple;
$literal: $orange;
$name: $gray;
$operator: $black;
$punctuation: $gray;
$comment-multiline: $gray;
$comment-preproc: $gray;
$comment-single: $gray;
$comment-special: $gray;
$deleted: $red;
$heading: $black;
$inserted: $green;
$prompt: $green;
$subheading: $aqua;
$keyword-constant: $purple;
$keyword-declaration: $purple;
$keyword-namespace: $aqua;
$keyword-pseudo: $blue;
$keyword-reserved: $purple;
$keyword-type: $yellow;
$literal-date: $green;
$literal-number: $orange;
$literal-string: $green;
$name-attribute: $blue;
$name-builtin: $blue;
$name-class: $yellow;
$name-constant: $yellow;
$name-decorator: $aqua;
$name-entity: $black;
$name-exception: $red;
$name-function: $blue;
$name-label: $black;
$name-namespace: $yellow;
$name-other: $blue;
$name-property: $black;
$name-tag: $aqua;
$name-variable: $red;
$operator-word: $aqua;
$whitespace: $black;
$literal-number-float: $orange;
$literal-number-hex: $orange;
$literal-number-integer: $orange;
$literal-number-oct: $orange;
$literal-string-backtick: $green;
$literal-string-char: $black;
$literal-string-doc: $gray;
$literal-string-double: $green;
$literal-string-escape: $orange;
$literal-string-heredoc: $green;
$literal-string-interpol: $orange;
$literal-string-other: $green;
$literal-string-regex: $green;
$literal-string-single: $green;
$literal-string-symbol: $green;
$name-builtin-pseudo: $black;
$name-variable-class: $red;
$name-variable-global: $red;
$name-variable-instance: $red;
$literal-number-integer-long: $orange;
.highlight {
color: $text;
.hll { background-color: $selection; }
.c { color: $comment; }
.err { background: $error; color: $white; }
.k { color: $keyword; }
.l { color: $literal; }
.n { color: $name; }
.o { color: $operator; }
.p { color: $punctuation; }
.cm { color: $comment-multiline; }
.cp { color: $comment-preproc; }
.c1 { color: $comment-single; }
.cs { color: $comment-special; }
.gd { color: $deleted; }
.ge { font-style: italic; }
.gh { color: $heading; font-weight: bold; }
.gi { color: $inserted; }
.gp { color: $prompt; font-weight: bold; }
.gs { font-weight: bold; }
.gu { color: $subheading; font-weight: bold; }
.kc { color: $keyword-constant; }
.kd { color: $keyword-declaration; }
.kn { color: $keyword-namespace; }
.kp { color: $keyword-pseudo; }
.kr { color: $keyword-reserved; }
.kt { color: $keyword-type; }
.ld { color: $literal-date; }
.m { color: $literal-number; }
.s { color: $literal-string; }
.na { color: $name-attribute; }
.nb { color: $name-builtin; }
.nc { color: $name-class; }
.no { color: $name-constant; }
.nd { color: $name-decorator; }
.ni { color: $name-entity; }
.ne { color: $name-exception; }
.nf { color: $name-function; }
.nl { color: $name-label; }
.nn { color: $name-namespace; }
.nx { color: $name-other; }
.py { color: $name-property; }
.nt { color: $name-tag; }
.nv { color: $name-variable; }
.ow { color: $operator-word; }
.w { color: $whitespace; }
.mf { color: $literal-number-float; }
.mh { color: $literal-number-hex; }
.mi { color: $literal-number-integer; }
.mo { color: $literal-number-oct; }
.sb { color: $literal-string-backtick; }
.sc { color: $literal-string-char; }
.sd { color: $literal-string-doc; }
.s2 { color: $literal-string-double; }
.se { color: $literal-string-escape; }
.sh { color: $literal-string-heredoc; }
.si { color: $literal-string-interpol; }
.sx { color: $literal-string-other; }
.sr { color: $literal-string-regex; }
.s1 { color: $literal-string-single; }
.ss { color: $literal-string-symbol; }
.bp { color: $name-builtin-pseudo; }
.vc { color: $name-variable-class; }
.vg { color: $name-variable-global; }
.vi { color: $name-variable-instance; }
.il { color: $literal-number-integer-long; }
}
@@ -9,6 +9,7 @@ $post-text-color: $dark-gray;
// Fonts
$post-font-family: $serif;
$mono: 'source-code-pro', $monospace;
// Fonts Sizes
$small-font-size: 14px;
@@ -1,4 +1,6 @@
require 'redcarpet'
require 'rouge'
require 'rouge/plugins/redcarpet'
class MarkdownRenderer
EXTENSIONS = { fenced_code_blocks: true, tables: true }.freeze
@@ -19,5 +21,6 @@ def to_html
class SmartHtml < Redcarpet::Render::HTML
include Redcarpet::Render::SmartyPants
include Rouge::Plugins::Redcarpet
end
end
@@ -24,6 +24,12 @@
expect(renderer.to_html).to eq code_html
end
it 'renders highlighted code fences' do
renderer = MarkdownRenderer.new(ruby_code_fence)
expect(renderer.to_html).to eq(highlighted_code_html)
end
it 'renders tables' do
renderer = MarkdownRenderer.new(table)
@@ -75,7 +81,7 @@ def html
def code_fence
<<-MARKDOWN.strip_heredoc
```ruby
```
def hello
puts "hello world"
end
@@ -84,14 +90,33 @@ def hello
end
def code_html
<<-HTML.strip_heredoc
<pre><code class="ruby">def hello
puts &quot;hello world&quot;
<<-HTML.strip_heredoc.chomp
<pre class="highlight plaintext"><code>def hello
puts \"hello world\"
end
</code></pre>
HTML
end
def ruby_code_fence
<<-MARKDOWN.strip_heredoc
```ruby
def hello
puts "hello world"
end
```
MARKDOWN
end
def highlighted_code_html
<<-HTML.strip_heredoc.chomp
<pre class="highlight ruby"><code><span class="k">def</span> <span class="nf">hello</span>
<span class="nb">puts</span> <span class="s2">"hello world"</span>
<span class="k">end</span>
</code></pre>
HTML
end
def table
<<-MARKDOWN.strip_heredoc
|Header 1| Header 2|

0 comments on commit 003200f

Please sign in to comment.