From e2aa4c39e3988a664146038672225322709714bd Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Fri, 16 Aug 2013 08:11:42 -0400 Subject: [PATCH 1/2] Add syntax highlighting demo post --- _posts/2013-08-16-code-highlighting-post.md | 107 ++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 _posts/2013-08-16-code-highlighting-post.md diff --git a/_posts/2013-08-16-code-highlighting-post.md b/_posts/2013-08-16-code-highlighting-post.md new file mode 100644 index 0000000..ce7be4c --- /dev/null +++ b/_posts/2013-08-16-code-highlighting-post.md @@ -0,0 +1,107 @@ +--- +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]: + +### Pygments Code Blocks + +{% highlight css %} +#container { + float: left; + margin: 0 -240px 0 0; + width: 100%; +} +{% endhighlight %} + +{% highlight html %} + +{% 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 + + + + +### Fenced Code Blocks + +~~~ css +#container { + float: left; + margin: 0 -240px 0 0; + width: 100%; +} +~~~ + +~~~ html + +~~~ + +~~~ 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 +~~~ \ No newline at end of file From aebc4bc732b321912eef68b2ca7776681ddfa9a9 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Fri, 16 Aug 2013 08:31:48 -0400 Subject: [PATCH 2/2] Cleanup code syntax highlighting (Pygments, Coderay) --- _posts/2013-08-16-code-highlighting-post.md | 20 ++++- assets/css/main.css | 98 ++++++++++++++++++++- assets/less/coderay.less | 9 +- assets/less/main.less | 2 + assets/less/pygments.less | 2 +- assets/less/typography.less | 1 + 6 files changed, 120 insertions(+), 12 deletions(-) diff --git a/_posts/2013-08-16-code-highlighting-post.md b/_posts/2013-08-16-code-highlighting-post.md index ce7be4c..c24d3bd 100644 --- a/_posts/2013-08-16-code-highlighting-post.md +++ b/_posts/2013-08-16-code-highlighting-post.md @@ -17,6 +17,8 @@ Syntax highlighting is a feature that displays source code, in different colors ### 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; @@ -26,6 +28,7 @@ Syntax highlighting is a feature that displays source code, in different colors {% endhighlight %} {% highlight html %} +{% raw %} +{% endraw %} {% endhighlight %} {% highlight ruby %} @@ -59,14 +63,22 @@ end ### Standard Code Block + {% raw %} + {% 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; @@ -76,14 +88,14 @@ end ~~~ ~~~ html -{% endraw %} ~~~ ~~~ ruby diff --git a/assets/css/main.css b/assets/css/main.css index e946154..aa5b160 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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;} 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;} -pre{font-size:12px;font-size:0.75rem;line-height:2;} -.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;} +pre{font-size:12px;font-size:0.75rem;line-height:2;overflow-x:auto;} +.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 .c{color:#999988;font-style:italic;} .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 .vi{color:#008080;} .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:after{clear:both;} .hidden{display:none;visibility:hidden;} diff --git a/assets/less/coderay.less b/assets/less/coderay.less index db52c9a..605cdc6 100644 --- a/assets/less/coderay.less +++ b/assets/less/coderay.less @@ -1,13 +1,13 @@ .CodeRay { - background-color: #efefef; font-family: @code-font; - font-size: 80%; + .font(12); color: #333332; margin-bottom: 1.5em; + border: 1px solid darken(@body-color, 5); } -.CodeRay pre { - margin: 0px; +.CodeRay code { + margin: 0; padding: 1em; } @@ -21,7 +21,6 @@ table.CodeRay td { } .CodeRay .line-numbers, .CodeRay .no { - background-color: #ECECEC; color: #AAA; text-align: right; } diff --git a/assets/less/main.less b/assets/less/main.less index e859a30..5530b1f 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -14,6 +14,8 @@ @import "typography.less"; // Pygments Syntax highlighting =============================== @import "pygments.less"; +// Coderay Syntax highlighting =============================== +@import "coderay.less"; // MIXINS ===================================================== @import "mixins.less"; @import "grid.less"; diff --git a/assets/less/pygments.less b/assets/less/pygments.less index fde1913..43fe043 100644 --- a/assets/less/pygments.less +++ b/assets/less/pygments.less @@ -1,5 +1,5 @@ .highlight { - overflow-x: auto; + margin-bottom: 1.5em; .font(12); border: 1px solid darken(@body-color, 5); pre { diff --git a/assets/less/typography.less b/assets/less/typography.less index ed08994..2c9f828 100644 --- a/assets/less/typography.less +++ b/assets/less/typography.less @@ -120,4 +120,5 @@ li { } pre { .font(12); + overflow-x: auto; }