From d1cd52c7bed098a620e8a70f3b03ee50b7d3740a Mon Sep 17 00:00:00 2001 From: Barry Clark Date: Tue, 18 Feb 2014 20:26:49 -0500 Subject: [PATCH] Syntax highlighting. --- _config.yml | 7 +- _layouts/default.html | 6 +- _posts/2014-2-2-Markdown-Cheatsheet.md | 29 ++-- scss/_highlights.scss | 147 +++++++++++-------- style.css | 193 +++++++++++++++---------- 5 files changed, 221 insertions(+), 161 deletions(-) diff --git a/_config.yml b/_config.yml index 20ef2fb..6c25016 100644 --- a/_config.yml +++ b/_config.yml @@ -23,11 +23,12 @@ google_analytics: # Links used for your social icons links: - github: https://github.com/YOUR-USERNAME - twitter: https://twitter.com/YOUR-USERNAME - #linkedin: https://linkedin.com/in/YOUR-USERNAME + github: your-username + twitter: your-username markdown: rdiscount +pygments: true +permalink: /:title # Exclude these files from your production _site exclude: diff --git a/_layouts/default.html b/_layouts/default.html index 425f5f7..4ffa33e 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -37,10 +37,8 @@ diff --git a/_posts/2014-2-2-Markdown-Cheatsheet.md b/_posts/2014-2-2-Markdown-Cheatsheet.md index 59c70ef..cf23b79 100644 --- a/_posts/2014-2-2-Markdown-Cheatsheet.md +++ b/_posts/2014-2-2-Markdown-Cheatsheet.md @@ -22,7 +22,7 @@ An image, located within /images - alternative syntax 1 + alternative syntax 2 - an indented list item - + 1. An 2. ordered 3. list @@ -36,20 +36,21 @@ Inline markup styles: > Blockquote >> Nested Blockquote -Code: +Syntax highlighting can be used by wrapping your code in a liquid tag like so: + +{{ "{% highlight javascript " }}%} +/* Some pointless Javascript */ +var rawr = ["r", "a", "w", "r"]; +{{ "{% endhighlight " }}%} + +creates... + +{% highlight javascript %} - // Code is just text indented a bit - which(is_easy) to_remember(); - -~~~ - -// Markdown extra adds un-indented code blocks too - -if (this_is_more_code == true && !indented) { - // tild wrapped code blocks, also not indented -} - -~~~ +/* Some pointless Javascript */ +var rawr = ["r", "a", "w", "r"]; + +{% endhighlight %} Use two trailing spaces on the right diff --git a/scss/_highlights.scss b/scss/_highlights.scss index 1e651cf..64ae71b 100644 --- a/scss/_highlights.scss +++ b/scss/_highlights.scss @@ -1,60 +1,87 @@ -.highlight { background: #ffffff; } -.highlight .c { color: #999988; font-style: italic } /* Comment */ -.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.highlight .k { font-weight: bold } /* Keyword */ -.highlight .o { font-weight: bold } /* Operator */ -.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ -.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ -.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #aa0000 } /* Generic.Error */ -.highlight .gh { color: #999999 } /* Generic.Heading */ -.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ -.highlight .go { color: #888888 } /* Generic.Output */ -.highlight .gp { color: #555555 } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ -.highlight .gt { color: #aa0000 } /* Generic.Traceback */ -.highlight .kc { font-weight: bold } /* Keyword.Constant */ -.highlight .kd { font-weight: bold } /* Keyword.Declaration */ -.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #009999 } /* Literal.Number */ -.highlight .s { color: #d14 } /* Literal.String */ -.highlight .na { color: #008080 } /* Name.Attribute */ -.highlight .nb { color: #0086B3 } /* Name.Builtin */ -.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ -.highlight .no { color: #008080 } /* Name.Constant */ -.highlight .ni { color: #800080 } /* Name.Entity */ -.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ -.highlight .nn { color: #555555 } /* Name.Namespace */ -.highlight .nt { color: #000080 } /* Name.Tag */ -.highlight .nv { color: #008080 } /* Name.Variable */ -.highlight .ow { font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #009999 } /* Literal.Number.Float */ -.highlight .mh { color: #009999 } /* Literal.Number.Hex */ -.highlight .mi { color: #009999 } /* Literal.Number.Integer */ -.highlight .mo { color: #009999 } /* Literal.Number.Oct */ -.highlight .sb { color: #d14 } /* Literal.String.Backtick */ -.highlight .sc { color: #d14 } /* Literal.String.Char */ -.highlight .sd { color: #d14 } /* Literal.String.Doc */ -.highlight .s2 { color: #d14 } /* Literal.String.Double */ -.highlight .se { color: #d14 } /* Literal.String.Escape */ -.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ -.highlight .si { color: #d14 } /* Literal.String.Interpol */ -.highlight .sx { color: #d14 } /* Literal.String.Other */ -.highlight .sr { color: #009926 } /* Literal.String.Regex */ -.highlight .s1 { color: #d14 } /* Literal.String.Single */ -.highlight .ss { color: #990073 } /* Literal.String.Symbol */ -.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #008080 } /* Name.Variable.Class */ -.highlight .vg { color: #008080 } /* Name.Variable.Global */ -.highlight .vi { color: #008080 } /* Name.Variable.Instance */ -.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ \ No newline at end of file +.highlight { + background-color: $darkerGray; + padding: 5px 10px; + margin: 20px 0; +} + +.highlight pre { + // overflow: scroll; // Prefer no word wrap? Uncomment this line and comment out the 2 lines below. + word-break: break-all; + word-wrap: break-word; +} + +code { + font-family: 'Courier', monospace; + font-size: 14px; +} + +// Solarized Light Pygments +// Thanks https://gist.github.com/edwardhotchkiss/2005058 +.highlight .c, .highlight .c1 { color: #586E75 } /* Comment */ +.highlight .err { color: #93A1A1 } /* Error */ +.highlight .g { color: #93A1A1 } /* Generic */ +.highlight .k { color: #859900 } /* Keyword */ +.highlight .l { color: #93A1A1 } /* Literal */ +.highlight .n { color: #93A1A1 } /* Name */ +.highlight .o { color: #859900 } /* Operator */ +.highlight .x { color: #CB4B16 } /* Other */ +.highlight .p { color: #93A1A1 } /* Punctuation */ +.highlight .cm { color: #586E75 } /* Comment.Multiline */ +.highlight .cp { color: #859900 } /* Comment.Preproc */ +.highlight .c1 { color: #586E75 } /* Comment.Single */ +.highlight .cs { color: #859900 } /* Comment.Special */ +.highlight .gd { color: #2AA198 } /* Generic.Deleted */ +.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #DC322F } /* Generic.Error */ +.highlight .gh { color: #CB4B16 } /* Generic.Heading */ +.highlight .gi { color: #859900 } /* Generic.Inserted */ +.highlight .go { color: #93A1A1 } /* Generic.Output */ +.highlight .gp { color: #93A1A1 } /* Generic.Prompt */ +.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #CB4B16 } /* Generic.Subheading */ +.highlight .gt { color: #93A1A1 } /* Generic.Traceback */ +.highlight .kc { color: #CB4B16 } /* Keyword.Constant */ +.highlight .kd { color: #268BD2 } /* Keyword.Declaration */ +.highlight .kn { color: #859900 } /* Keyword.Namespace */ +.highlight .kp { color: #859900 } /* Keyword.Pseudo */ +.highlight .kr { color: #268BD2 } /* Keyword.Reserved */ +.highlight .kt { color: #DC322F } /* Keyword.Type */ +.highlight .ld { color: #93A1A1 } /* Literal.Date */ +.highlight .m { color: #2AA198 } /* Literal.Number */ +.highlight .s { color: #2AA198 } /* Literal.String */ +.highlight .na { color: #93A1A1 } /* Name.Attribute */ +.highlight .nb { color: #B58900 } /* Name.Builtin */ +.highlight .nc { color: #268BD2 } /* Name.Class */ +.highlight .no { color: #CB4B16 } /* Name.Constant */ +.highlight .nd { color: #268BD2 } /* Name.Decorator */ +.highlight .ni { color: #CB4B16 } /* Name.Entity */ +.highlight .ne { color: #CB4B16 } /* Name.Exception */ +.highlight .nf { color: #268BD2 } /* Name.Function */ +.highlight .nl { color: #93A1A1 } /* Name.Label */ +.highlight .nn { color: #93A1A1 } /* Name.Namespace */ +.highlight .nx { color: #555 } /* Name.Other */ +.highlight .py { color: #93A1A1 } /* Name.Property */ +.highlight .nt { color: #268BD2 } /* Name.Tag */ +.highlight .nv { color: #268BD2 } /* Name.Variable */ +.highlight .ow { color: #859900 } /* Operator.Word */ +.highlight .w { color: #93A1A1 } /* Text.Whitespace */ +.highlight .mf { color: #2AA198 } /* Literal.Number.Float */ +.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */ +.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */ +.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */ +.highlight .sb { color: #586E75 } /* Literal.String.Backtick */ +.highlight .sc { color: #2AA198 } /* Literal.String.Char */ +.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */ +.highlight .s2 { color: #2AA198 } /* Literal.String.Double */ +.highlight .se { color: #CB4B16 } /* Literal.String.Escape */ +.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */ +.highlight .si { color: #2AA198 } /* Literal.String.Interpol */ +.highlight .sx { color: #2AA198 } /* Literal.String.Other */ +.highlight .sr { color: #DC322F } /* Literal.String.Regex */ +.highlight .s1 { color: #2AA198 } /* Literal.String.Single */ +.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */ +.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #268BD2 } /* Name.Variable.Class */ +.highlight .vg { color: #268BD2 } /* Name.Variable.Global */ +.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */ +.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/style.css b/style.css index 435cb04..2026360 100644 --- a/style.css +++ b/style.css @@ -28,257 +28,290 @@ table { border-spacing: 0; } .highlight { - background: white; } + background-color: #222222; + padding: 5px 10px; + margin: 20px 0; } -.highlight .c { - color: #999988; - font-style: italic; } +.highlight pre { + word-break: break-all; + word-wrap: break-word; } + +code { + font-family: 'Courier', monospace; + font-size: 14px; } + +.highlight .c, .highlight .c1 { + color: #586e75; } /* Comment */ .highlight .err { - color: #a61717; - background-color: #e3d2d2; } + color: #93a1a1; } /* Error */ +.highlight .g { + color: #93a1a1; } + +/* Generic */ .highlight .k { - font-weight: bold; } + color: #859900; } /* Keyword */ +.highlight .l { + color: #93a1a1; } + +/* Literal */ +.highlight .n { + color: #93a1a1; } + +/* Name */ .highlight .o { - font-weight: bold; } + color: #859900; } /* Operator */ +.highlight .x { + color: #cb4b16; } + +/* Other */ +.highlight .p { + color: #93a1a1; } + +/* Punctuation */ .highlight .cm { - color: #999988; - font-style: italic; } + color: #586e75; } /* Comment.Multiline */ .highlight .cp { - color: #999999; - font-weight: bold; } + color: #859900; } /* Comment.Preproc */ .highlight .c1 { - color: #999988; - font-style: italic; } + color: #586e75; } /* Comment.Single */ .highlight .cs { - color: #999999; - font-weight: bold; - font-style: italic; } + color: #859900; } /* Comment.Special */ .highlight .gd { - color: black; - background-color: #ffdddd; } + color: #2aa198; } /* Generic.Deleted */ -.highlight .gd .x { - color: black; - background-color: #ffaaaa; } - -/* Generic.Deleted.Specific */ .highlight .ge { + color: #93a1a1; font-style: italic; } /* Generic.Emph */ .highlight .gr { - color: #aa0000; } + color: #dc322f; } /* Generic.Error */ .highlight .gh { - color: #999999; } + color: #cb4b16; } /* Generic.Heading */ .highlight .gi { - color: black; - background-color: #ddffdd; } + color: #859900; } /* Generic.Inserted */ -.highlight .gi .x { - color: black; - background-color: #aaffaa; } - -/* Generic.Inserted.Specific */ .highlight .go { - color: #888888; } + color: #93a1a1; } /* Generic.Output */ .highlight .gp { - color: #555555; } + color: #93a1a1; } /* Generic.Prompt */ .highlight .gs { + color: #93a1a1; font-weight: bold; } /* Generic.Strong */ .highlight .gu { - color: #aaaaaa; } + color: #cb4b16; } /* Generic.Subheading */ .highlight .gt { - color: #aa0000; } + color: #93a1a1; } /* Generic.Traceback */ .highlight .kc { - font-weight: bold; } + color: #cb4b16; } /* Keyword.Constant */ .highlight .kd { - font-weight: bold; } + color: #268bd2; } /* Keyword.Declaration */ +.highlight .kn { + color: #859900; } + +/* Keyword.Namespace */ .highlight .kp { - font-weight: bold; } + color: #859900; } /* Keyword.Pseudo */ .highlight .kr { - font-weight: bold; } + color: #268bd2; } /* Keyword.Reserved */ .highlight .kt { - color: #445588; - font-weight: bold; } + color: #dc322f; } /* Keyword.Type */ +.highlight .ld { + color: #93a1a1; } + +/* Literal.Date */ .highlight .m { - color: #009999; } + color: #2aa198; } /* Literal.Number */ .highlight .s { - color: #dd1144; } + color: #2aa198; } /* Literal.String */ .highlight .na { - color: teal; } + color: #93a1a1; } /* Name.Attribute */ .highlight .nb { - color: #0086b3; } + color: #b58900; } /* Name.Builtin */ .highlight .nc { - color: #445588; - font-weight: bold; } + color: #268bd2; } /* Name.Class */ .highlight .no { - color: teal; } + color: #cb4b16; } /* Name.Constant */ +.highlight .nd { + color: #268bd2; } + +/* Name.Decorator */ .highlight .ni { - color: purple; } + color: #cb4b16; } /* Name.Entity */ .highlight .ne { - color: #990000; - font-weight: bold; } + color: #cb4b16; } /* Name.Exception */ .highlight .nf { - color: #990000; - font-weight: bold; } + color: #268bd2; } /* Name.Function */ +.highlight .nl { + color: #93a1a1; } + +/* Name.Label */ .highlight .nn { - color: #555555; } + color: #93a1a1; } /* Name.Namespace */ +.highlight .nx { + color: #555555; } + +/* Name.Other */ +.highlight .py { + color: #93a1a1; } + +/* Name.Property */ .highlight .nt { - color: navy; } + color: #268bd2; } /* Name.Tag */ .highlight .nv { - color: teal; } + color: #268bd2; } /* Name.Variable */ .highlight .ow { - font-weight: bold; } + color: #859900; } /* Operator.Word */ .highlight .w { - color: #bbbbbb; } + color: #93a1a1; } /* Text.Whitespace */ .highlight .mf { - color: #009999; } + color: #2aa198; } /* Literal.Number.Float */ .highlight .mh { - color: #009999; } + color: #2aa198; } /* Literal.Number.Hex */ .highlight .mi { - color: #009999; } + color: #2aa198; } /* Literal.Number.Integer */ .highlight .mo { - color: #009999; } + color: #2aa198; } /* Literal.Number.Oct */ .highlight .sb { - color: #dd1144; } + color: #586e75; } /* Literal.String.Backtick */ .highlight .sc { - color: #dd1144; } + color: #2aa198; } /* Literal.String.Char */ .highlight .sd { - color: #dd1144; } + color: #93a1a1; } /* Literal.String.Doc */ .highlight .s2 { - color: #dd1144; } + color: #2aa198; } /* Literal.String.Double */ .highlight .se { - color: #dd1144; } + color: #cb4b16; } /* Literal.String.Escape */ .highlight .sh { - color: #dd1144; } + color: #93a1a1; } /* Literal.String.Heredoc */ .highlight .si { - color: #dd1144; } + color: #2aa198; } /* Literal.String.Interpol */ .highlight .sx { - color: #dd1144; } + color: #2aa198; } /* Literal.String.Other */ .highlight .sr { - color: #009926; } + color: #dc322f; } /* Literal.String.Regex */ .highlight .s1 { - color: #dd1144; } + color: #2aa198; } /* Literal.String.Single */ .highlight .ss { - color: #990073; } + color: #2aa198; } /* Literal.String.Symbol */ .highlight .bp { - color: #999999; } + color: #268bd2; } /* Name.Builtin.Pseudo */ .highlight .vc { - color: teal; } + color: #268bd2; } /* Name.Variable.Class */ .highlight .vg { - color: teal; } + color: #268bd2; } /* Name.Variable.Global */ .highlight .vi { - color: teal; } + color: #268bd2; } /* Name.Variable.Instance */ .highlight .il { - color: #009999; } + color: #2aa198; } /* Literal.Number.Integer.Long */ html {