Improve syntax highlighting styles (#1450)
* Cleanup syntax highlighting styles * Replace hardcoded color values with [base16](http://chriskempson.com/projects/base16/) Sass variables * Harmonize padding between GFM code blocks and `{% highlight %}` code blocks * Improve readability of line numbers * Add longer code block example to test double digit line numbers * Adjust code block colors for specific skins
This commit is contained in:
Michael Rose
GitHub
parent
94d753378a
commit
3f469f268f
10 changed files with 535 additions and 340 deletions
|
|
@ -6,29 +6,27 @@ div.highlighter-rouge,
|
|||
figure.highlight {
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
background: $base00;
|
||||
color: $base05;
|
||||
font-family: $monospace;
|
||||
font-size: $type-size-6;
|
||||
line-height: 1.8;
|
||||
border-radius: $border-radius;
|
||||
background-color: $code-background-color;
|
||||
|
||||
> pre,
|
||||
pre.highlight {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
figure.highlight {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.highlight table {
|
||||
margin-bottom: 0;
|
||||
font-size: 1em;
|
||||
border: 0;
|
||||
|
||||
td {
|
||||
padding: 5px;
|
||||
padding: 0;
|
||||
width: calc(100% - 1em);
|
||||
border: 0;
|
||||
|
||||
|
|
@ -36,7 +34,14 @@ figure.highlight {
|
|||
&.gutter {
|
||||
padding-right: 1em;
|
||||
width: 1em;
|
||||
color: rgba($muted-text-color, 0.5);
|
||||
color: $base04;
|
||||
border-right: 1px solid $base04;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* code */
|
||||
&.code {
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -49,225 +54,263 @@ figure.highlight {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
Solarized Light
|
||||
http://ethanschoonover.com/solarized
|
||||
|
||||
SOLARIZED HEX ROLE
|
||||
--------- -------- ------------------------------------------
|
||||
base01 #586e75 body text / default code / primary content
|
||||
base1 #93a1a1 comments / secondary content
|
||||
base3 #fdf6e3 background
|
||||
orange #cb4b16 constants
|
||||
red #dc322f regex, special keywords
|
||||
blue #22b3eb reserved keywords
|
||||
cyan #2aa198 strings, numbers
|
||||
green #859900 operators, other keywords
|
||||
========================================================================== */
|
||||
|
||||
.highlight .c {
|
||||
color: #93a1a1;
|
||||
} /* Comment */
|
||||
.highlight .err {
|
||||
color: #586e75;
|
||||
} /* Error */
|
||||
.highlight .g {
|
||||
color: #586e75;
|
||||
} /* Generic */
|
||||
.highlight .k {
|
||||
color: #859900;
|
||||
} /* Keyword */
|
||||
.highlight .l {
|
||||
color: #586e75;
|
||||
} /* Literal */
|
||||
.highlight .n {
|
||||
color: #586e75;
|
||||
} /* Name */
|
||||
.highlight .o {
|
||||
color: #859900;
|
||||
} /* Operator */
|
||||
.highlight .x {
|
||||
color: #cb4b16;
|
||||
} /* Other */
|
||||
.highlight .p {
|
||||
color: #586e75;
|
||||
} /* Punctuation */
|
||||
.highlight .cm {
|
||||
color: #93a1a1;
|
||||
} /* Comment.Multiline */
|
||||
.highlight .cp {
|
||||
color: #859900;
|
||||
} /* Comment.Preproc */
|
||||
.highlight .c1 {
|
||||
color: #93a1a1;
|
||||
} /* Comment.Single */
|
||||
.highlight .cs {
|
||||
color: #859900;
|
||||
} /* Comment.Special */
|
||||
.highlight .gd {
|
||||
color: #2aa198;
|
||||
} /* Generic.Deleted */
|
||||
.highlight .ge {
|
||||
color: #586e75;
|
||||
.highlight .hll {
|
||||
background-color: $base06;
|
||||
}
|
||||
.highlight {
|
||||
.c {
|
||||
/* Comment */
|
||||
color: $base04;
|
||||
}
|
||||
.err {
|
||||
/* Error */
|
||||
color: $base08;
|
||||
}
|
||||
.k {
|
||||
/* Keyword */
|
||||
color: $base0e;
|
||||
}
|
||||
.l {
|
||||
/* Literal */
|
||||
color: $base09;
|
||||
}
|
||||
.n {
|
||||
/* Name */
|
||||
color: $base05;
|
||||
}
|
||||
.o {
|
||||
/* Operator */
|
||||
color: $base0c;
|
||||
}
|
||||
.p {
|
||||
/* Punctuation */
|
||||
color: $base05;
|
||||
}
|
||||
.cm {
|
||||
/* Comment.Multiline */
|
||||
color: $base04;
|
||||
}
|
||||
.cp {
|
||||
/* Comment.Preproc */
|
||||
color: $base04;
|
||||
}
|
||||
.c1 {
|
||||
/* Comment.Single */
|
||||
color: $base04;
|
||||
}
|
||||
.cs {
|
||||
/* Comment.Special */
|
||||
color: $base04;
|
||||
}
|
||||
.gd {
|
||||
/* Generic.Deleted */
|
||||
color: $base08;
|
||||
}
|
||||
.ge {
|
||||
/* Generic.Emph */
|
||||
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: #586e75;
|
||||
} /* Generic.Output */
|
||||
.highlight .gp {
|
||||
color: #586e75;
|
||||
} /* Generic.Prompt */
|
||||
.highlight .gs {
|
||||
color: #586e75;
|
||||
}
|
||||
.gh {
|
||||
/* Generic.Heading */
|
||||
color: $base05;
|
||||
font-weight: bold;
|
||||
} /* Generic.Strong */
|
||||
.highlight .gu {
|
||||
color: #cb4b16;
|
||||
} /* Generic.Subheading */
|
||||
.highlight .gt {
|
||||
color: #586e75;
|
||||
} /* Generic.Traceback */
|
||||
.highlight .kc {
|
||||
color: #cb4b16;
|
||||
} /* Keyword.Constant */
|
||||
.highlight .kd {
|
||||
color: #22b3eb;
|
||||
} /* Keyword.Declaration */
|
||||
.highlight .kn {
|
||||
color: #859900;
|
||||
} /* Keyword.Namespace */
|
||||
.highlight .kp {
|
||||
color: #859900;
|
||||
} /* Keyword.Pseudo */
|
||||
.highlight .kr {
|
||||
color: #22b3eb;
|
||||
} /* Keyword.Reserved */
|
||||
.highlight .kt {
|
||||
color: #dc322f;
|
||||
} /* Keyword.Type */
|
||||
.highlight .ld {
|
||||
color: #586e75;
|
||||
} /* Literal.Date */
|
||||
.highlight .m {
|
||||
color: #2aa198;
|
||||
} /* Literal.Number */
|
||||
.highlight .s {
|
||||
color: #2aa198;
|
||||
} /* Literal.String */
|
||||
.highlight .na {
|
||||
color: #586e75;
|
||||
} /* Name.Attribute */
|
||||
.highlight .nb {
|
||||
color: #b58900;
|
||||
} /* Name.Builtin */
|
||||
.highlight .nc {
|
||||
color: #22b3eb;
|
||||
} /* Name.Class */
|
||||
.highlight .no {
|
||||
color: #cb4b16;
|
||||
} /* Name.Constant */
|
||||
.highlight .nd {
|
||||
color: #22b3eb;
|
||||
} /* Name.Decorator */
|
||||
.highlight .ni {
|
||||
color: #cb4b16;
|
||||
} /* Name.Entity */
|
||||
.highlight .ne {
|
||||
color: #cb4b16;
|
||||
} /* Name.Exception */
|
||||
.highlight .nf {
|
||||
color: #22b3eb;
|
||||
} /* Name.Function */
|
||||
.highlight .nl {
|
||||
color: #586e75;
|
||||
} /* Name.Label */
|
||||
.highlight .nn {
|
||||
color: #586e75;
|
||||
} /* Name.Namespace */
|
||||
.highlight .nx {
|
||||
color: #586e75;
|
||||
} /* Name.Other */
|
||||
.highlight .py {
|
||||
color: #586e75;
|
||||
} /* Name.Property */
|
||||
.highlight .nt {
|
||||
color: #22b3eb;
|
||||
} /* Name.Tag */
|
||||
.highlight .nv {
|
||||
color: #22b3eb;
|
||||
} /* Name.Variable */
|
||||
.highlight .ow {
|
||||
color: #859900;
|
||||
} /* Operator.Word */
|
||||
.highlight .w {
|
||||
color: #586e75;
|
||||
} /* 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: #93a1a1;
|
||||
} /* Literal.String.Backtick */
|
||||
.highlight .sc {
|
||||
color: #2aa198;
|
||||
} /* Literal.String.Char */
|
||||
.highlight .sd {
|
||||
color: #586e75;
|
||||
} /* Literal.String.Doc */
|
||||
.highlight .s2 {
|
||||
color: #2aa198;
|
||||
} /* Literal.String.Double */
|
||||
.highlight .se {
|
||||
color: #cb4b16;
|
||||
} /* Literal.String.Escape */
|
||||
.highlight .sh {
|
||||
color: #586e75;
|
||||
} /* 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: #22b3eb;
|
||||
} /* Name.Builtin.Pseudo */
|
||||
.highlight .vc {
|
||||
color: #22b3eb;
|
||||
} /* Name.Variable.Class */
|
||||
.highlight .vg {
|
||||
color: #22b3eb;
|
||||
} /* Name.Variable.Global */
|
||||
.highlight .vi {
|
||||
color: #22b3eb;
|
||||
} /* Name.Variable.Instance */
|
||||
.highlight .il {
|
||||
color: #2aa198;
|
||||
} /* Literal.Number.Integer.Long */
|
||||
}
|
||||
.gi {
|
||||
/* Generic.Inserted */
|
||||
color: $base0b;
|
||||
}
|
||||
.gp {
|
||||
/* Generic.Prompt */
|
||||
color: $base04;
|
||||
font-weight: bold;
|
||||
}
|
||||
.gs {
|
||||
/* Generic.Strong */
|
||||
font-weight: bold;
|
||||
}
|
||||
.gu {
|
||||
/* Generic.Subheading */
|
||||
color: $base0c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.kc {
|
||||
/* Keyword.Constant */
|
||||
color: $base0e;
|
||||
}
|
||||
.kd {
|
||||
/* Keyword.Declaration */
|
||||
color: $base0e;
|
||||
}
|
||||
.kn {
|
||||
/* Keyword.Namespace */
|
||||
color: $base0c;
|
||||
}
|
||||
.kp {
|
||||
/* Keyword.Pseudo */
|
||||
color: $base0e;
|
||||
}
|
||||
.kr {
|
||||
/* Keyword.Reserved */
|
||||
color: $base0e;
|
||||
}
|
||||
.kt {
|
||||
/* Keyword.Type */
|
||||
color: $base0a;
|
||||
}
|
||||
.ld {
|
||||
/* Literal.Date */
|
||||
color: $base0b;
|
||||
}
|
||||
.m {
|
||||
/* Literal.Number */
|
||||
color: $base09;
|
||||
}
|
||||
.s {
|
||||
/* Literal.String */
|
||||
color: $base0b;
|
||||
}
|
||||
.na {
|
||||
/* Name.Attribute */
|
||||
color: $base0d;
|
||||
}
|
||||
.nb {
|
||||
/* Name.Builtin */
|
||||
color: $base05;
|
||||
}
|
||||
.nc {
|
||||
/* Name.Class */
|
||||
color: $base0a;
|
||||
}
|
||||
.no {
|
||||
/* Name.Constant */
|
||||
color: $base08;
|
||||
}
|
||||
.nd {
|
||||
/* Name.Decorator */
|
||||
color: $base0c;
|
||||
}
|
||||
.ni {
|
||||
/* Name.Entity */
|
||||
color: $base05;
|
||||
}
|
||||
.ne {
|
||||
/* Name.Exception */
|
||||
color: $base08;
|
||||
}
|
||||
.nf {
|
||||
/* Name.Function */
|
||||
color: $base0d;
|
||||
}
|
||||
.nl {
|
||||
/* Name.Label */
|
||||
color: $base05;
|
||||
}
|
||||
.nn {
|
||||
/* Name.Namespace */
|
||||
color: $base0a;
|
||||
}
|
||||
.nx {
|
||||
/* Name.Other */
|
||||
color: $base0d;
|
||||
}
|
||||
.py {
|
||||
/* Name.Property */
|
||||
color: $base05;
|
||||
}
|
||||
.nt {
|
||||
/* Name.Tag */
|
||||
color: $base0c;
|
||||
}
|
||||
.nv {
|
||||
/* Name.Variable */
|
||||
color: $base08;
|
||||
}
|
||||
.ow {
|
||||
/* Operator.Word */
|
||||
color: $base0c;
|
||||
}
|
||||
.w {
|
||||
/* Text.Whitespace */
|
||||
color: $base05;
|
||||
}
|
||||
.mf {
|
||||
/* Literal.Number.Float */
|
||||
color: $base09;
|
||||
}
|
||||
.mh {
|
||||
/* Literal.Number.Hex */
|
||||
color: $base09;
|
||||
}
|
||||
.mi {
|
||||
/* Literal.Number.Integer */
|
||||
color: $base09;
|
||||
}
|
||||
.mo {
|
||||
/* Literal.Number.Oct */
|
||||
color: $base09;
|
||||
}
|
||||
.sb {
|
||||
/* Literal.String.Backtick */
|
||||
color: $base0b;
|
||||
}
|
||||
.sc {
|
||||
/* Literal.String.Char */
|
||||
color: $base05;
|
||||
}
|
||||
.sd {
|
||||
/* Literal.String.Doc */
|
||||
color: $base04;
|
||||
}
|
||||
.s2 {
|
||||
/* Literal.String.Double */
|
||||
color: $base0b;
|
||||
}
|
||||
.se {
|
||||
/* Literal.String.Escape */
|
||||
color: $base09;
|
||||
}
|
||||
.sh {
|
||||
/* Literal.String.Heredoc */
|
||||
color: $base0b;
|
||||
}
|
||||
.si {
|
||||
/* Literal.String.Interpol */
|
||||
color: $base09;
|
||||
}
|
||||
.sx {
|
||||
/* Literal.String.Other */
|
||||
color: $base0b;
|
||||
}
|
||||
.sr {
|
||||
/* Literal.String.Regex */
|
||||
color: $base0b;
|
||||
}
|
||||
.s1 {
|
||||
/* Literal.String.Single */
|
||||
color: $base0b;
|
||||
}
|
||||
.ss {
|
||||
/* Literal.String.Symbol */
|
||||
color: $base0b;
|
||||
}
|
||||
.bp {
|
||||
/* Name.Builtin.Pseudo */
|
||||
color: $base05;
|
||||
}
|
||||
.vc {
|
||||
/* Name.Variable.Class */
|
||||
color: $base08;
|
||||
}
|
||||
.vg {
|
||||
/* Name.Variable.Global */
|
||||
color: $base08;
|
||||
}
|
||||
.vi {
|
||||
/* Name.Variable.Instance */
|
||||
color: $base08;
|
||||
}
|
||||
.il {
|
||||
/* Literal.Number.Integer.Long */
|
||||
color: $base09;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,132 +6,148 @@
|
|||
Typography
|
||||
========================================================================== */
|
||||
|
||||
$doc-font-size : 16 !default;
|
||||
$doc-font-size: 16 !default;
|
||||
|
||||
/* paragraph indention */
|
||||
$paragraph-indent : false !default; // true, false (default)
|
||||
$indent-var : 1.3em !default;
|
||||
$paragraph-indent: false !default; // true, false (default)
|
||||
$indent-var: 1.3em !default;
|
||||
|
||||
/* system typefaces */
|
||||
$serif : Georgia, Times, serif !default;
|
||||
$sans-serif : -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
|
||||
$monospace : Monaco, Consolas, "Lucida Console", monospace !default;
|
||||
$serif: Georgia, Times, serif !default;
|
||||
$sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
|
||||
"Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
|
||||
$monospace: Monaco, Consolas, "Lucida Console", monospace !default;
|
||||
|
||||
/* sans serif typefaces */
|
||||
$sans-serif-narrow : $sans-serif !default;
|
||||
$helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif !default;
|
||||
$sans-serif-narrow: $sans-serif !default;
|
||||
$helvetica: Helvetica, "Helvetica Neue", Arial, sans-serif !default;
|
||||
|
||||
/* serif typefaces */
|
||||
$georgia : Georgia, serif !default;
|
||||
$times : Times, serif !default;
|
||||
$bodoni : "Bodoni MT", serif !default;
|
||||
$calisto : "Calisto MT", serif !default;
|
||||
$garamond : Garamond, serif !default;
|
||||
$georgia: Georgia, serif !default;
|
||||
$times: Times, serif !default;
|
||||
$bodoni: "Bodoni MT", serif !default;
|
||||
$calisto: "Calisto MT", serif !default;
|
||||
$garamond: Garamond, serif !default;
|
||||
|
||||
$global-font-family : $sans-serif !default;
|
||||
$header-font-family : $sans-serif !default;
|
||||
$caption-font-family : $serif !default;
|
||||
$global-font-family: $sans-serif !default;
|
||||
$header-font-family: $sans-serif !default;
|
||||
$caption-font-family: $serif !default;
|
||||
|
||||
/* type scale */
|
||||
$type-size-1 : 2.441em !default; // ~39.056px
|
||||
$type-size-2 : 1.953em !default; // ~31.248px
|
||||
$type-size-3 : 1.563em !default; // ~25.008px
|
||||
$type-size-4 : 1.25em !default; // ~20px
|
||||
$type-size-5 : 1em !default; // ~16px
|
||||
$type-size-6 : 0.75em !default; // ~12px
|
||||
$type-size-7 : 0.6875em !default; // ~11px
|
||||
$type-size-8 : 0.625em !default; // ~10px
|
||||
|
||||
$type-size-1: 2.441em !default; // ~39.056px
|
||||
$type-size-2: 1.953em !default; // ~31.248px
|
||||
$type-size-3: 1.563em !default; // ~25.008px
|
||||
$type-size-4: 1.25em !default; // ~20px
|
||||
$type-size-5: 1em !default; // ~16px
|
||||
$type-size-6: 0.75em !default; // ~12px
|
||||
$type-size-7: 0.6875em !default; // ~11px
|
||||
$type-size-8: 0.625em !default; // ~10px
|
||||
|
||||
/*
|
||||
Colors
|
||||
========================================================================== */
|
||||
|
||||
$gray : #7a8288 !default;
|
||||
$dark-gray : mix(#000, $gray, 40%) !default;
|
||||
$darker-gray : mix(#000, $gray, 60%) !default;
|
||||
$light-gray : mix(#fff, $gray, 50%) !default;
|
||||
$lighter-gray : mix(#fff, $gray, 90%) !default;
|
||||
$gray: #7a8288 !default;
|
||||
$dark-gray: mix(#000, $gray, 40%) !default;
|
||||
$darker-gray: mix(#000, $gray, 60%) !default;
|
||||
$light-gray: mix(#fff, $gray, 50%) !default;
|
||||
$lighter-gray: mix(#fff, $gray, 90%) !default;
|
||||
|
||||
$background-color : #fff !default;
|
||||
$code-background-color : #fafafa !default;
|
||||
$code-background-color-dark : $light-gray !default;
|
||||
$text-color : $dark-gray !default;
|
||||
$muted-text-color : mix(#fff, $text-color, 35%) !default;
|
||||
$border-color : $lighter-gray !default;
|
||||
$form-background-color : $lighter-gray !default;
|
||||
$footer-background-color : $lighter-gray !default;
|
||||
$background-color: #fff !default;
|
||||
$code-background-color: #fafafa !default;
|
||||
$code-background-color-dark: $light-gray !default;
|
||||
$text-color: $dark-gray !default;
|
||||
$muted-text-color: mix(#fff, $text-color, 35%) !default;
|
||||
$border-color: $lighter-gray !default;
|
||||
$form-background-color: $lighter-gray !default;
|
||||
$footer-background-color: $lighter-gray !default;
|
||||
|
||||
$primary-color : #7a8288 !default;
|
||||
$success-color : #62c462 !default;
|
||||
$warning-color : #f89406 !default;
|
||||
$danger-color : #ee5f5b !default;
|
||||
$info-color : #52adc8 !default;
|
||||
$primary-color: #7a8288 !default;
|
||||
$success-color: #62c462 !default;
|
||||
$warning-color: #f89406 !default;
|
||||
$danger-color: #ee5f5b !default;
|
||||
$info-color: #52adc8 !default;
|
||||
|
||||
/* YIQ color contrast */
|
||||
$yiq-contrasted-dark-default : $dark-gray !default;
|
||||
$yiq-contrasted-light-default : #fff !default;
|
||||
$yiq-contrasted-threshold : 175 !default;
|
||||
$yiq-debug : false !default;
|
||||
$yiq-contrasted-dark-default: $dark-gray !default;
|
||||
$yiq-contrasted-light-default: #fff !default;
|
||||
$yiq-contrasted-threshold: 175 !default;
|
||||
$yiq-debug: false !default;
|
||||
|
||||
/* brands */
|
||||
$behance-color : #1769FF !default;
|
||||
$bitbucket-color : #205081 !default;
|
||||
$dribbble-color : #ea4c89 !default;
|
||||
$facebook-color : #3b5998 !default;
|
||||
$flickr-color : #ff0084 !default;
|
||||
$foursquare-color : #0072b1 !default;
|
||||
$github-color : #171516 !default;
|
||||
$google-plus-color : #dd4b39 !default;
|
||||
$instagram-color : #517fa4 !default;
|
||||
$lastfm-color : #d51007 !default;
|
||||
$linkedin-color : #007bb6 !default;
|
||||
$pinterest-color : #cb2027 !default;
|
||||
$rss-color : #fa9b39 !default;
|
||||
$soundcloud-color : #ff3300 !default;
|
||||
$stackoverflow-color : #fe7a15 !default;
|
||||
$tumblr-color : #32506d !default;
|
||||
$twitter-color : #55acee !default;
|
||||
$vimeo-color : #1ab7ea !default;
|
||||
$vine-color : #00bf8f !default;
|
||||
$youtube-color : #bb0000 !default;
|
||||
$xing-color : #006567 !default;
|
||||
$behance-color: #1769ff !default;
|
||||
$bitbucket-color: #205081 !default;
|
||||
$dribbble-color: #ea4c89 !default;
|
||||
$facebook-color: #3b5998 !default;
|
||||
$flickr-color: #ff0084 !default;
|
||||
$foursquare-color: #0072b1 !default;
|
||||
$github-color: #171516 !default;
|
||||
$google-plus-color: #dd4b39 !default;
|
||||
$instagram-color: #517fa4 !default;
|
||||
$lastfm-color: #d51007 !default;
|
||||
$linkedin-color: #007bb6 !default;
|
||||
$pinterest-color: #cb2027 !default;
|
||||
$rss-color: #fa9b39 !default;
|
||||
$soundcloud-color: #ff3300 !default;
|
||||
$stackoverflow-color: #fe7a15 !default;
|
||||
$tumblr-color: #32506d !default;
|
||||
$twitter-color: #55acee !default;
|
||||
$vimeo-color: #1ab7ea !default;
|
||||
$vine-color: #00bf8f !default;
|
||||
$youtube-color: #bb0000 !default;
|
||||
$xing-color: #006567 !default;
|
||||
|
||||
/* links */
|
||||
$link-color : $info-color !default;
|
||||
$link-color-hover : mix(#000, $link-color, 25%) !default;
|
||||
$link-color-visited : mix(#fff, $link-color, 25%) !default;
|
||||
$masthead-link-color : $primary-color !default;
|
||||
$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default;
|
||||
$navicon-link-color-hover : mix(#fff, $primary-color, 75%) !default;
|
||||
$link-color: $info-color !default;
|
||||
$link-color-hover: mix(#000, $link-color, 25%) !default;
|
||||
$link-color-visited: mix(#fff, $link-color, 25%) !default;
|
||||
$masthead-link-color: $primary-color !default;
|
||||
$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
|
||||
$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
|
||||
|
||||
/* syntax highlighting (base16) */
|
||||
$base00: #263238 !default;
|
||||
$base01: #2e3c43 !default;
|
||||
$base02: #314549 !default;
|
||||
$base03: #546e7a !default;
|
||||
$base04: #b2ccd6 !default;
|
||||
$base05: #eeffff !default;
|
||||
$base06: #eeffff !default;
|
||||
$base07: #ffffff !default;
|
||||
$base08: #f07178 !default;
|
||||
$base09: #f78c6c !default;
|
||||
$base0a: #ffcb6b !default;
|
||||
$base0b: #c3e88d !default;
|
||||
$base0c: #89ddff !default;
|
||||
$base0d: #82aaff !default;
|
||||
$base0e: #c792ea !default;
|
||||
$base0f: #ff5370 !default;
|
||||
|
||||
/*
|
||||
Breakpoints
|
||||
========================================================================== */
|
||||
|
||||
$small : 600px !default;
|
||||
$medium : 768px !default;
|
||||
$medium-wide : 900px !default;
|
||||
$large : 1024px !default;
|
||||
$x-large : 1280px !default;
|
||||
|
||||
$small: 600px !default;
|
||||
$medium: 768px !default;
|
||||
$medium-wide: 900px !default;
|
||||
$large: 1024px !default;
|
||||
$x-large: 1280px !default;
|
||||
|
||||
/*
|
||||
Grid
|
||||
========================================================================== */
|
||||
|
||||
$right-sidebar-width-narrow : 200px !default;
|
||||
$right-sidebar-width : 300px !default;
|
||||
$right-sidebar-width-wide : 400px !default;
|
||||
|
||||
$right-sidebar-width-narrow: 200px !default;
|
||||
$right-sidebar-width: 300px !default;
|
||||
$right-sidebar-width-wide: 400px !default;
|
||||
|
||||
/*
|
||||
Other
|
||||
========================================================================== */
|
||||
|
||||
$border-radius : 4px !default;
|
||||
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
|
||||
$navicon-width : 1.5rem !default;
|
||||
$navicon-height : 0.25rem !default;
|
||||
$global-transition : all 0.2s ease-in-out !default;
|
||||
$intro-transition : intro 0.3s both !default;
|
||||
$border-radius: 4px !default;
|
||||
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
|
||||
$navicon-width: 1.5rem !default;
|
||||
$navicon-height: 0.25rem !default;
|
||||
$global-transition: all 0.2s ease-in-out !default;
|
||||
$intro-transition: intro 0.3s both !default;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,24 @@ $masthead-link-color: $text-color !default;
|
|||
$masthead-link-color-hover: $text-color !default;
|
||||
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
|
||||
|
||||
/* contrast syntax highlighting (base16) */
|
||||
$base00: #000000 !default;
|
||||
$base01: #242422 !default;
|
||||
$base02: #484844 !default;
|
||||
$base03: #6c6c66 !default;
|
||||
$base04: #918f88 !default;
|
||||
$base05: #b5b3aa !default;
|
||||
$base06: #d9d7cc !default;
|
||||
$base07: #fdfbee !default;
|
||||
$base08: #ff6c60 !default;
|
||||
$base09: #e9c062 !default;
|
||||
$base0a: #ffffb6 !default;
|
||||
$base0b: #a8ff60 !default;
|
||||
$base0c: #c6c5fe !default;
|
||||
$base0d: #96cbfe !default;
|
||||
$base0e: #ff73fd !default;
|
||||
$base0f: #b18a3d !default;
|
||||
|
||||
.page__content {
|
||||
.notice,
|
||||
.notice--primary,
|
||||
|
|
|
|||
|
|
@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
|
|||
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
|
||||
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
|
||||
|
||||
/* dark syntax highlighting (base16) */
|
||||
$base00: #ffffff !default;
|
||||
$base01: #e0e0e0 !default;
|
||||
$base02: #d0d0d0 !default;
|
||||
$base03: #b0b0b0 !default;
|
||||
$base04: #000000 !default;
|
||||
$base05: #101010 !default;
|
||||
$base06: #151515 !default;
|
||||
$base07: #202020 !default;
|
||||
$base08: #ff0086 !default;
|
||||
$base09: #fd8900 !default;
|
||||
$base0a: #aba800 !default;
|
||||
$base0b: #00c918 !default;
|
||||
$base0c: #1faaaa !default;
|
||||
$base0d: #3777e6 !default;
|
||||
$base0e: #ad00a1 !default;
|
||||
$base0f: #cc6633 !default;
|
||||
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,3 +13,21 @@ $link-color: #343434 !default;
|
|||
$masthead-link-color: $text-color !default;
|
||||
$masthead-link-color-hover: $text-color !default;
|
||||
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
|
||||
|
||||
/* dirt syntax highlighting (base16) */
|
||||
$base00: #231e18 !default;
|
||||
$base01: #302b25 !default;
|
||||
$base02: #48413a !default;
|
||||
$base03: #9d8b70 !default;
|
||||
$base04: #b4a490 !default;
|
||||
$base05: #cabcb1 !default;
|
||||
$base06: #d7c8bc !default;
|
||||
$base07: #e4d4c8 !default;
|
||||
$base08: #d35c5c !default;
|
||||
$base09: #ca7f32 !default;
|
||||
$base0a: #e0ac16 !default;
|
||||
$base0b: #b7ba53 !default;
|
||||
$base0c: #6eb958 !default;
|
||||
$base0d: #88a4d3 !default;
|
||||
$base0e: #bb90e2 !default;
|
||||
$base0f: #b49368 !default;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
|
|||
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
|
||||
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
|
||||
|
||||
/* neon syntax highlighting (base16) */
|
||||
$base00: #ffffff !default;
|
||||
$base01: #e0e0e0 !default;
|
||||
$base02: #d0d0d0 !default;
|
||||
$base03: #b0b0b0 !default;
|
||||
$base04: #000000 !default;
|
||||
$base05: #101010 !default;
|
||||
$base06: #151515 !default;
|
||||
$base07: #202020 !default;
|
||||
$base08: #ff0086 !default;
|
||||
$base09: #fd8900 !default;
|
||||
$base0a: #aba800 !default;
|
||||
$base0b: #00c918 !default;
|
||||
$base0c: #1faaaa !default;
|
||||
$base0d: #3777e6 !default;
|
||||
$base0e: #ad00a1 !default;
|
||||
$base0f: #cc6633 !default;
|
||||
|
||||
.author__urls.social-icons .fa,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
|
|||
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
|
||||
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
|
||||
|
||||
/* plum syntax highlighting (base16) */
|
||||
$base00: #ffffff !default;
|
||||
$base01: #e0e0e0 !default;
|
||||
$base02: #d0d0d0 !default;
|
||||
$base03: #b0b0b0 !default;
|
||||
$base04: #000000 !default;
|
||||
$base05: #101010 !default;
|
||||
$base06: #151515 !default;
|
||||
$base07: #202020 !default;
|
||||
$base08: #ff0086 !default;
|
||||
$base09: #fd8900 !default;
|
||||
$base0a: #aba800 !default;
|
||||
$base0b: #00c918 !default;
|
||||
$base0c: #1faaaa !default;
|
||||
$base0d: #3777e6 !default;
|
||||
$base0e: #ad00a1 !default;
|
||||
$base0f: #cc6633 !default;
|
||||
|
||||
.author__urls.social-icons .fa,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
|
|
|
|||
|
|
@ -20,6 +20,24 @@ $masthead-link-color: $text-color !default;
|
|||
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
|
||||
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
|
||||
|
||||
/* sunrise syntax highlighting (base16) */
|
||||
$base00: #1d1f21 !default;
|
||||
$base01: #282a2e !default;
|
||||
$base02: #373b41 !default;
|
||||
$base03: #969896 !default;
|
||||
$base04: #b4b7b4 !default;
|
||||
$base05: #c5c8c6 !default;
|
||||
$base06: #e0e0e0 !default;
|
||||
$base07: #ffffff !default;
|
||||
$base08: #cc6666 !default;
|
||||
$base09: #de935f !default;
|
||||
$base0a: #f0c674 !default;
|
||||
$base0b: #b5bd68 !default;
|
||||
$base0c: #8abeb7 !default;
|
||||
$base0d: #81a2be !default;
|
||||
$base0e: #b294bb !default;
|
||||
$base0f: #a3685a !default;
|
||||
|
||||
.author__urls.social-icons .fa,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: "Markup: Syntax Highlighting"
|
||||
excerpt: "Post displaying the various ways of highlighting code in Markdown."
|
||||
last_modified_at: 2018-01-03T09:44:58-05:00
|
||||
last_modified_at: 2018-01-03T09:45:06-05:00
|
||||
header:
|
||||
teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
|
||||
tags:
|
||||
|
|
@ -88,15 +88,29 @@ Indentation matters. Be sure the indent of the code block aligns with the first
|
|||
|
||||
An example of a code blocking using Jekyll's [`{% raw %}{% highlight %}{% endraw %}` tag](https://jekyllrb.com/docs/templates/#code-snippet-highlighting).
|
||||
|
||||
{% highlight html linenos %}
|
||||
{% raw %}<nav class="pagination" role="navigation">
|
||||
{% if page.previous %}
|
||||
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
|
||||
{% endif %}
|
||||
{% if page.next %}
|
||||
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
|
||||
{% endif %}
|
||||
</nav><!-- /.pagination -->{% endraw %}
|
||||
{% highlight javascript linenos %}
|
||||
// 'gulp html' -- does nothing
|
||||
// 'gulp html --prod' -- minifies and gzips HTML files for production
|
||||
gulp.task('html', () => {
|
||||
return gulp.src(paths.siteFolderName + paths.htmlPattern)
|
||||
.pipe(when(argv.prod, htmlmin({
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
collapseBooleanAttributes: false,
|
||||
removeAttributeQuotes: false,
|
||||
removeRedundantAttributes: false,
|
||||
minifyJS: true,
|
||||
minifyCSS: true
|
||||
})))
|
||||
.pipe(when(argv.prod, size({title: 'optimized HTML'})))
|
||||
.pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
|
||||
.pipe(when(argv.prod, gzip({append: true})))
|
||||
.pipe(when(argv.prod, size({
|
||||
title: 'gzipped HTML',
|
||||
gzip: true
|
||||
})))
|
||||
.pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
|
||||
});
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight wl linenos %}
|
||||
|
|
|
|||
|
|
@ -88,15 +88,29 @@ Indentation matters. Be sure the indent of the code block aligns with the first
|
|||
|
||||
An example of a code blocking using Jekyll's [`{% raw %}{% highlight %}{% endraw %}` tag](https://jekyllrb.com/docs/templates/#code-snippet-highlighting).
|
||||
|
||||
{% highlight html linenos %}
|
||||
{% raw %}<nav class="pagination" role="navigation">
|
||||
{% if page.previous %}
|
||||
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
|
||||
{% endif %}
|
||||
{% if page.next %}
|
||||
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
|
||||
{% endif %}
|
||||
</nav><!-- /.pagination -->{% endraw %}
|
||||
{% highlight javascript linenos %}
|
||||
// 'gulp html' -- does nothing
|
||||
// 'gulp html --prod' -- minifies and gzips HTML files for production
|
||||
gulp.task('html', () => {
|
||||
return gulp.src(paths.siteFolderName + paths.htmlPattern)
|
||||
.pipe(when(argv.prod, htmlmin({
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
collapseBooleanAttributes: false,
|
||||
removeAttributeQuotes: false,
|
||||
removeRedundantAttributes: false,
|
||||
minifyJS: true,
|
||||
minifyCSS: true
|
||||
})))
|
||||
.pipe(when(argv.prod, size({title: 'optimized HTML'})))
|
||||
.pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
|
||||
.pipe(when(argv.prod, gzip({append: true})))
|
||||
.pipe(when(argv.prod, size({
|
||||
title: 'gzipped HTML',
|
||||
gzip: true
|
||||
})))
|
||||
.pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
|
||||
});
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight wl linenos %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue