Permalink
Browse files

allow partially highlighting of code examples

  • Loading branch information...
hagenburger committed Jan 16, 2013
1 parent 0c7c616 commit a1aa7851658d93259d42335afc93e977c125cd31
@@ -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
@@ -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";
@@ -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;
}

@@ -0,0 +1,6 @@
~~~ html
***
<p>Block example</p>
***
~~~

@@ -0,0 +1,4 @@
~~~ html
<img class="inline ***example***">
~~~

@@ -0,0 +1,5 @@
~~~ example
<img class="inline ***example***">
<img class="inline ***ex-1*** ***ex-2***">
~~~

@@ -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">

0 comments on commit a1aa785

Please sign in to comment.