allow partially highlighting of code examples

livingstyleguide · Jan 16, 2013 · a1aa785 · a1aa785
1 parent 0c7c616
commit a1aa785
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 1 deletion.
diff --git a/lib/livingstyleguide/markdown_extensions.rb b/lib/livingstyleguide/markdown_extensions.rb
@@ -84,10 +84,13 @@ def list_item(text, list_type)
 
     def block_code(code, language)
       if %w(example layout-example).include?(language)
-        %Q(<div class="livingstyleguide--#{language}">\n  #{code}\n</div>) + "\n" + block_code(code, 'html')
+        html = code.gsub(/\*\*\*(.+?)\*\*\*/m, '\\1')
+        %Q(<div class="livingstyleguide--#{language}">\n  #{html}\n</div>) + "\n" + block_code(code, 'html')
       else
         code = ERB::Util.html_escape(code).gsub(/&quot;/, '"')
         code = ::MiniSyntax.highlight(code.strip, language.to_s.strip.to_sym)
+        code.gsub! /^\s*\*\*\*\n(.+?)\n\s*\*\*\*\n/m, %Q(<strong class="livingstyleguide--code-highlight-block">\\1</strong>)
+        code.gsub! /\*\*\*(.+?)\*\*\*/, %Q(<strong class="livingstyleguide--code-highlight">\\1</strong>)
         %Q(<pre class="livingstyleguide--code-block"><code class="livingstyleguide--code">#{code}</code></pre>)
       end
     end

diff --git a/stylesheets/_livingstyleguide.scss b/stylesheets/_livingstyleguide.scss
@@ -41,6 +41,9 @@ $livingstyleguide--color-swatch-border-color: $livingstyleguide--border-color !d
 $livingstyleguide--color-swatch-border-radius: $livingstyleguide--border-radius !default;
 $livingstyleguide--color-swatches-per-line: 2 !default;
 
+$livingstyleguide--highlight-color: #f6ffa3 !default;
+$livingstyleguide--highlight-border-radius: 2px;
+
 //// IMPORTS ////
 
 @import "livingstyleguide/layout";

diff --git a/stylesheets/livingstyleguide/_code.scss b/stylesheets/livingstyleguide/_code.scss
@@ -73,3 +73,13 @@
   @extend .livingstyleguide--example;
 }
 
+.livingstyleguide--code-highlight {
+  background-color: $livingstyleguide--highlight-color;
+  @include border-radius($livingstyleguide--highlight-border-radius);
+}
+
+.livingstyleguide--code-highlight-block {
+  @extend .livingstyleguide--code-highlight;
+  display: block;
+}
+
diff --git a/test/fixtures/markdown/code-with-highlight-block.md b/test/fixtures/markdown/code-with-highlight-block.md
@@ -0,0 +1,6 @@
+~~~ html
+***
+<p>Block example</p>
+***
+~~~
+
diff --git a/test/fixtures/markdown/code-with-highlight.md b/test/fixtures/markdown/code-with-highlight.md
@@ -0,0 +1,4 @@
+~~~ html
+<img class="inline ***example***">
+~~~
+
diff --git a/test/fixtures/markdown/example-with-highlight.md b/test/fixtures/markdown/example-with-highlight.md
@@ -0,0 +1,5 @@
+~~~ example
+<img class="inline ***example***">
+<img class="inline ***ex-1*** ***ex-2***">
+~~~
+
diff --git a/test/integration/markdown_test.rb b/test/integration/markdown_test.rb
@@ -61,6 +61,29 @@ def test_code
     HTML
   end
 
+  def test_code_with_highlight
+    assert_markdown <<-HTML, 'code-with-highlight.md'
+      <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code">.+<strong class="livingstyleguide--code-highlight">example</strong>.+</code></pre>
+    HTML
+  end
+
+  def test_code_with_highlight_block
+    assert_markdown <<-HTML, 'code-with-highlight-block.md'
+      <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code"><strong class="livingstyleguide--code-highlight-block">.+Block example.+</strong></code></pre>
+    HTML
+  end
+
+  def test_example_with_highlight
+    assert_markdown <<-HTML, 'example-with-highlight.md'
+      <div class="livingstyleguide--example">
+        <img class="inline example">
+        <img class="inline ex-1 ex-2">
+      </div>
+      <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code">.+<strong class="livingstyleguide--code-highlight">example</strong>.+
+      <strong class="livingstyleguide--code-highlight">ex-1</strong> <strong class="livingstyleguide--code-highlight">ex-2</strong>.+</code></pre>
+    HTML
+  end
+
   def test_variables
     assert_markdown <<-HTML, 'variables.md'
       <ul class="livingstyleguide--color-swatches">