From 4902f102a9a9c0700b9a1d2dba9777a351326cad Mon Sep 17 00:00:00 2001 From: Yurizal Susanto Date: Mon, 30 Apr 2018 12:51:43 +0700 Subject: Change default syntax highlighting Make Chroma the default syntax highlighting --- exampleSite/config.toml | 4 ++++ layouts/partials/meta.html | 1 + static/css/syntax.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++ static/css/ui.min.css | 2 +- 4 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 static/css/syntax.css diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 45dc351..d8162e0 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -15,6 +15,10 @@ disqusShortname = "" # Edit this if you want to translate your blog defaultContentLanguage = "en" +# Code Highlighting (Chroma) +pygmentsCodeFences = true +pygmentsUseClasses = true + [taxonomies] tag = "tags" diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html index 3fa7c7f..22fb181 100644 --- a/layouts/partials/meta.html +++ b/layouts/partials/meta.html @@ -12,6 +12,7 @@ {{ if .Site.Params.DebugCSS }} + {{ else }} {{ end }} diff --git a/static/css/syntax.css b/static/css/syntax.css new file mode 100644 index 0000000..40b9020 --- /dev/null +++ b/static/css/syntax.css @@ -0,0 +1,50 @@ +/* Background */ .chroma { color: #ffffff; } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } +/* Keyword */ .chroma .k { color: #fb660a; font-weight: bold } +/* KeywordConstant */ .chroma .kc { color: #fb660a; font-weight: bold } +/* KeywordDeclaration */ .chroma .kd { color: #fb660a; font-weight: bold } +/* KeywordNamespace */ .chroma .kn { color: #fb660a; font-weight: bold } +/* KeywordPseudo */ .chroma .kp { color: #fb660a } +/* KeywordReserved */ .chroma .kr { color: #fb660a; font-weight: bold } +/* KeywordType */ .chroma .kt { color: #cdcaa9; font-weight: bold } +/* NameAttribute */ .chroma .na { color: #ff0086; font-weight: bold } +/* NameConstant */ .chroma .no { color: #0086d2 } +/* NameFunction */ .chroma .nf { color: #ff0086; font-weight: bold } +/* NameTag */ .chroma .nt { color: #fb660a; font-weight: bold } +/* NameVariable */ .chroma .nv { color: #fb660a } +/* LiteralString */ .chroma .s { color: #0086d2 } +/* LiteralStringAffix */ .chroma .sa { color: #0086d2 } +/* LiteralStringBacktick */ .chroma .sb { color: #0086d2 } +/* LiteralStringChar */ .chroma .sc { color: #0086d2 } +/* LiteralStringDelimiter */ .chroma .dl { color: #0086d2 } +/* LiteralStringDoc */ .chroma .sd { color: #0086d2 } +/* LiteralStringDouble */ .chroma .s2 { color: #0086d2 } +/* LiteralStringEscape */ .chroma .se { color: #0086d2 } +/* LiteralStringHeredoc */ .chroma .sh { color: #0086d2 } +/* LiteralStringInterpol */ .chroma .si { color: #0086d2 } +/* LiteralStringOther */ .chroma .sx { color: #0086d2 } +/* LiteralStringRegex */ .chroma .sr { color: #0086d2 } +/* LiteralStringSingle */ .chroma .s1 { color: #0086d2 } +/* LiteralStringSymbol */ .chroma .ss { color: #0086d2 } +/* LiteralNumber */ .chroma .m { color: #0086f7; font-weight: bold } +/* LiteralNumberBin */ .chroma .mb { color: #0086f7; font-weight: bold } +/* LiteralNumberFloat */ .chroma .mf { color: #0086f7; font-weight: bold } +/* LiteralNumberHex */ .chroma .mh { color: #0086f7; font-weight: bold } +/* LiteralNumberInteger */ .chroma .mi { color: #0086f7; font-weight: bold } +/* LiteralNumberIntegerLong */ .chroma .il { color: #0086f7; font-weight: bold } +/* LiteralNumberOct */ .chroma .mo { color: #0086f7; font-weight: bold } +/* Comment */ .chroma .c { color: #008800; background-color: #0f140f; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #008800; background-color: #0f140f; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #008800; background-color: #0f140f; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #008800; background-color: #0f140f; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #008800; background-color: #0f140f; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #ff0007; background-color: #0f140f; font-weight: bold; font-style: italic } +/* CommentPreprocFile */ .chroma .cpf { color: #ff0007; background-color: #0f140f; font-weight: bold; font-style: italic } +/* GenericHeading */ .chroma .gh { font-weight: bold } +/* GenericOutput */ .chroma .go { color: #444444; background-color: #222222 } +/* GenericSubheading */ .chroma .gu { font-weight: bold } +/* TextWhitespace */ .chroma .w { color: #888888 } diff --git a/static/css/ui.min.css b/static/css/ui.min.css index 1b93dbb..38ac96a 100644 --- a/static/css/ui.min.css +++ b/static/css/ui.min.css @@ -1 +1 @@ -html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}.container{position:relative;width:100%;max-width:70rem;margin:0 auto;padding:0 2rem;box-sizing:border-box}*,*:after,*:before{box-sizing:inherit}html{font-size:62.5%}body{font-size:1.6em;line-height:1.7;font-weight:400;font-family:'Lato',sans-serif;color:#444}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1rem;font-weight:300;color:#222;font-family:'Raleway',sans-serif}h1{font-size:3.2rem;line-height:1.25;letter-spacing:-.1rem}h2{font-size:2.8rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:2.4rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.0rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.6rem;line-height:1.6;letter-spacing:0}@media(min-width:55rem){h1{font-size:3.6rem}h2{font-size:3.0rem}h3{font-size:2.8rem}h4{font-size:2.4rem}h5{font-size:2.0rem}h6{font-size:1.7rem}}p{margin-top:0}#brand{text-align:left}#brand h1{margin-bottom:-.2rem;font-weight:bold}#brand h5{color:#898989;margin-bottom:-.2rem}#related h3{text-align:left}a{text-decoration:none}a:hover{text-decoration:underline}ul{list-style:square inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ul ul,ul ol,ol ol,ol ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:.5rem;margin-left:.5rem}ul.no-bullet{margin-left:0;margin-bottom:1.5rem}@media(min-width:40rem){ul.no-bullet{list-style:none;margin-left:0}}.no-bullet li{margin-left:0;font-size:1.8rem}.no-bullet span{display:none;font-size:1.7rem;color:#666;font-family:monospace}@media(min-width:40rem){.no-bullet span{margin-right:1rem;display:inline}}.terms li>span{color:#666;font-family:monospace}dd{margin-left:2rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#f1f1f1;border:1px solid #e1e1e1;border-radius:4px;font-family:'Fira Mono',monospace}pre>code{display:block;padding:1rem 1.5rem;white-space:pre;background:#2b303b;color:#c0c5ce;font-family:'Fira Mono',monospace}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #e1e1e1}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}blockquote{box-sizing:border-box;margin:1.75em 0 1.75em 0;padding:0 1em 0 1em;border-left:.4em solid}@media(min-width:55rem){blockquote{margin:1.75em -2em 1.75em -2em;padding:0 1.5em 0 1.5em;border-right:.4em solid}}blockquote p:last-of-type cite{display:block;text-align:right;margin-right:1rem}blockquote p:last-of-type cite:before{content:"― "}blockquote cite a{font-style:italic;text-decoration:none}.bar a{color:#777}.bar ul{list-style:none;margin:0;padding:0}.bar li{display:inline;font-size:1.8rem;margin-right:1rem;margin-left:0}@media(min-width:40rem){.bar li{font-size:2.2rem}}.post-nav{margin-bottom:2rem}.next-post{display:block;text-align:right}.prev-post{display:block;text-align:left}.pagination{font-size:2rem}pre,blockquote,dl,figure,table,p,ul,ol{margin-bottom:2.5rem}#brand{margin-top:1rem;margin-bottom:1.2rem}.u-header{margin-bottom:.5rem}@media(min-width:55rem){.u-header{padding-top:1rem}}@media(min-width:75rem){.u-header{padding-top:3rem}}.u-footer{margin-top:3rem;margin-bottom:2rem}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #e1e1e1}img{width:100%}[class^="icon"]{width:1em;height:1em;position:relative}.icon-text{top:.13em}.icon-social{width:3rem;height:3rem}@media print{.no-print{display:none}pre>code{white-space:pre-wrap}img{display:block;width:80%;margin:auto}} +html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}.container{position:relative;width:100%;max-width:70rem;margin:0 auto;padding:0 2rem;box-sizing:border-box}*,*:after,*:before{box-sizing:inherit}html{font-size:62.5%}body{font-size:1.6em;line-height:1.7;font-weight:400;font-family:'Lato', sans-serif;color:#444}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1rem;font-weight:300;color:#222;font-family:'Raleway', sans-serif}h1{font-size:3.2rem;line-height:1.25;letter-spacing:-.1rem}h2{font-size:2.8rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:2.4rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.0rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.6rem;line-height:1.6;letter-spacing:0}@media (min-width: 55rem){h1{font-size:3.6rem}h2{font-size:3.0rem}h3{font-size:2.8rem}h4{font-size:2.4rem}h5{font-size:2.0rem}h6{font-size:1.7rem}}p{margin-top:0}#brand{text-align:left}#brand h1{margin-bottom:-.2rem;font-weight:bold}#brand h5{color:#898989;margin-bottom:-.2rem}#related h3{text-align:left}a{text-decoration:none}a:hover{text-decoration:underline}ul{list-style:square inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:0.5rem;margin-left:0.5rem}ul.no-bullet{margin-left:0;margin-bottom:1.5rem}@media (min-width: 40rem){ul.no-bullet{list-style:none;margin-left:0}}.no-bullet li{margin-left:0;font-size:1.8rem}.no-bullet span{display:none;font-size:1.7rem;color:#666;font-family:monospace}@media (min-width: 40rem){.no-bullet span{margin-right:1rem;display:inline}}.terms li > span{color:#666;font-family:monospace}dd{margin-left:2rem}code{padding:0.2rem 0.5rem;margin:0 0.2rem;font-size:90%;white-space:nowrap;background:#f1f1f1;border:1px solid #e1e1e1;border-radius:4px;font-family:'Fira Mono', monospace}pre > code{display:block;padding:1rem 1.5rem;white-space:pre;background:#2b303b;color:#c0c5ce;font-family:'Fira Mono', monospace}td,th{padding:12px 15px;text-align:left;border-bottom:1px solid #e1e1e1}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}blockquote{box-sizing:border-box;margin:1.75em 0;padding:0 1em;border-left:0.4em solid}@media (min-width: 55rem){blockquote{margin:1.75em -2em;padding:0 1.5em;border-right:0.4em solid}}blockquote p:last-of-type cite{display:block;text-align:right;margin-right:1rem}blockquote p:last-of-type cite:before{content:"― "}blockquote cite a{font-style:italic;text-decoration:none}.bar a{color:#777}.bar ul{list-style:none;margin:0;padding:0}.bar li{display:inline;font-size:1.8rem;margin-right:1rem;margin-left:0}@media (min-width: 40rem){.bar li{font-size:2.2rem}}.post-nav{margin-bottom:2rem}.next-post{display:block;text-align:right}.prev-post{display:block;text-align:left}.pagination{font-size:2rem}blockquote,dl,figure,ol,p,pre,table,ul{margin-bottom:2.5rem}#brand{margin-top:1rem;margin-bottom:1.2rem}.u-header{margin-bottom:0.5rem}@media (min-width: 55rem){.u-header{padding-top:1rem}}@media (min-width: 75rem){.u-header{padding-top:3rem}}.u-footer{margin-top:3rem;margin-bottom:2rem}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #e1e1e1}img{width:100%}[class^="icon"]{width:1em;height:1em;position:relative}.icon-text{top:0.13em}.icon-social{width:3rem;height:3rem}@media print{.no-print{display:none}pre > code{white-space:pre-wrap}img{display:block;width:80%;margin:auto}}.chroma{color:#ffffff}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffffcc}.chroma .lnt{margin-right:0.4em;padding:0 0.4em}.chroma .ln{margin-right:0.4em;padding:0 0.4em}.chroma .k{color:#fb660a;font-weight:bold}.chroma .kc{color:#fb660a;font-weight:bold}.chroma .kd{color:#fb660a;font-weight:bold}.chroma .kn{color:#fb660a;font-weight:bold}.chroma .kp{color:#fb660a}.chroma .kr{color:#fb660a;font-weight:bold}.chroma .kt{color:#cdcaa9;font-weight:bold}.chroma .na{color:#ff0086;font-weight:bold}.chroma .no{color:#0086d2}.chroma .nf{color:#ff0086;font-weight:bold}.chroma .nt{color:#fb660a;font-weight:bold}.chroma .nv{color:#fb660a}.chroma .s{color:#0086d2}.chroma .sa{color:#0086d2}.chroma .sb{color:#0086d2}.chroma .sc{color:#0086d2}.chroma .dl{color:#0086d2}.chroma .sd{color:#0086d2}.chroma .s2{color:#0086d2}.chroma .se{color:#0086d2}.chroma .sh{color:#0086d2}.chroma .si{color:#0086d2}.chroma .sx{color:#0086d2}.chroma .sr{color:#0086d2}.chroma .s1{color:#0086d2}.chroma .ss{color:#0086d2}.chroma .m{color:#0086f7;font-weight:bold}.chroma .mb{color:#0086f7;font-weight:bold}.chroma .mf{color:#0086f7;font-weight:bold}.chroma .mh{color:#0086f7;font-weight:bold}.chroma .mi{color:#0086f7;font-weight:bold}.chroma .il{color:#0086f7;font-weight:bold}.chroma .mo{color:#0086f7;font-weight:bold}.chroma .c{color:#008800;background-color:#0f140f;font-style:italic}.chroma .ch{color:#008800;background-color:#0f140f;font-style:italic}.chroma .cm{color:#008800;background-color:#0f140f;font-style:italic}.chroma .c1{color:#008800;background-color:#0f140f;font-style:italic}.chroma .cs{color:#008800;background-color:#0f140f;font-style:italic}.chroma .cp{color:#ff0007;background-color:#0f140f;font-weight:bold;font-style:italic}.chroma .cpf{color:#ff0007;background-color:#0f140f;font-weight:bold;font-style:italic}.chroma .gh{font-weight:bold}.chroma .go{color:#444444;background-color:#222222}.chroma .gu{font-weight:bold}.chroma .w{color:#888888} -- cgit v1.2.3