Skip to content

Commit

Permalink
Merge branch 'release/1.7.6'
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmistakes
mmistakes committed Sep 15, 2016
2 parents a36df15 + 3d02356 commit 4a86244
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 93 deletions.
112 changes: 47 additions & 65 deletions _posts/2013-08-16-code-highlighting-post.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,29 +14,50 @@ Syntax highlighting is a feature that displays source code, in different colors

[^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>

### 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 %}<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->{% endraw %}
```

{% highlight html linenos %}
{% raw %}<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->{% endraw %}
{% endhighlight %}

```ruby
module Jekyll
class TagIndex < Page
Expand All @@ -57,64 +78,25 @@ module Jekyll
end
```

### Code Blocks in Lists

### Standard Code Block

{% raw %}<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->{% 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 %}<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->{% 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'] || '&#8211;'
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.

<script src="https://gist.github.com/mmistakes/43a355923921d22cd993.js"></script>
{% gist mmistakes/6589546 %}
57 changes: 42 additions & 15 deletions _sass/_syntax.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
25 changes: 12 additions & 13 deletions _sass/_typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 4a86244

Please sign in to comment.