mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-07 12:06:26 +00:00
Merge branch 'hotfix/code-wrap' into develop
This commit is contained in:
commit
83e92d6f08
6 changed files with 223 additions and 8 deletions
119
_posts/2013-08-16-code-highlighting-post.md
Normal file
119
_posts/2013-08-16-code-highlighting-post.md
Normal file
|
@ -0,0 +1,119 @@
|
||||||
|
---
|
||||||
|
layout: post
|
||||||
|
title: Syntax Highlighting Post
|
||||||
|
description: "Demo post displaying the various ways of highlighting code in Markdown."
|
||||||
|
category: articles
|
||||||
|
tags: [sample post, code, highlighting]
|
||||||
|
image:
|
||||||
|
feature: so-simple-sample-image-5.jpg
|
||||||
|
credit: Michael Rose
|
||||||
|
creditlink: http://mademistakes.com
|
||||||
|
comments: true
|
||||||
|
---
|
||||||
|
|
||||||
|
Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1]
|
||||||
|
|
||||||
|
[^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>
|
||||||
|
|
||||||
|
### Pygments Code Blocks
|
||||||
|
|
||||||
|
To modify styling and highlight colors edit `/assets/less/pygments.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.highlight`.
|
||||||
|
|
||||||
|
{% highlight css %}
|
||||||
|
#container {
|
||||||
|
float: left;
|
||||||
|
margin: 0 -240px 0 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
{% highlight 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 %}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
{% highlight 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
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
### 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
|
||||||
|
|
||||||
|
To modify styling and highlight colors edit `/assets/less/coderay.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.coderay`. Line numbers and a few other things can be modified in `_config.yml` under `coderay`.
|
||||||
|
|
||||||
|
~~~ 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'] || '–'
|
||||||
|
self.data['title'] = "#{tag_title_prefix}#{tag}"
|
||||||
|
self.data['description'] = "An archive of posts tagged #{tag}."
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
~~~
|
|
@ -47,8 +47,8 @@ blockquote{font-family:'volkhov',serif;font-style:italic;font-size:24px;font-siz
|
||||||
.footnotes{font-size:14px;font-size:0.875rem;line-height:1.7143;font-family:'source-sans-pro',sans-serif;}
|
.footnotes{font-size:14px;font-size:0.875rem;line-height:1.7143;font-family:'source-sans-pro',sans-serif;}
|
||||||
tt,code,kbd,samp,pre{font-family:'source-code-pro',monospace;}
|
tt,code,kbd,samp,pre{font-family:'source-code-pro',monospace;}
|
||||||
p code,li code{font-size:12px;font-size:0.75rem;line-height:2;white-space:nowrap;margin:0 2px;padding:0 5px;border:1px solid #e6e6e6;background-color:#f2f2f2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
p code,li code{font-size:12px;font-size:0.75rem;line-height:2;white-space:nowrap;margin:0 2px;padding:0 5px;border:1px solid #e6e6e6;background-color:#f2f2f2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||||
pre{font-size:12px;font-size:0.75rem;line-height:2;}
|
pre{font-size:12px;font-size:0.75rem;line-height:2;overflow-x:auto;}
|
||||||
.highlight{overflow-x:auto;font-size:12px;font-size:0.75rem;line-height:2;border:1px solid #dedede;}.highlight pre{position:relative;margin:0;padding:1em;}
|
.highlight{margin-bottom:1.5em;font-size:12px;font-size:0.75rem;line-height:2;border:1px solid #dedede;}.highlight pre{position:relative;margin:0;padding:1em;}
|
||||||
.highlight .hll{background-color:#ffffcc;}
|
.highlight .hll{background-color:#ffffcc;}
|
||||||
.highlight .c{color:#999988;font-style:italic;}
|
.highlight .c{color:#999988;font-style:italic;}
|
||||||
.highlight .err{color:#a61717;background-color:#e3d2d2;}
|
.highlight .err{color:#a61717;background-color:#e3d2d2;}
|
||||||
|
@ -110,6 +110,100 @@ pre{font-size:12px;font-size:0.75rem;line-height:2;}
|
||||||
.highlight .vg{color:#008080;}
|
.highlight .vg{color:#008080;}
|
||||||
.highlight .vi{color:#008080;}
|
.highlight .vi{color:#008080;}
|
||||||
.highlight .il{color:#009999;}
|
.highlight .il{color:#009999;}
|
||||||
|
.CodeRay{font-family:'source-code-pro',monospace;font-size:12px;font-size:0.75rem;line-height:2;color:#333332;margin-bottom:1.5em;border:1px solid #dedede;}
|
||||||
|
.CodeRay code{margin:0;padding:1em;}
|
||||||
|
span.CodeRay{white-space:pre;border:0px;padding:2px;}
|
||||||
|
table.CodeRay{border-collapse:collapse;width:100%;padding:2px;}
|
||||||
|
table.CodeRay td{padding:1em 0.5em;vertical-align:top;}
|
||||||
|
.CodeRay .line-numbers,.CodeRay .no{color:#AAA;text-align:right;}
|
||||||
|
.CodeRay .line-numbers a{color:#AAA;}
|
||||||
|
.CodeRay .line-numbers tt{font-weight:bold;}
|
||||||
|
.CodeRay .line-numbers .highlighted{color:#ff0000;}
|
||||||
|
.CodeRay .line{display:block;float:left;width:100%;}
|
||||||
|
.CodeRay span.line-numbers{padding:0 24px 0 4px;}
|
||||||
|
.CodeRay .code{width:100%;}
|
||||||
|
ol.CodeRay{font-size:10pt;}
|
||||||
|
ol.CodeRay li{white-space:pre;}
|
||||||
|
.CodeRay .code pre{overflow:auto;}
|
||||||
|
.CodeRay .debug{color:white ! important;background:blue ! important;}
|
||||||
|
.CodeRay .annotation{color:#000077;}
|
||||||
|
.CodeRay .attribute-name{color:#ff0088;}
|
||||||
|
.CodeRay .attribute-value{color:#770000;}
|
||||||
|
.CodeRay .binary{color:#509;font-weight:bold;}
|
||||||
|
.CodeRay .comment{color:#998;font-style:italic;}
|
||||||
|
.CodeRay .char{color:#0044dd;}
|
||||||
|
.CodeRay .char .content{color:#0044dd;}
|
||||||
|
.CodeRay .char .delimiter{color:#003399;}
|
||||||
|
.CodeRay .class{color:#458;font-weight:bold;}
|
||||||
|
.CodeRay .complex{color:#A08;font-weight:bold;}
|
||||||
|
.CodeRay .constant{color:teal;}
|
||||||
|
.CodeRay .color{color:#00aa00;}
|
||||||
|
.CodeRay .class-variable{color:#336699;}
|
||||||
|
.CodeRay .decorator{color:#B0B;}
|
||||||
|
.CodeRay .definition{color:#099;font-weight:bold;}
|
||||||
|
.CodeRay .directive{color:#088;font-weight:bold;}
|
||||||
|
.CodeRay .delimiter{color:#000000;}
|
||||||
|
.CodeRay .doc{color:#997700;}
|
||||||
|
.CodeRay .doctype{color:#3344bb;}
|
||||||
|
.CodeRay .doc-string{color:#D42;font-weight:bold;}
|
||||||
|
.CodeRay .escape{color:#666;font-weight:bold;}
|
||||||
|
.CodeRay .entity{color:#800;font-weight:bold;}
|
||||||
|
.CodeRay .error{color:#F00;background-color:#ffaaaa;}
|
||||||
|
.CodeRay .exception{color:#C00;font-weight:bold;}
|
||||||
|
.CodeRay .filename{color:#099;}
|
||||||
|
.CodeRay .function{color:#900;font-weight:bold;}
|
||||||
|
.CodeRay .global-variable{color:teal;font-weight:bold;}
|
||||||
|
.CodeRay .hex{color:#058;font-weight:bold;}
|
||||||
|
.CodeRay .integer{color:#099;}
|
||||||
|
.CodeRay .include{color:#B44;font-weight:bold;}
|
||||||
|
.CodeRay .inline{color:#000000;}
|
||||||
|
.CodeRay .inline .inline{background:#cccccc;}
|
||||||
|
.CodeRay .inline .inline .inline{background:#bbbbbb;}
|
||||||
|
.CodeRay .inline .inline-delimiter{color:#D14;}
|
||||||
|
.CodeRay .inline-delimiter{color:#D14;}
|
||||||
|
.CodeRay .important{color:#f00;}
|
||||||
|
.CodeRay .interpreted{color:#B2B;font-weight:bold;}
|
||||||
|
.CodeRay .instance-variable{color:#008080;}
|
||||||
|
.CodeRay .label{color:#970;font-weight:bold;}
|
||||||
|
.CodeRay .local-variable{color:#996633;}
|
||||||
|
.CodeRay .octal{color:#40E;font-weight:bold;}
|
||||||
|
.CodeRay .predefined-constant{font-weight:bold;}
|
||||||
|
.CodeRay .predefined{color:#369;font-weight:bold;}
|
||||||
|
.CodeRay .preprocessor{color:#579;}
|
||||||
|
.CodeRay .pseudo-class{color:#00C;font-weight:bold;}
|
||||||
|
.CodeRay .predefined-type{color:#074;font-weight:bold;}
|
||||||
|
.CodeRay .reserved,.keyword{color:#000;font-weight:bold;}
|
||||||
|
.CodeRay .key{color:#808;}
|
||||||
|
.CodeRay .key .delimiter{color:#606;}
|
||||||
|
.CodeRay .key .char{color:#80f;}
|
||||||
|
.CodeRay .value{color:#088;}
|
||||||
|
.CodeRay .regexp{background-color:#fff0ff;}
|
||||||
|
.CodeRay .regexp .content{color:#880088;}
|
||||||
|
.CodeRay .regexp .delimiter{color:#440044;}
|
||||||
|
.CodeRay .regexp .modifier{color:#cc22cc;}
|
||||||
|
.CodeRay .regexp .function{color:#404;font-weight:bold;}
|
||||||
|
.CodeRay .string{color:#D20;}
|
||||||
|
.CodeRay .string .string .string{background-color:#ffd0d0;}
|
||||||
|
.CodeRay .string .content{color:#D14;}
|
||||||
|
.CodeRay .string .char{color:#D14;}
|
||||||
|
.CodeRay .string .delimiter{color:#D14;}
|
||||||
|
.CodeRay .shell{color:#dd1144;}
|
||||||
|
.CodeRay .shell .delimiter{color:#dd1144;}
|
||||||
|
.CodeRay .symbol{color:#990073;}
|
||||||
|
.CodeRay .symbol .content{color:#aa6600;}
|
||||||
|
.CodeRay .symbol .delimiter{color:#663300;}
|
||||||
|
.CodeRay .tag{color:#007700;}
|
||||||
|
.CodeRay .tag-special{color:#D70;font-weight:bold;}
|
||||||
|
.CodeRay .type{color:#339;font-weight:bold;}
|
||||||
|
.CodeRay .variable{color:#003366;}
|
||||||
|
.CodeRay .insert{background:#afa;}
|
||||||
|
.CodeRay .delete{background:#faa;}
|
||||||
|
.CodeRay .change{color:#aaf;background:#007;}
|
||||||
|
.CodeRay .head{color:#f8f;background:#550055;}
|
||||||
|
.CodeRay .insert .insert{color:#080;font-weight:bold;}
|
||||||
|
.CodeRay .delete .delete{color:#800;font-weight:bold;}
|
||||||
|
.CodeRay .change .change{color:#66f;}
|
||||||
|
.CodeRay .head .head{color:#f4f;}
|
||||||
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
|
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
|
||||||
.clearfix:after{clear:both;}
|
.clearfix:after{clear:both;}
|
||||||
.hidden{display:none;visibility:hidden;}
|
.hidden{display:none;visibility:hidden;}
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
.CodeRay {
|
.CodeRay {
|
||||||
background-color: #efefef;
|
|
||||||
font-family: @code-font;
|
font-family: @code-font;
|
||||||
font-size: 80%;
|
.font(12);
|
||||||
color: #333332;
|
color: #333332;
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
|
border: 1px solid darken(@body-color, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.CodeRay pre {
|
.CodeRay code {
|
||||||
margin: 0px;
|
margin: 0;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -21,7 +21,6 @@ table.CodeRay td {
|
||||||
}
|
}
|
||||||
|
|
||||||
.CodeRay .line-numbers, .CodeRay .no {
|
.CodeRay .line-numbers, .CodeRay .no {
|
||||||
background-color: #ECECEC;
|
|
||||||
color: #AAA;
|
color: #AAA;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,6 +14,8 @@
|
||||||
@import "typography.less";
|
@import "typography.less";
|
||||||
// Pygments Syntax highlighting ===============================
|
// Pygments Syntax highlighting ===============================
|
||||||
@import "pygments.less";
|
@import "pygments.less";
|
||||||
|
// Coderay Syntax highlighting ===============================
|
||||||
|
@import "coderay.less";
|
||||||
// MIXINS =====================================================
|
// MIXINS =====================================================
|
||||||
@import "mixins.less";
|
@import "mixins.less";
|
||||||
@import "grid.less";
|
@import "grid.less";
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.highlight {
|
.highlight {
|
||||||
overflow-x: auto;
|
margin-bottom: 1.5em;
|
||||||
.font(12);
|
.font(12);
|
||||||
border: 1px solid darken(@body-color, 5);
|
border: 1px solid darken(@body-color, 5);
|
||||||
pre {
|
pre {
|
||||||
|
|
|
@ -120,4 +120,5 @@ li {
|
||||||
}
|
}
|
||||||
pre {
|
pre {
|
||||||
.font(12);
|
.font(12);
|
||||||
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue