N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve syntax highlighting styles (#1450)

Browse source 
* 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 2018-01-04 20:46:10 -05:00 committed by GitHub
parent 94d753378a
commit 3f469f268f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 535 additions and 340 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

499
_sass/minimal-mistakes/_syntax.scss
View file

@ -6,29 +6,27 @@ div.highlighter-rouge,
figure.highlight { figure.highlight {
position: relative; position: relative;
margin-bottom: 1em; margin-bottom: 1em;
background: $base00;
color: $base05;
font-family: $monospace; font-family: $monospace;
font-size: $type-size-6; font-size: $type-size-6;
line-height: 1.8; line-height: 1.8;
border-radius: $border-radius; border-radius: $border-radius;
background-color: $code-background-color;
> pre,
pre.highlight { pre.highlight {
margin: 0; margin: 0;
padding: 1em; padding: 1em;
} }
} }
figure.highlight {
padding-left: 1em;
padding-right: 1em;
}
.highlight table { .highlight table {
margin-bottom: 0;
font-size: 1em; font-size: 1em;
border: 0; border: 0;
td { td {
padding: 5px; padding: 0;
width: calc(100% - 1em); width: calc(100% - 1em);
border: 0; border: 0;
@ -36,7 +34,14 @@ figure.highlight {
&.gutter { &.gutter {
padding-right: 1em; padding-right: 1em;
width: 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%; width: 100%;
} }
/* .highlight .hll {
Solarized Light background-color: $base06;
http://ethanschoonover.com/solarized }
.highlight {
SOLARIZED HEX ROLE .c {
--------- -------- ------------------------------------------ /* Comment */
base01 #586e75 body text / default code / primary content color: $base04;
base1 #93a1a1 comments / secondary content }
base3 #fdf6e3 background .err {
orange #cb4b16 constants /* Error */
red #dc322f regex, special keywords color: $base08;
blue #22b3eb reserved keywords }
cyan #2aa198 strings, numbers .k {
green #859900 operators, other keywords /* Keyword */
========================================================================== */ color: $base0e;
}
.highlight .c { .l {
color: #93a1a1; /* Literal */
} /* Comment */ color: $base09;
.highlight .err { }
color: #586e75; .n {
} /* Error */ /* Name */
.highlight .g { color: $base05;
color: #586e75; }
} /* Generic */ .o {
.highlight .k { /* Operator */
color: #859900; color: $base0c;
} /* Keyword */ }
.highlight .l { .p {
color: #586e75; /* Punctuation */
} /* Literal */ color: $base05;
.highlight .n { }
color: #586e75; .cm {
} /* Name */ /* Comment.Multiline */
.highlight .o { color: $base04;
color: #859900; }
} /* Operator */ .cp {
.highlight .x { /* Comment.Preproc */
color: #cb4b16; color: $base04;
} /* Other */ }
.highlight .p { .c1 {
color: #586e75; /* Comment.Single */
} /* Punctuation */ color: $base04;
.highlight .cm { }
color: #93a1a1; .cs {
} /* Comment.Multiline */ /* Comment.Special */
.highlight .cp { color: $base04;
color: #859900; }
} /* Comment.Preproc */ .gd {
.highlight .c1 { /* Generic.Deleted */
color: #93a1a1; color: $base08;
} /* Comment.Single */ }
.highlight .cs { .ge {
color: #859900; /* Generic.Emph */
} /* Comment.Special */
.highlight .gd {
color: #2aa198;
} /* Generic.Deleted */
.highlight .ge {
color: #586e75;
font-style: italic; font-style: italic;
} /* Generic.Emph */ }
.highlight .gr { .gh {
color: #dc322f; /* Generic.Heading */
} /* Generic.Error */ color: $base05;
.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;
font-weight: bold; font-weight: bold;
} /* Generic.Strong */ }
.highlight .gu { .gi {
color: #cb4b16; /* Generic.Inserted */
} /* Generic.Subheading */ color: $base0b;
.highlight .gt { }
color: #586e75; .gp {
} /* Generic.Traceback */ /* Generic.Prompt */
.highlight .kc { color: $base04;
color: #cb4b16; font-weight: bold;
} /* Keyword.Constant */ }
.highlight .kd { .gs {
color: #22b3eb; /* Generic.Strong */
} /* Keyword.Declaration */ font-weight: bold;
.highlight .kn { }
color: #859900; .gu {
} /* Keyword.Namespace */ /* Generic.Subheading */
.highlight .kp { color: $base0c;
color: #859900; font-weight: bold;
} /* Keyword.Pseudo */ }
.highlight .kr { .kc {
color: #22b3eb; /* Keyword.Constant */
} /* Keyword.Reserved */ color: $base0e;
.highlight .kt { }
color: #dc322f; .kd {
} /* Keyword.Type */ /* Keyword.Declaration */
.highlight .ld { color: $base0e;
color: #586e75; }
} /* Literal.Date */ .kn {
.highlight .m { /* Keyword.Namespace */
color: #2aa198; color: $base0c;
} /* Literal.Number */ }
.highlight .s { .kp {
color: #2aa198; /* Keyword.Pseudo */
} /* Literal.String */ color: $base0e;
.highlight .na { }
color: #586e75; .kr {
} /* Name.Attribute */ /* Keyword.Reserved */
.highlight .nb { color: $base0e;
color: #b58900; }
} /* Name.Builtin */ .kt {
.highlight .nc { /* Keyword.Type */
color: #22b3eb; color: $base0a;
} /* Name.Class */ }
.highlight .no { .ld {
color: #cb4b16; /* Literal.Date */
} /* Name.Constant */ color: $base0b;
.highlight .nd { }
color: #22b3eb; .m {
} /* Name.Decorator */ /* Literal.Number */
.highlight .ni { color: $base09;
color: #cb4b16; }
} /* Name.Entity */ .s {
.highlight .ne { /* Literal.String */
color: #cb4b16; color: $base0b;
} /* Name.Exception */ }
.highlight .nf { .na {
color: #22b3eb; /* Name.Attribute */
} /* Name.Function */ color: $base0d;
.highlight .nl { }
color: #586e75; .nb {
} /* Name.Label */ /* Name.Builtin */
.highlight .nn { color: $base05;
color: #586e75; }
} /* Name.Namespace */ .nc {
.highlight .nx { /* Name.Class */
color: #586e75; color: $base0a;
} /* Name.Other */ }
.highlight .py { .no {
color: #586e75; /* Name.Constant */
} /* Name.Property */ color: $base08;
.highlight .nt { }
color: #22b3eb; .nd {
} /* Name.Tag */ /* Name.Decorator */
.highlight .nv { color: $base0c;
color: #22b3eb; }
} /* Name.Variable */ .ni {
.highlight .ow { /* Name.Entity */
color: #859900; color: $base05;
} /* Operator.Word */ }
.highlight .w { .ne {
color: #586e75; /* Name.Exception */
} /* Text.Whitespace */ color: $base08;
.highlight .mf { }
color: #2aa198; .nf {
} /* Literal.Number.Float */ /* Name.Function */
.highlight .mh { color: $base0d;
color: #2aa198; }
} /* Literal.Number.Hex */ .nl {
.highlight .mi { /* Name.Label */
color: #2aa198; color: $base05;
} /* Literal.Number.Integer */ }
.highlight .mo { .nn {
color: #2aa198; /* Name.Namespace */
} /* Literal.Number.Oct */ color: $base0a;
.highlight .sb { }
color: #93a1a1; .nx {
} /* Literal.String.Backtick */ /* Name.Other */
.highlight .sc { color: $base0d;
color: #2aa198; }
} /* Literal.String.Char */ .py {
.highlight .sd { /* Name.Property */
color: #586e75; color: $base05;
} /* Literal.String.Doc */ }
.highlight .s2 { .nt {
color: #2aa198; /* Name.Tag */
} /* Literal.String.Double */ color: $base0c;
.highlight .se { }
color: #cb4b16; .nv {
} /* Literal.String.Escape */ /* Name.Variable */
.highlight .sh { color: $base08;
color: #586e75; }
} /* Literal.String.Heredoc */ .ow {
.highlight .si { /* Operator.Word */
color: #2aa198; color: $base0c;
} /* Literal.String.Interpol */ }
.highlight .sx { .w {
color: #2aa198; /* Text.Whitespace */
} /* Literal.String.Other */ color: $base05;
.highlight .sr { }
color: #dc322f; .mf {
} /* Literal.String.Regex */ /* Literal.Number.Float */
.highlight .s1 { color: $base09;
color: #2aa198; }
} /* Literal.String.Single */ .mh {
.highlight .ss { /* Literal.Number.Hex */
color: #2aa198; color: $base09;
} /* Literal.String.Symbol */ }
.highlight .bp { .mi {
color: #22b3eb; /* Literal.Number.Integer */
} /* Name.Builtin.Pseudo */ color: $base09;
.highlight .vc { }
color: #22b3eb; .mo {
} /* Name.Variable.Class */ /* Literal.Number.Oct */
.highlight .vg { color: $base09;
color: #22b3eb; }
} /* Name.Variable.Global */ .sb {
.highlight .vi { /* Literal.String.Backtick */
color: #22b3eb; color: $base0b;
} /* Name.Variable.Instance */ }
.highlight .il { .sc {
color: #2aa198; /* Literal.String.Char */
} /* Literal.Number.Integer.Long */ 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;
}
}

26
_sass/minimal-mistakes/_variables.scss
View file

@ -14,7 +14,8 @@ $indent-var : 1.3em !default;
/* system typefaces */ /* system typefaces */
$serif: Georgia, Times, serif !default; $serif: Georgia, Times, serif !default;
$sans-serif : -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-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; $monospace: Monaco, Consolas, "Lucida Console", monospace !default;
/* sans serif typefaces */ /* sans serif typefaces */
@ -42,7 +43,6 @@ $type-size-6 : 0.75em !default; // ~12px
$type-size-7: 0.6875em !default; // ~11px $type-size-7: 0.6875em !default; // ~11px
$type-size-8: 0.625em !default; // ~10px $type-size-8: 0.625em !default; // ~10px
/* /*
Colors Colors
========================================================================== */ ========================================================================== */
@ -75,7 +75,7 @@ $yiq-contrasted-threshold : 175 !default;
$yiq-debug: false !default; $yiq-debug: false !default;
/* brands */ /* brands */
$behance-color : #1769FF !default; $behance-color: #1769ff !default;
$bitbucket-color: #205081 !default; $bitbucket-color: #205081 !default;
$dribbble-color: #ea4c89 !default; $dribbble-color: #ea4c89 !default;
$facebook-color: #3b5998 !default; $facebook-color: #3b5998 !default;
@ -105,6 +105,24 @@ $masthead-link-color : $primary-color !default;
$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default; $masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !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 Breakpoints
========================================================================== */ ========================================================================== */
@ -115,7 +133,6 @@ $medium-wide : 900px !default;
$large: 1024px !default; $large: 1024px !default;
$x-large: 1280px !default; $x-large: 1280px !default;
/* /*
Grid Grid
========================================================================== */ ========================================================================== */
@ -124,7 +141,6 @@ $right-sidebar-width-narrow : 200px !default;
$right-sidebar-width: 300px !default; $right-sidebar-width: 300px !default;
$right-sidebar-width-wide: 400px !default; $right-sidebar-width-wide: 400px !default;
/* /*
Other Other
========================================================================== */ ========================================================================== */

18
_sass/minimal-mistakes/skins/_contrast.scss
View file

@ -13,6 +13,24 @@ $masthead-link-color: $text-color !default;
$masthead-link-color-hover: $text-color !default; $masthead-link-color-hover: $text-color !default;
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !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 { .page__content {
.notice, .notice,
.notice--primary, .notice--primary,

18
_sass/minimal-mistakes/skins/_dark.scss
View file

@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default; $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
$navicon-link-color-hover: mix(#000, $background-color, 30%) !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 { .page__footer-follow .social-icons .svg-inline--fa {
color: inherit; color: inherit;
} }

18
_sass/minimal-mistakes/skins/_dirt.scss
View file

@ -13,3 +13,21 @@ $link-color: #343434 !default;
$masthead-link-color: $text-color !default; $masthead-link-color: $text-color !default;
$masthead-link-color-hover: $text-color !default; $masthead-link-color-hover: $text-color !default;
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !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
_sass/minimal-mistakes/skins/_neon.scss
View file

@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default; $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
$navicon-link-color-hover: mix(#000, $background-color, 30%) !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, .author__urls.social-icons .fa,
.page__footer-follow .social-icons .svg-inline--fa { .page__footer-follow .social-icons .svg-inline--fa {
color: inherit; color: inherit;

18
_sass/minimal-mistakes/skins/_plum.scss
View file

@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default; $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
$navicon-link-color-hover: mix(#000, $background-color, 30%) !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, .author__urls.social-icons .fa,
.page__footer-follow .social-icons .svg-inline--fa { .page__footer-follow .social-icons .svg-inline--fa {
color: inherit; color: inherit;

18
_sass/minimal-mistakes/skins/_sunrise.scss
View file

@ -20,6 +20,24 @@ $masthead-link-color: $text-color !default;
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default; $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
$navicon-link-color-hover: mix(#000, $background-color, 30%) !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, .author__urls.social-icons .fa,
.page__footer-follow .social-icons .svg-inline--fa { .page__footer-follow .social-icons .svg-inline--fa {
color: inherit; color: inherit;

34
docs/_posts/2013-08-16-markup-syntax-highlighting.md
View file

@ -1,7 +1,7 @@
--- ---
title: "Markup: Syntax Highlighting" title: "Markup: Syntax Highlighting"
excerpt: "Post displaying the various ways of highlighting code in Markdown." 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: header:
teaser: "assets/images/markup-syntax-highlighting-teaser.jpg" teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
tags: 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). An example of a code blocking using Jekyll's [`{% raw %}{% highlight %}{% endraw %}` tag](https://jekyllrb.com/docs/templates/#code-snippet-highlighting).
{% highlight html linenos %} {% highlight javascript linenos %}
{% raw %}<nav class="pagination" role="navigation"> // 'gulp html' -- does nothing
{% if page.previous %} // 'gulp html --prod' -- minifies and gzips HTML files for production
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a> gulp.task('html', () => {
{% endif %} return gulp.src(paths.siteFolderName + paths.htmlPattern)
{% if page.next %} .pipe(when(argv.prod, htmlmin({
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a> removeComments: true,
{% endif %} collapseWhitespace: true,
</nav><!-- /.pagination -->{% endraw %} 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 %} {% endhighlight %}
{% highlight wl linenos %} {% highlight wl linenos %}

32
test/_posts/2013-08-16-markup-syntax-highlighting.md
View file

@ -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). An example of a code blocking using Jekyll's [`{% raw %}{% highlight %}{% endraw %}` tag](https://jekyllrb.com/docs/templates/#code-snippet-highlighting).
{% highlight html linenos %} {% highlight javascript linenos %}
{% raw %}<nav class="pagination" role="navigation"> // 'gulp html' -- does nothing
{% if page.previous %} // 'gulp html --prod' -- minifies and gzips HTML files for production
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a> gulp.task('html', () => {
{% endif %} return gulp.src(paths.siteFolderName + paths.htmlPattern)
{% if page.next %} .pipe(when(argv.prod, htmlmin({
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a> removeComments: true,
{% endif %} collapseWhitespace: true,
</nav><!-- /.pagination -->{% endraw %} 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 %} {% endhighlight %}
{% highlight wl linenos %} {% highlight wl linenos %}