N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add Pygments cod highlighting

Browse source
This commit is contained in:
Michael Rose 2013-05-28 09:00:43 -04:00
parent 298a6dff6f
commit ffbb888c22
7 changed files with 316 additions and 292 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_config.yml
View file

@ -20,7 +20,7 @@ bing_verify: D81F4C18A6CB3018F64D7C827D953DFD
timezone: America/New_York timezone: America/New_York
future: true future: true
pygments: false pygments: true
markdown: kramdown markdown: kramdown
# https://github.com/mojombo/jekyll/wiki/Permalinks # https://github.com/mojombo/jekyll/wiki/Permalinks
@ -31,7 +31,7 @@ kramdown:
footnote_nr: 1 footnote_nr: 1
entity_output: as_char entity_output: as_char
toc_levels: 1..6 toc_levels: 1..6
use_coderay: true use_coderay: false
coderay: coderay:
coderay_line_numbers: coderay_line_numbers:

4
_posts/2011-03-10-sample-post.md
View file

@ -79,13 +79,13 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c
## Code Snippets ## Code Snippets
~~~ css {% highlight css %}
#container { #container {
float: left; float: left;
margin: 0 -240px 0 0; margin: 0 -240px 0 0;
width: 100%; width: 100%;
} }
~~~ {% endhighlight %}
## Buttons ## Buttons

8
_posts/2013-05-22-sample-post-images.md
View file

@ -20,13 +20,13 @@ Here are some examples of what a post with images might look like. If you want t
Apply the `half` class like so to display two images side by side that share the same caption. Apply the `half` class like so to display two images side by side that share the same caption.
~~~ html {% highlight html %}
<figure class="half"> <figure class="half">
<img src="/images/image-filename-1.jpg"> <img src="/images/image-filename-1.jpg">
<img src="/images/image-filename-2.jpg"> <img src="/images/image-filename-2.jpg">
<figcaption>Caption describing these two images.</figcaption> <figcaption>Caption describing these two images.</figcaption>
</figure> </figure>
~~~ {% endhighlight %}
And you'll get something that looks like this: And you'll get something that looks like this:
@ -40,14 +40,14 @@ And you'll get something that looks like this:
Apply the `third` class like so to display three images side by side that share the same caption. Apply the `third` class like so to display three images side by side that share the same caption.
~~~ html {% highlight html %}
<figure class="third"> <figure class="third">
<img src="/images/image-filename-1.jpg"> <img src="/images/image-filename-1.jpg">
<img src="/images/image-filename-2.jpg"> <img src="/images/image-filename-2.jpg">
<img src="/images/image-filename-3.jpg"> <img src="/images/image-filename-3.jpg">
<figcaption>Caption describing these three images.</figcaption> <figcaption>Caption describing these three images.</figcaption>
</figure> </figure>
~~~ {% endhighlight %}
And you'll get something that looks like this: And you'll get something that looks like this:

498
assets/css/main.css
View file

@ -879,336 +879,286 @@ blockquote p + p {
.footnotes { .footnotes {
font-size: 90%; font-size: 90%;
} }
/* Codeway Syntax highlighting ============================= */ /* Pygments Syntax highlighting ============================= */
.CodeRay { .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: 80%;
color: #333332; color: #333332;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
.CodeRay pre { .highlight pre {
margin: 0px; margin: 0px;
padding: 1em; padding: 1em;
} }
span.CodeRay { .hll {
white-space: pre; background-color: #ffffcc;
border: 0px;
padding: 2px;
} }
table.CodeRay { .c {
border-collapse: collapse; color: #999988;
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; font-style: italic;
} }
.CodeRay .char { /* Comment */
color: #0044dd; .err {
color: #a61717;
background-color: #e3d2d2;
} }
.CodeRay .char .content { /* Error */
color: #0044dd; .k {
}
.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; color: #000000;
}
.CodeRay .doc {
color: #997700;
}
.CodeRay .doctype {
color: #3344bb;
}
.CodeRay .doc-string {
color: #D42;
font-weight: bold; font-weight: bold;
} }
.CodeRay .escape { /* Keyword */
color: #666; .o {
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; 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; font-weight: bold;
} }
.CodeRay .instance-variable { /* Operator */
.cm {
color: #999988;
font-style: italic;
}
/* Comment.Multiline */
.cp {
color: #999999;
font-weight: bold;
font-style: italic;
}
/* Comment.Preproc */
.c1 {
color: #999988;
font-style: italic;
}
/* Comment.Single */
.cs {
color: #999999;
font-weight: bold;
font-style: italic;
}
/* Comment.Special */
.gd {
color: #000000;
background-color: #ffdddd;
}
/* Generic.Deleted */
.ge {
color: #000000;
font-style: italic;
}
/* Generic.Emph */
.gr {
color: #aa0000;
}
/* Generic.Error */
.gh {
color: #999999;
}
/* Generic.Heading */
.gi {
color: #000000;
background-color: #ddffdd;
}
/* Generic.Inserted */
.go {
color: #888888;
}
/* Generic.Output */
.gp {
color: #555555;
}
/* Generic.Prompt */
.gs {
font-weight: bold;
}
/* Generic.Strong */
.gu {
color: #aaaaaa;
}
/* Generic.Subheading */
.gt {
color: #aa0000;
}
/* Generic.Traceback */
.kc {
color: #000000;
font-weight: bold;
}
/* Keyword.Constant */
.kd {
color: #000000;
font-weight: bold;
}
/* Keyword.Declaration */
.kn {
color: #000000;
font-weight: bold;
}
/* Keyword.Namespace */
.kp {
color: #000000;
font-weight: bold;
}
/* Keyword.Pseudo */
.kr {
color: #000000;
font-weight: bold;
}
/* Keyword.Reserved */
.kt {
color: #445588;
font-weight: bold;
}
/* Keyword.Type */
.m {
color: #009999;
}
/* Literal.Number */
.s {
color: #d01040;
}
/* Literal.String */
.na {
color: #008080; color: #008080;
} }
.CodeRay .label { /* Name.Attribute */
color: #970; .nb {
color: #0086b3;
}
/* Name.Builtin */
.nc {
color: #445588;
font-weight: bold; font-weight: bold;
} }
.CodeRay .local-variable { /* Name.Class */
color: #996633; .no {
color: #008080;
} }
.CodeRay .octal { /* Name.Constant */
color: #40E; .nd {
color: #3c5d5d;
font-weight: bold; font-weight: bold;
} }
.CodeRay .predefined-constant { /* Name.Decorator */
.ni {
color: #800080;
}
/* Name.Entity */
.ne {
color: #990000;
font-weight: bold; font-weight: bold;
} }
.CodeRay .predefined { /* Name.Exception */
color: #369; .nf {
color: #990000;
font-weight: bold; font-weight: bold;
} }
.CodeRay .preprocessor { /* Name.Function */
color: #579; .nl {
} color: #990000;
.CodeRay .pseudo-class {
color: #00C;
font-weight: bold; font-weight: bold;
} }
.CodeRay .predefined-type { /* Name.Label */
color: #074; .nn {
color: #555555;
}
/* Name.Namespace */
.nt {
color: #000080;
}
/* Name.Tag */
.nv {
color: #008080;
}
/* Name.Variable */
.ow {
color: #000000;
font-weight: bold; font-weight: bold;
} }
.CodeRay .reserved, /* Operator.Word */
.keyword { .w {
color: #000; color: #bbbbbb;
font-weight: bold;
} }
.CodeRay .key { /* Text.Whitespace */
color: #808; .mf {
color: #009999;
} }
.CodeRay .key .delimiter { /* Literal.Number.Float */
color: #606; .mh {
color: #009999;
} }
.CodeRay .key .char { /* Literal.Number.Hex */
color: #80f; .mi {
color: #009999;
} }
.CodeRay .value { /* Literal.Number.Integer */
color: #088; .mo {
color: #009999;
} }
.CodeRay .regexp { /* Literal.Number.Oct */
background-color: #fff0ff; .sb {
color: #d01040;
} }
.CodeRay .regexp .content { /* Literal.String.Backtick */
color: #880088; .sc {
color: #d01040;
} }
.CodeRay .regexp .delimiter { /* Literal.String.Char */
color: #440044; .sd {
color: #d01040;
} }
.CodeRay .regexp .modifier { /* Literal.String.Doc */
color: #cc22cc; .s2 {
color: #d01040;
} }
.CodeRay .regexp .function { /* Literal.String.Double */
color: #404; .se {
font-weight: bold; color: #d01040;
} }
.CodeRay .string { /* Literal.String.Escape */
color: #D20; .sh {
color: #d01040;
} }
.CodeRay .string .string .string { /* Literal.String.Heredoc */
background-color: #ffd0d0; .si {
color: #d01040;
} }
.CodeRay .string .content { /* Literal.String.Interpol */
color: #D14; .sx {
color: #d01040;
} }
.CodeRay .string .char { /* Literal.String.Other */
color: #D14; .sr {
color: #009926;
} }
.CodeRay .string .delimiter { /* Literal.String.Regex */
color: #D14; .s1 {
color: #d01040;
} }
.CodeRay .shell { /* Literal.String.Single */
color: #dd1144; .ss {
}
.CodeRay .shell .delimiter {
color: #dd1144;
}
.CodeRay .symbol {
color: #990073; color: #990073;
} }
.CodeRay .symbol .content { /* Literal.String.Symbol */
color: #aa6600; .bp {
color: #999999;
} }
.CodeRay .symbol .delimiter { /* Name.Builtin.Pseudo */
color: #663300; .vc {
color: #008080;
} }
.CodeRay .tag { /* Name.Variable.Class */
color: #007700; .vg {
color: #008080;
} }
.CodeRay .tag-special { /* Name.Variable.Global */
color: #D70; .vi {
font-weight: bold; color: #008080;
} }
.CodeRay .type { /* Name.Variable.Instance */
color: #339; .il {
font-weight: bold; color: #009999;
} }
.CodeRay .variable { /* Literal.Number.Integer.Long *//* Gradients ============================================= */
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;
}
/* Gradients ============================================= */
/* .bordered(COLOR, COLOR, COLOR, COLOR); ================ */ /* .bordered(COLOR, COLOR, COLOR, COLOR); ================ */
/* .rounded(VALUE); ====================================== */ /* .rounded(VALUE); ====================================== */
/* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */ /* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */

4
assets/less/main.less
View file

@ -14,8 +14,8 @@
/* Typeplate.com typographic starter pack ================== */ /* Typeplate.com typographic starter pack ================== */
@import "typeplate.less"; @import "typeplate.less";
@import "typography.less"; @import "typography.less";
/* Codeway Syntax highlighting ============================= */ /* Pygments Syntax highlighting ============================= */
@import "coderay.less"; @import "pygments.less";
// MIXINS ===================================================== // MIXINS =====================================================
@import "mixins.less"; @import "mixins.less";
@import "grid.less"; @import "grid.less";

74
assets/less/pygments.less Normal file
View file

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

16
theme-setup.md
View file

@ -28,7 +28,7 @@ General notes and suggestions for customizing Minimal Mistakes.
<a markdown="0" href="http://github.com/mmistakes/minimal-mistakes" class="btn">Minimal Mistakes on GitHub</a> <a markdown="0" href="http://github.com/mmistakes/minimal-mistakes" class="btn">Minimal Mistakes on GitHub</a>
~~~ text {% highlight text %}
minimal-mistakes/ minimal-mistakes/
├── _includes ├── _includes
| ├── author-bio.html //bio stuff goes here | ├── author-bio.html //bio stuff goes here
@ -54,7 +54,7 @@ minimal-mistakes/
├── about.md //about page ├── about.md //about page
├── articles.md //lists all posts from latest to oldest ├── articles.md //lists all posts from latest to oldest
└── index.md //homepage. lists 5 most recent posts └── index.md //homepage. lists 5 most recent posts
~~~ {% endhighlight %}
## Customization ## Customization
@ -72,11 +72,11 @@ A good rule of thumb is to keep feature images[^2] nice and wide so you don't pu
The two layouts make the assumption that the feature images live in the *images* folder. To add a feature image to a post or page just include the filename in the front matter like so. The two layouts make the assumption that the feature images live in the *images* folder. To add a feature image to a post or page just include the filename in the front matter like so.
~~~ yaml {% highlight yaml %}
image: image:
feature: feature-image-filename.jpg feature: feature-image-filename.jpg
thumb: thumbnail-image.jpg #keep it square 200x200 px is good thumb: thumbnail-image.jpg #keep it square 200x200 px is good
~~~ {% endhighlight %}
#### Thumbnails for OG and Twitter Cards #### Thumbnails for OG and Twitter Cards
@ -89,7 +89,7 @@ Any article or page that you want a *table of contents* to render insert the fol
**PS:** The TOC is hidden on small devices because I haven't gotten around to optimizing it. For now it only shows on tablets and desktop viewports... **PS:** The TOC is hidden on small devices because I haven't gotten around to optimizing it. For now it only shows on tablets and desktop viewports...
{: .notice} {: .notice}
~~~ html {% highlight html %}
<section id="table-of-contents" class="toc"> <section id="table-of-contents" class="toc">
<header> <header>
<h3 class="delta">Contents</h3> <h3 class="delta">Contents</h3>
@ -99,7 +99,7 @@ Any article or page that you want a *table of contents* to render insert the fol
{:toc} {:toc}
</div> </div>
</section><!-- /#table-of-contents --> </section><!-- /#table-of-contents -->
~~~ {% endhighlight %}
#### Videos #### Videos
@ -107,9 +107,9 @@ Video embeds are responsive and scale with the width of the main content block w
Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below: Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below:
~~~ html {% highlight html %}
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe> <iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
~~~ {% endhighlight %}
[^1]: Used to generate absolute urls in *sitemap.xml*, *feed.xml*, and for canonical urls in *head.html*. Don't include a trailing `\` in your base url ie: http://mademistakes.com. When developing locally remove or comment out this line so local css, js, and images are used. [^1]: Used to generate absolute urls in *sitemap.xml*, *feed.xml*, and for canonical urls in *head.html*. Don't include a trailing `\` in your base url ie: http://mademistakes.com. When developing locally remove or comment out this line so local css, js, and images are used.