From 35d9de9e6925801bf901474f3eca3040b58aff21 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 26 Jul 2015 21:41:59 +0200 Subject: [PATCH] nicer syntax highlighting --- Gemfile | 2 +- _src/_assets/styl/code.styl | 14 ++--- _src/_assets/styl/syntax.styl | 87 ++++++++------------------------ _src/_assets/styl/variables.styl | 4 +- 4 files changed, 33 insertions(+), 74 deletions(-) diff --git a/Gemfile b/Gemfile index 29a7ea09..0ff76396 100644 --- a/Gemfile +++ b/Gemfile @@ -13,5 +13,5 @@ group :development do gem 'rouge' gem 'mini_magick' gem 'fileutils' - gem 'rb-gsl' + gem 'gsl' end diff --git a/_src/_assets/styl/code.styl b/_src/_assets/styl/code.styl index aed910e6..4c35ec97 100644 --- a/_src/_assets/styl/code.styl +++ b/_src/_assets/styl/code.styl @@ -19,10 +19,11 @@ kbd padding: 2px 4px code - color: $code-color - background-color: $code-bg + color: darken($code-color, 40%) + background-color: rgba($code-bg, 10%) border-radius: $border-radius-base white-space: nowrap + word-wrap: normal kbd color: $kbd-color @@ -32,11 +33,9 @@ kbd pre display: block - padding: (($line-height-computed - 1) / 2) + padding: 8px 12px margin: 0 0 $line-height-computed line-height: $line-height-base - word-break: break-all - word-wrap: break-word color: $code-color background-color: $code-bg border-radius: $border-radius-base @@ -46,12 +45,15 @@ pre -webkit-overflow-scrolling: touch max-height: 300px + @media $breakpoint2 + max-height: 500px + // Account for some code outputs that place code tags in pre tags code padding: 0 font-size: inherit color: inherit - white-space: pre-wrap + white-space: pre background-color: transparent border-radius: 0 diff --git a/_src/_assets/styl/syntax.styl b/_src/_assets/styl/syntax.styl index 3f1f3881..30bf6e27 100644 --- a/_src/_assets/styl/syntax.styl +++ b/_src/_assets/styl/syntax.styl @@ -1,66 +1,23 @@ -// -// Colorful -// https://github.com/richleland/pygments-css -// -.highlight .hll { background-color: #ffffcc } -.highlight .c { color: #808080 } /* Comment */ -.highlight .err { color: #F00000; background-color: #F0A0A0 } /* Error */ -.highlight .k { color: #008000; font-weight: bold } /* Keyword */ -.highlight .o { color: #303030 } /* Operator */ -.highlight .cm { color: #808080 } /* Comment.Multiline */ -.highlight .cp { color: #507090 } /* Comment.Preproc */ -.highlight .c1 { color: #808080 } /* Comment.Single */ -.highlight .cs { color: #cc0000; font-weight: bold } /* Comment.Special */ -.highlight .gd { color: #A00000 } /* Generic.Deleted */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #FF0000 } /* Generic.Error */ -.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ -.highlight .gi { color: #00A000 } /* Generic.Inserted */ -.highlight .go { color: #808080 } /* Generic.Output */ -.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ -.highlight .gt { color: #0040D0 } /* Generic.Traceback */ -.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */ -.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */ -.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */ -.highlight .kp { color: #003080; font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #303090; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #6000E0; font-weight: bold } /* Literal.Number */ -.highlight .s { background-color: #fff0f0 } /* Literal.String */ -.highlight .na { color: #0000C0 } /* Name.Attribute */ -.highlight .nb { color: #007020 } /* Name.Builtin */ -.highlight .nc { color: #B00060; font-weight: bold } /* Name.Class */ -.highlight .no { color: #003060; font-weight: bold } /* Name.Constant */ -.highlight .nd { color: #505050; font-weight: bold } /* Name.Decorator */ -.highlight .ni { color: #800000; font-weight: bold } /* Name.Entity */ -.highlight .ne { color: #F00000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #0060B0; font-weight: bold } /* Name.Function */ -.highlight .nl { color: #907000; font-weight: bold } /* Name.Label */ -.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */ -.highlight .nt { color: #007000 } /* Name.Tag */ -.highlight .nv { color: #906030 } /* Name.Variable */ -.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #6000E0; font-weight: bold } /* Literal.Number.Float */ -.highlight .mh { color: #005080; font-weight: bold } /* Literal.Number.Hex */ -.highlight .mi { color: #0000D0; font-weight: bold } /* Literal.Number.Integer */ -.highlight .mo { color: #4000E0; font-weight: bold } /* Literal.Number.Oct */ -.highlight .sb { background-color: #fff0f0 } /* Literal.String.Backtick */ -.highlight .sc { color: #0040D0 } /* Literal.String.Char */ -.highlight .sd { color: #D04020 } /* Literal.String.Doc */ -.highlight .s2 { background-color: #fff0f0 } /* Literal.String.Double */ -.highlight .se { color: #606060; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */ -.highlight .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */ -.highlight .si { background-color: #e0e0e0 } /* Literal.String.Interpol */ -.highlight .sx { color: #D02000; background-color: #fff0f0 } /* Literal.String.Other */ -.highlight .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */ -.highlight .s1 { background-color: #fff0f0 } /* Literal.String.Single */ -.highlight .ss { color: #A06000 } /* Literal.String.Symbol */ -.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #306090 } /* Name.Variable.Class */ -.highlight .vg { color: #d07000; font-weight: bold } /* Name.Variable.Global */ -.highlight .vi { color: #3030B0 } /* Name.Variable.Instance */ -.highlight .il { color: #0000D0; font-weight: bold } /* Literal.Number.Integer.Long */ \ No newline at end of file +.highlight code, .highlight pre{color:$code-color;background-color:$code-bg} + +.highlight .hll { background-color: #ffc; } +.highlight .gd { color: #2e3436; background-color: #0e1416; } +.highlight .gr { color: #eeeeec; background-color: #c00; } +.highlight .gi { color: #babdb6; background-color: #1f2b2d; } +.highlight .go { color: #2c3032; background-color: #2c3032; } +.highlight .kt { color: #e3e7df; } +.highlight .ni { color: #888a85; } +.highlight .c,.highlight .cm,.highlight .c1,.highlight .cs { color: #8D9684; } +.highlight .err,.highlight .g,.highlight .l,.highlight .n,.highlight .x,.highlight .p,.highlight .ge, +.highlight .gp,.highlight .gs,.highlight .gt,.highlight .ld,.highlight .s,.highlight .nc,.highlight .nd, +.highlight .ne,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py,.highlight .ow,.highlight .w,.highlight .sb, +.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr, +.highlight .s1,.highlight .ss,.highlight .bp { color: #C1C2C3; } +.highlight .k,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr, +.highlight .nt { color: #729fcf; } +.highlight .cp,.highlight .gh,.highlight .gu,.highlight .na,.highlight .nf { color: #E9A94B ; } +.highlight .m,.highlight .nb,.highlight .no,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo, +.highlight .il { color: #8ae234; } +.highlight .o { color: #989DAA; } +.highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi { color: #fff; } diff --git a/_src/_assets/styl/variables.styl b/_src/_assets/styl/variables.styl index 4798e9e2..a9dffc0e 100644 --- a/_src/_assets/styl/variables.styl +++ b/_src/_assets/styl/variables.styl @@ -138,8 +138,8 @@ $input-height-small = (floor($font-size-small * $line-height-small) + ($ // Code ///////////////////////////////////// -$code-bg = rgba(255,255,255,.8) -$code-color = $text-color +$code-bg = #343642 +$code-color = #C1C2C3 $kbd-bg = $code-bg $kbd-color = $code-color