Improve style of highlighted syntax

This commit is contained in:
Michael Rose 2013-09-07 11:59:02 -04:00
parent 66dd137d68
commit c0e5ec5b85
10 changed files with 950 additions and 229 deletions

View file

@ -95,10 +95,4 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c
Make any link standout more when applying the `.btn` class. Make any link standout more when applying the `.btn` class.
<div markdown="0"><a href="#" class="btn">This is a button</a></div> <div markdown="0"><a href="#" class="btn">This is a button</a></div>
<div markdown="0"><a href="#" class="btn btn-inverse">This is an inverse button</a></div>
<div markdown="0"><a href="#" class="btn btn-small">This is small button</a></div>
<div markdown="0"><a href="#" class="btn btn-inverse btn-small">Small inverse button</a></div>

View file

@ -0,0 +1,114 @@
---
layout: post
title: Syntax Highlighting Post
description: "Demo post displaying the various ways of highlighting code in Markdown."
modified: 2013-08-20
tags: [sample post, code, highlighting]
---
[Syntax highlighting](http://en.wikipedia.org/wiki/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.
### 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 %}
Line numbering enabled:
{% 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 %}
{% 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'] || '&#8211;'
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'] || '&#8211;'
self.data['title'] = "#{tag_title_prefix}#{tag}"
self.data['description'] = "An archive of posts tagged #{tag}."
end
end
end
~~~

View file

@ -140,7 +140,7 @@ samp {
* Improve readability of pre-formatted text in all browsers. * Improve readability of pre-formatted text in all browsers.
*/ */
pre { pre {
white-space: pre-wrap; white-space: pre;
} }
/** /**
* Set consistent quote types. * Set consistent quote types.
@ -370,6 +370,10 @@ table {
.pull-right { .pull-right {
float: right; float: right;
} }
.image-pull-right {
float: right;
margin-top: 0;
}
.clearfix { .clearfix {
*zoom: 1; *zoom: 1;
} }
@ -430,6 +434,41 @@ h1 {
margin-bottom: 26px; margin-bottom: 26px;
margin-bottom: 1.625rem; margin-bottom: 1.625rem;
} }
h2 {
font-size: 28px;
font-size: 1.75rem;
line-height: 0.9286;
margin-bottom: 26px;
margin-bottom: 1.625rem;
}
h3 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.0833;
margin-bottom: 26px;
margin-bottom: 1.625rem;
}
h4 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.4444;
margin-bottom: 26px;
margin-bottom: 1.625rem;
}
h5 {
font-size: 16px;
font-size: 1rem;
line-height: 1.625;
margin-bottom: 26px;
margin-bottom: 1.625rem;
}
h6 {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.8571;
margin-bottom: 26px;
margin-bottom: 1.625rem;
}
a { a {
text-decoration: none; text-decoration: none;
color: #343434; color: #343434;
@ -448,11 +487,6 @@ a:hover,
a:active { a:active {
outline: 0; outline: 0;
} }
.link-arrow {
font-weight: 100;
text-decoration: underline;
font-style: normal;
}
figcaption { figcaption {
padding-top: 10px; padding-top: 10px;
font-size: 14px; font-size: 14px;
@ -1425,6 +1459,58 @@ body {
.browser-upgrade a:hover { .browser-upgrade a:hover {
border-bottom: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
} }
#goog-fixurl ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
#goog-fixurl ul li {
list-style-type: none;
}
#goog-wm-qt {
width: auto;
margin-right: 10px;
margin-bottom: 20px;
padding: 8px 20px;
display: inline-block;
font-size: 14px;
font-size: 0.875rem;
background-color: #ffffff;
color: #111111;
border-width: 2px !important;
border-style: solid !important;
border-color: #919191;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#goog-wm-sb {
display: inline-block;
margin-bottom: 20px;
padding: 8px 20px;
font-size: 14px;
font-size: 0.875rem;
background-color: #111111;
color: #ffffff;
border: 2px solid #111111 !important;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#goog-wm-sb:visited {
color: #ffffff;
}
#goog-wm-sb:hover {
background-color: #ffffff;
color: #111111;
}
#goog-wm-sb:active {
-webkit-transform: translate(0, 2px);
-moz-transform: translate(0, 2px);
-ms-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
transform: translate(0, 2px);
}
/* 480px wide ============================================== */ /* 480px wide ============================================== */
.article-author-top, .article-author-top,
.article-author-bottom { .article-author-bottom {

View file

@ -140,7 +140,7 @@ samp {
* Improve readability of pre-formatted text in all browsers. * Improve readability of pre-formatted text in all browsers.
*/ */
pre { pre {
white-space: pre-wrap; white-space: pre;
} }
/** /**
* Set consistent quote types. * Set consistent quote types.
@ -370,6 +370,10 @@ table {
.pull-right { .pull-right {
float: right; float: right;
} }
.image-pull-right {
float: right;
margin-top: 0;
}
.clearfix { .clearfix {
*zoom: 1; *zoom: 1;
} }
@ -430,6 +434,41 @@ h1 {
margin-bottom: 26px; margin-bottom: 26px;
margin-bottom: 1.625rem; margin-bottom: 1.625rem;
} }
h2 {
font-size: 28px;
font-size: 1.75rem;
line-height: 0.9286;
margin-bottom: 26px;
margin-bottom: 1.625rem;
}
h3 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.0833;
margin-bottom: 26px;
margin-bottom: 1.625rem;
}
h4 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.4444;
margin-bottom: 26px;
margin-bottom: 1.625rem;
}
h5 {
font-size: 16px;
font-size: 1rem;
line-height: 1.625;
margin-bottom: 26px;
margin-bottom: 1.625rem;
}
h6 {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.8571;
margin-bottom: 26px;
margin-bottom: 1.625rem;
}
a { a {
text-decoration: none; text-decoration: none;
color: #343434; color: #343434;
@ -448,11 +487,6 @@ a:hover,
a:active { a:active {
outline: 0; outline: 0;
} }
.link-arrow {
font-weight: 100;
text-decoration: underline;
font-style: normal;
}
figcaption { figcaption {
padding-top: 10px; padding-top: 10px;
font-size: 14px; font-size: 14px;
@ -547,282 +581,680 @@ pre {
.highlight { .highlight {
background-color: #efefef; background-color: #efefef;
font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
font-size: 80%; font-size: 12px;
font-size: 0.75rem;
line-height: 2.1667;
color: #333332; color: #333332;
margin-bottom: 1.5em; margin-bottom: 1.5em;
/* Comment */
/* Error */
/* Keyword */
/* Operator */
/* Comment.Multiline */
/* Comment.Preproc */
/* Comment.Single */
/* Comment.Special */
/* Generic.Deleted */
/* Generic.Emph */
/* Generic.Error */
/* Generic.Heading */
/* Generic.Inserted */
/* Generic.Output */
/* Generic.Prompt */
/* Generic.Strong */
/* Generic.Subheading */
/* Generic.Traceback */
/* Keyword.Constant */
/* Keyword.Declaration */
/* Keyword.Namespace */
/* Keyword.Pseudo */
/* Keyword.Reserved */
/* Keyword.Type */
/* Literal.Number */
/* Literal.String */
/* Name.Attribute */
/* Name.Builtin */
/* Name.Class */
/* Name.Constant */
/* Name.Decorator */
/* Name.Entity */
/* Name.Exception */
/* Name.Function */
/* Name.Label */
/* Name.Namespace */
/* Name.Tag */
/* Name.Variable */
/* Operator.Word */
/* Text.Whitespace */
/* Literal.Number.Float */
/* Literal.Number.Hex */
/* Literal.Number.Integer */
/* Literal.Number.Oct */
/* Literal.String.Backtick */
/* Literal.String.Char */
/* Literal.String.Doc */
/* Literal.String.Double */
/* Literal.String.Escape */
/* Literal.String.Heredoc */
/* Literal.String.Interpol */
/* Literal.String.Other */
/* Literal.String.Regex */
/* Literal.String.Single */
/* Literal.String.Symbol */
/* Name.Builtin.Pseudo */
/* Name.Variable.Class */
/* Name.Variable.Global */
/* Name.Variable.Instance */
/* Literal.Number.Integer.Long */
} }
.highlight pre { .highlight pre {
margin: 0px; position: relative;
margin: 0;
padding: 1em; padding: 1em;
} }
.hll { .highlight .lineno {
padding-right: 24px;
color: #b3b3b1;
}
.highlight .hll {
background-color: #ffffcc; background-color: #ffffcc;
} }
.c { .highlight .c {
color: #999988; color: #999988;
font-style: italic; font-style: italic;
} }
/* Comment */ .highlight .err {
.err {
color: #a61717; color: #a61717;
background-color: #e3d2d2; background-color: #e3d2d2;
} }
/* Error */ .highlight .k {
.k {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
} }
/* Keyword */ .highlight .o {
.o {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
} }
/* Operator */ .highlight .cm {
.cm {
color: #999988; color: #999988;
font-style: italic; font-style: italic;
} }
/* Comment.Multiline */ .highlight .cp {
.cp {
color: #999999; color: #999999;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
/* Comment.Preproc */ .highlight .c1 {
.c1 {
color: #999988; color: #999988;
font-style: italic; font-style: italic;
} }
/* Comment.Single */ .highlight .cs {
.cs {
color: #999999; color: #999999;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
/* Comment.Special */ .highlight .gd {
.gd {
color: #000000; color: #000000;
background-color: #ffdddd; background-color: #ffdddd;
} }
/* Generic.Deleted */ .highlight .ge {
.ge {
color: #000000; color: #000000;
font-style: italic; font-style: italic;
} }
/* Generic.Emph */ .highlight .gr {
.gr {
color: #aa0000; color: #aa0000;
} }
/* Generic.Error */ .highlight .gh {
.gh {
color: #999999; color: #999999;
} }
/* Generic.Heading */ .highlight .gi {
.gi {
color: #000000; color: #000000;
background-color: #ddffdd; background-color: #ddffdd;
} }
/* Generic.Inserted */ .highlight .go {
.go {
color: #888888; color: #888888;
} }
/* Generic.Output */ .highlight .gp {
.gp {
color: #555555; color: #555555;
} }
/* Generic.Prompt */ .highlight .gs {
.gs {
font-weight: bold; font-weight: bold;
} }
/* Generic.Strong */ .highlight .gu {
.gu {
color: #aaaaaa; color: #aaaaaa;
} }
/* Generic.Subheading */ .highlight .gt {
.gt {
color: #aa0000; color: #aa0000;
} }
/* Generic.Traceback */ .highlight .kc {
.kc {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
} }
/* Keyword.Constant */ .highlight .kd {
.kd {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
} }
/* Keyword.Declaration */ .highlight .kn {
.kn {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
} }
/* Keyword.Namespace */ .highlight .kp {
.kp {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
} }
/* Keyword.Pseudo */ .highlight .kr {
.kr {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
} }
/* Keyword.Reserved */ .highlight .kt {
.kt {
color: #445588; color: #445588;
font-weight: bold; font-weight: bold;
} }
/* Keyword.Type */ .highlight .m {
.m {
color: #009999; color: #009999;
} }
/* Literal.Number */ .highlight .s {
.s {
color: #d01040; color: #d01040;
} }
/* Literal.String */ .highlight .na {
.na {
color: #008080; color: #008080;
} }
/* Name.Attribute */ .highlight .nb {
.nb {
color: #0086b3; color: #0086b3;
} }
/* Name.Builtin */ .highlight .nc {
.nc {
color: #445588; color: #445588;
font-weight: bold; font-weight: bold;
} }
/* Name.Class */ .highlight .no {
.no {
color: #008080; color: #008080;
} }
/* Name.Constant */ .highlight .nd {
.nd {
color: #3c5d5d; color: #3c5d5d;
font-weight: bold; font-weight: bold;
} }
/* Name.Decorator */ .highlight .ni {
.ni {
color: #800080; color: #800080;
} }
/* Name.Entity */ .highlight .ne {
.ne {
color: #990000; color: #990000;
font-weight: bold; font-weight: bold;
} }
/* Name.Exception */ .highlight .nf {
.nf {
color: #990000; color: #990000;
font-weight: bold; font-weight: bold;
} }
/* Name.Function */ .highlight .nl {
.nl {
color: #990000; color: #990000;
font-weight: bold; font-weight: bold;
} }
/* Name.Label */ .highlight .nn {
.nn {
color: #555555; color: #555555;
} }
/* Name.Namespace */ .highlight .nt {
.nt {
color: #000080; color: #000080;
} }
/* Name.Tag */ .highlight .nv {
.nv {
color: #008080; color: #008080;
} }
/* Name.Variable */ .highlight .ow {
.ow {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
} }
/* Operator.Word */ .highlight .w {
.w {
color: #bbbbbb; color: #bbbbbb;
} }
/* Text.Whitespace */ .highlight .mf {
.mf {
color: #009999; color: #009999;
} }
/* Literal.Number.Float */ .highlight .mh {
.mh {
color: #009999; color: #009999;
} }
/* Literal.Number.Hex */ .highlight .mi {
.mi {
color: #009999; color: #009999;
} }
/* Literal.Number.Integer */ .highlight .mo {
.mo {
color: #009999; color: #009999;
} }
/* Literal.Number.Oct */ .highlight .sb {
.sb {
color: #d01040; color: #d01040;
} }
/* Literal.String.Backtick */ .highlight .sc {
.sc {
color: #d01040; color: #d01040;
} }
/* Literal.String.Char */ .highlight .sd {
.sd {
color: #d01040; color: #d01040;
} }
/* Literal.String.Doc */ .highlight .s2 {
.s2 {
color: #d01040; color: #d01040;
} }
/* Literal.String.Double */ .highlight .se {
.se {
color: #d01040; color: #d01040;
} }
/* Literal.String.Escape */ .highlight .sh {
.sh {
color: #d01040; color: #d01040;
} }
/* Literal.String.Heredoc */ .highlight .si {
.si {
color: #d01040; color: #d01040;
} }
/* Literal.String.Interpol */ .highlight .sx {
.sx {
color: #d01040; color: #d01040;
} }
/* Literal.String.Other */ .highlight .sr {
.sr {
color: #009926; color: #009926;
} }
/* Literal.String.Regex */ .highlight .s1 {
.s1 {
color: #d01040; color: #d01040;
} }
/* Literal.String.Single */ .highlight .ss {
.ss {
color: #990073; color: #990073;
} }
/* Literal.String.Symbol */ .highlight .bp {
.bp {
color: #999999; color: #999999;
} }
/* Name.Builtin.Pseudo */ .highlight .vc {
.vc {
color: #008080; color: #008080;
} }
/* Name.Variable.Class */ .highlight .vg {
.vg {
color: #008080; color: #008080;
} }
/* Name.Variable.Global */ .highlight .vi {
.vi {
color: #008080; color: #008080;
} }
/* Name.Variable.Instance */ .highlight .il {
.il {
color: #009999; color: #009999;
} }
/* Literal.Number.Integer.Long */.clearfix { .CodeRay {
background-color: #efefef;
font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
font-size: 12px;
font-size: 0.75rem;
line-height: 2.1667;
color: #333332;
margin-bottom: 1.5em;
}
.CodeRay pre {
margin: 0px;
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 {
background-color: #ECECEC;
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; *zoom: 1;
} }
.clearfix:before, .clearfix:before,
@ -1782,6 +2214,58 @@ body {
.browser-upgrade a:hover { .browser-upgrade a:hover {
border-bottom: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
} }
#goog-fixurl ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
#goog-fixurl ul li {
list-style-type: none;
}
#goog-wm-qt {
width: auto;
margin-right: 10px;
margin-bottom: 20px;
padding: 8px 20px;
display: inline-block;
font-size: 14px;
font-size: 0.875rem;
background-color: #ffffff;
color: #111111;
border-width: 2px !important;
border-style: solid !important;
border-color: #919191;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#goog-wm-sb {
display: inline-block;
margin-bottom: 20px;
padding: 8px 20px;
font-size: 14px;
font-size: 0.875rem;
background-color: #111111;
color: #ffffff;
border: 2px solid #111111 !important;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#goog-wm-sb:visited {
color: #ffffff;
}
#goog-wm-sb:hover {
background-color: #ffffff;
color: #111111;
}
#goog-wm-sb:active {
-webkit-transform: translate(0, 2px);
-moz-transform: translate(0, 2px);
-ms-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
transform: translate(0, 2px);
}
/* jQuery Magnific-Popup =================================== */ /* jQuery Magnific-Popup =================================== */
/* Magnific Popup CSS */ /* Magnific Popup CSS */
.mfp-bg { .mfp-bg {

View file

@ -1,14 +1,13 @@
.CodeRay { .CodeRay {
background-color: #efefef; 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;
} pre {
margin: 0px;
.CodeRay pre { padding: 1em;
margin: 0px; }
padding: 1em;
} }
div.CodeRay { } div.CodeRay { }

View file

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

View file

@ -171,7 +171,7 @@ samp {
*/ */
pre { pre {
white-space: pre-wrap; white-space: pre;
} }
/** /**

View file

@ -317,6 +317,9 @@ body {
} }
} }
} }
// Browser Upgrade
// --------------------------------------------------
.browser-upgrade { .browser-upgrade {
background: #000; background: #000;
text-align: center; text-align: center;
@ -332,4 +335,34 @@ body {
border-bottom: 1px solid @white; border-bottom: 1px solid @white;
} }
} }
}
// Google Search
// --------------------------------------------------
#goog-fixurl {
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
li {
list-style-type: none;
}
}
}
#goog-wm-qt {
width: auto;
margin-right: 10px;
margin-bottom: 20px;
padding: 8px 20px;
display: inline-block;
.font-rem(14);
background-color: @white;
color: @black;
border-width: 2px !important;
border-style: solid !important;
border-color: lighten(@black,50);
.rounded(3px);
}
#goog-wm-sb {
.btn();
} }

View file

@ -1,74 +1,74 @@
.highlight { .highlight {
background-color: #efefef; 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;
} pre {
position: relative;
.highlight pre { margin: 0;
margin: 0px; padding: 1em;
padding: 1em; }
} .lineno { padding-right: 24px; color: lighten(#333332,50);}
.hll { background-color: #ffffcc }
.hll { background-color: #ffffcc } .c { color: #999988; font-style: italic } /* Comment */
.c { color: #999988; font-style: italic } /* Comment */ .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */ .k { color: #000000; font-weight: bold } /* Keyword */
.k { color: #000000; font-weight: bold } /* Keyword */ .o { color: #000000; font-weight: bold } /* Operator */
.o { color: #000000; font-weight: bold } /* Operator */ .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.cm { color: #999988; font-style: italic } /* Comment.Multiline */ .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ .c1 { color: #999988; font-style: italic } /* Comment.Single */
.c1 { color: #999988; font-style: italic } /* Comment.Single */ .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ .ge { color: #000000; font-style: italic } /* Generic.Emph */
.ge { color: #000000; font-style: italic } /* Generic.Emph */ .gr { color: #aa0000 } /* Generic.Error */
.gr { color: #aa0000 } /* Generic.Error */ .gh { color: #999999 } /* Generic.Heading */
.gh { color: #999999 } /* Generic.Heading */ .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ .go { color: #888888 } /* Generic.Output */
.go { color: #888888 } /* Generic.Output */ .gp { color: #555555 } /* Generic.Prompt */
.gp { color: #555555 } /* Generic.Prompt */ .gs { font-weight: bold } /* Generic.Strong */
.gs { font-weight: bold } /* Generic.Strong */ .gu { color: #aaaaaa } /* Generic.Subheading */
.gu { color: #aaaaaa } /* Generic.Subheading */ .gt { color: #aa0000 } /* Generic.Traceback */
.gt { color: #aa0000 } /* Generic.Traceback */ .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */ .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.kt { color: #445588; font-weight: bold } /* Keyword.Type */ .m { color: #009999 } /* Literal.Number */
.m { color: #009999 } /* Literal.Number */ .s { color: #d01040 } /* Literal.String */
.s { color: #d01040 } /* Literal.String */ .na { color: #008080 } /* Name.Attribute */
.na { color: #008080 } /* Name.Attribute */ .nb { color: #0086B3 } /* Name.Builtin */
.nb { color: #0086B3 } /* Name.Builtin */ .nc { color: #445588; font-weight: bold } /* Name.Class */
.nc { color: #445588; font-weight: bold } /* Name.Class */ .no { color: #008080 } /* Name.Constant */
.no { color: #008080 } /* Name.Constant */ .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ .ni { color: #800080 } /* Name.Entity */
.ni { color: #800080 } /* Name.Entity */ .ne { color: #990000; font-weight: bold } /* Name.Exception */
.ne { color: #990000; font-weight: bold } /* Name.Exception */ .nf { color: #990000; font-weight: bold } /* Name.Function */
.nf { color: #990000; font-weight: bold } /* Name.Function */ .nl { color: #990000; font-weight: bold } /* Name.Label */
.nl { color: #990000; font-weight: bold } /* Name.Label */ .nn { color: #555555 } /* Name.Namespace */
.nn { color: #555555 } /* Name.Namespace */ .nt { color: #000080 } /* Name.Tag */
.nt { color: #000080 } /* Name.Tag */ .nv { color: #008080 } /* Name.Variable */
.nv { color: #008080 } /* Name.Variable */ .ow { color: #000000; font-weight: bold } /* Operator.Word */
.ow { color: #000000; font-weight: bold } /* Operator.Word */ .w { color: #bbbbbb } /* Text.Whitespace */
.w { color: #bbbbbb } /* Text.Whitespace */ .mf { color: #009999 } /* Literal.Number.Float */
.mf { color: #009999 } /* Literal.Number.Float */ .mh { color: #009999 } /* Literal.Number.Hex */
.mh { color: #009999 } /* Literal.Number.Hex */ .mi { color: #009999 } /* Literal.Number.Integer */
.mi { color: #009999 } /* Literal.Number.Integer */ .mo { color: #009999 } /* Literal.Number.Oct */
.mo { color: #009999 } /* Literal.Number.Oct */ .sb { color: #d01040 } /* Literal.String.Backtick */
.sb { color: #d01040 } /* Literal.String.Backtick */ .sc { color: #d01040 } /* Literal.String.Char */
.sc { color: #d01040 } /* Literal.String.Char */ .sd { color: #d01040 } /* Literal.String.Doc */
.sd { color: #d01040 } /* Literal.String.Doc */ .s2 { color: #d01040 } /* Literal.String.Double */
.s2 { color: #d01040 } /* Literal.String.Double */ .se { color: #d01040 } /* Literal.String.Escape */
.se { color: #d01040 } /* Literal.String.Escape */ .sh { color: #d01040 } /* Literal.String.Heredoc */
.sh { color: #d01040 } /* Literal.String.Heredoc */ .si { color: #d01040 } /* Literal.String.Interpol */
.si { color: #d01040 } /* Literal.String.Interpol */ .sx { color: #d01040 } /* Literal.String.Other */
.sx { color: #d01040 } /* Literal.String.Other */ .sr { color: #009926 } /* Literal.String.Regex */
.sr { color: #009926 } /* Literal.String.Regex */ .s1 { color: #d01040 } /* Literal.String.Single */
.s1 { color: #d01040 } /* Literal.String.Single */ .ss { color: #990073 } /* Literal.String.Symbol */
.ss { color: #990073 } /* Literal.String.Symbol */ .bp { color: #999999 } /* Name.Builtin.Pseudo */
.bp { color: #999999 } /* Name.Builtin.Pseudo */ .vc { color: #008080 } /* Name.Variable.Class */
.vc { color: #008080 } /* Name.Variable.Class */ .vg { color: #008080 } /* Name.Variable.Global */
.vg { color: #008080 } /* Name.Variable.Global */ .vi { color: #008080 } /* Name.Variable.Instance */
.vi { color: #008080 } /* Name.Variable.Instance */ .il { color: #009999 } /* Literal.Number.Integer.Long */
.il { color: #009999 } /* Literal.Number.Integer.Long */ }

View file

@ -11,7 +11,22 @@ h1, h2, h3, h4, h5, h6 {
font-family: @heading-font; font-family: @heading-font;
} }
h1 { h1 {
.font-size(32); .font-size(32)
}
h2 {
.font-size(28)
}
h3 {
.font-size(24)
}
h4 {
.font-size(18)
}
h5 {
.font-size(16)
}
h6 {
.font-size(14);
} }
// Links // Links
@ -35,12 +50,6 @@ a {
} }
} }
.link-arrow {
font-weight: 100;
text-decoration: underline;
font-style: normal;
}
// Figures // Figures
// -------------------------------------------------- // --------------------------------------------------
figcaption { figcaption {