From 3d02356ef8e7d4ed12eb3a513e6a413ba9b0f9a4 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Wed, 14 Sep 2016 21:53:34 -0400 Subject: Improve indented code block styling - Include indented code block example - Improve `{% highlight linenos %}` styling - Close #90, close #92 --- _posts/2013-08-16-code-highlighting-post.md | 112 ++++++++++++---------------- _sass/_syntax.scss | 57 ++++++++++---- _sass/_typography.scss | 25 +++---- 3 files changed, 101 insertions(+), 93 deletions(-) diff --git a/_posts/2013-08-16-code-highlighting-post.md b/_posts/2013-08-16-code-highlighting-post.md index e41a838..96c27b5 100644 --- a/_posts/2013-08-16-code-highlighting-post.md +++ b/_posts/2013-08-16-code-highlighting-post.md @@ -14,29 +14,50 @@ Syntax highlighting is a feature that displays source code, in different colors [^1]: -### Highlighted Code Blocks +### GFM Code Blocks -To modify styling and highlight colors edit `/_sass/_syntax.scss`. +GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported. To modify styling and highlight colors edit `/_sass/syntax.scss`. ```css #container { - float: left; - margin: 0 -240px 0 0; - width: 100%; + float: left; + margin: 0 -240px 0 0; + width: 100%; } ``` +{% highlight scss %} +.highlight { + margin: 0; + padding: 1em; + font-family: $monospace; + font-size: $type-size-7; + line-height: 1.8; +} +{% endhighlight %} + ```html {% raw %}{% endraw %} ``` +{% highlight html linenos %} +{% raw %}{% endraw %} +{% endhighlight %} + ```ruby module Jekyll class TagIndex < Page @@ -57,64 +78,25 @@ module Jekyll end ``` +### Code Blocks in Lists -### Standard Code Block - - {% raw %}{% endraw %} - - -### Fenced Code Blocks +Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., `1.`). Usually this will mean indenting 3 spaces instead of 4. -To modify styling and highlight colors edit `/_sass/_coderay.scss`. Line numbers and a few other things can be modified in `_config.yml`. Consult [Jekyll's documentation](http://jekyllrb.com/docs/configuration/) for more information. - -~~~ css -#container { - float: left; - margin: 0 -240px 0 0; - width: 100%; -} -~~~ - -~~~ html -{% raw %}{% endraw %} -~~~ - -~~~ ruby -module Jekyll - class TagIndex < Page - def initialize(site, base, dir, tag) - @site = site - @base = base - @dir = dir - @name = 'index.html' - self.process(@name) - self.read_yaml(File.join(base, '_layouts'), 'tag_index.html') - self.data['tag'] = tag - tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: ' - tag_title_suffix = site.config['tag_title_suffix'] || '–' - self.data['title'] = "#{tag_title_prefix}#{tag}" - self.data['description'] = "An archive of posts tagged #{tag}." - end - end -end -~~~ +1. Do step 1. +2. Now do this: + + ```ruby + def print_hi(name) + puts "Hi, #{name}" + end + print_hi('Tom') + #=> prints 'Hi, Tom' to STDOUT. + ``` + +3. Now you can do this. ### GitHub Gist Embed An example of a Gist embed below. - \ No newline at end of file +{% gist mmistakes/6589546 %} \ No newline at end of file diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss index 2203e24..d63a41c 100644 --- a/_sass/_syntax.scss +++ b/_sass/_syntax.scss @@ -2,24 +2,51 @@ Syntax Highlighting ========================================================================== */ -pre.highlight { - padding: 1em; +div.highlighter-rouge, +figure.highlight { + position: relative; + margin-bottom: 1.5em; + color: #d0d0d0; + @include font-rem(12); + line-height: 1.5; + border: 1px solid darken($body-color, 5); + border-radius: 3px; + background-color: #272822; + + .highlight { + margin: 0; + padding: 1em; + } +} + +figure.highlight { + padding-left: 1em; + padding-right: 1em; +} + +.highlight table { + font-size: 1em; + border: 0; + + td { + padding: 5px; + border: 0; + + // line numbers + &.gutter { + padding-right: 1em; + color: #ccc; + } + } + + pre { + margin: 0; + } } -.highlight { - margin-bottom: 1.5em; - @include font-rem(12); - line-height: 1.5; - color: #d0d0d0; - border: 1px solid darken($body-color, 5); - background-color: #272822; - border-radius: 3px; +.highlight pre { width: 100%; } - pre { - position: relative; - margin: 0; - padding: 1em; - } +.highlight { .lineno { padding-right: 24px; color: #8f908a;} .hll { background-color: #49483e } diff --git a/_sass/_typography.scss b/_sass/_typography.scss index e87443e..e1b91e7 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -108,19 +108,18 @@ tt, code, kbd, samp, pre { font-family: $code-font; } -p, -li { - - code { - @include font-rem(12); - line-height: 1.5; - white-space: nowrap; - margin: 0 2px; - padding: 0 5px; - border: 1px solid lighten(#000, 90); - background-color: lighten(#000, 95); - border-radius: 3px; - } +p > code, +a > code, +li > code, +figcaption > code, +td > code { + margin: 0 2px; + padding: 0 5px; + @include font-rem(12); + line-height: 1.5; + border: 1px solid lighten(#000, 90); + background-color: lighten(#000, 95); + border-radius: 3px; } pre { -- cgit v1.2.3