Merge branch 'dev', v1.1.0

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+> v1.1.0
+
+- Add more speed and asynchronous loading, of fonts especially
+- Add more languages to `highlightjs` that are nowadays really used, like Rust, Go, Docker, Clojure, etc. ...
+- Some fixes with some Pull Requests (thx to @davidskeck, @mtn and @maiki)
+
 > v1.0.0
 
 - Change the set of fonts to **Nexa Bold, Raleway and Merriweather**.

README.md

@@ -2,7 +2,7 @@
 
 [![MIT License](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000?style=plastic)](https://github.com/fuegowolf/cocoa-eh-hugo-theme/blob/master/LICENSE)
 
-**Cocoa Enhanced** is a clean and responsive [Hugo](http://gohugo.io) [theme](https://github.com/spf13/hugoThemes/) with cool typography. The main goal of this theme is to be simple but highly customizable.
+**Cocoa Enhanced** is a clean, fast and responsive [Hugo](http://gohugo.io) [theme](https://github.com/spf13/hugoThemes/) with cool typography. The main goal of this theme is to be simple and fast but highly customizable.
 
 You can use this theme either for your blog or your personal website. A demo is available [here](https://kodewolf.com).
 
@@ -19,17 +19,32 @@ You can use this theme either for your blog or your personal website. A demo is
 
 ## Features
 
-* Suited for blogging and personal webpages.
+Simple but complete, here are the main features of this theme :
+
 * Possibility to have sections with a header and a list of articles.
 * Possibility to have single pages.
-* Homepage with latest and best posts
+* Homepage with latest and best posts.
-* Syntax highlighting with hightlightjs.
+* Syntax highlighting with `hightlightjs`.
 * Progressive images.
 * Twitter cards support.
 * Disqus support.
-* Responsive and **blazing fast**.
 
-#### Differences from the original Cocoa
+#### Typography
+
+The **typography** is what makes Cocoa-EH look cool, here are the fonts used :
+
+* *Nexa Bold* for the blog name, a strong and opinionated font
+* *Raleway* for the titles, light but clearly visible
+* *Merriweather* for the text, an awesome sans serif font to read without difficulties
+* *Ubuntu Mono* for the code
+
+#### Blazing fast
+
+Everything is made here to make the theme **really fast** to load : inline CSS, deferred Javascript, fonts loaded in an asynchronous way with replacement fonts when they're not loaded, etc. ... Even with a GPRS connection, your blog is readable.
+
+> With gzip enabled, this theme takes less than **400**ms to load entirely, and the content is readable at only **50**ms. Also scores 99/100 on Pagespeed.
+
+### Differences from the original Cocoa
 
 This theme is less minimalist than the original Cocoa, with some new features :
 

exampleSite/config.toml

@@ -29,4 +29,17 @@ email = "you@example.com"
 linkedin = "john-example-aa80ue8è"
 twitter = "example"
 social_banner = "img/banner.png"
-posts_navigation = true
+posts_navigation = true
+
+[params.colors]
+identifier = "#527fc1f"
+identifier_dark = "#1a3152"
+trivial = "#6a7a8b"
+foreground = "#181d2a"
+background = "#f9f9f9"
+background_dark = "#282a36"
+code = "#87a5d2"
+type = "#97d28b"
+special = "#ffcb8d"
+value = "#96c2d7"
+statement = "#ff8e91"

layouts/partials/css/colors.css

@@ -1,61 +1,61 @@
 a {
-    color: #527fc1;
+    color: {{ .Param "colors.identifier" }};
 }
 
 a:hover {
-    color: #1a3152;
+    color: {{ .Param "colors.identifier_dark" }};
 }
 
 section.main .content .markdown, section.header .name, section.header nav ul li:hover {
-    color: #181d2a;
+    color: {{ .Param "colors.foreground" }};
 }
 
 section.header nav ul li {
-    color: #6a7a8b;
+    color: {{ .Param "colors.trivial" }};
 }
 
 section.main .content .markdown code {
-    background-color: #f9f9f9;
+    background-color: {{ .Param "colors.background" }};
-    color: #527fc1;
+    color: {{ .Param "colors.identifier" }};
 }
 
 section.main .content .markdown pre, section.main .content .markdown pre code {
-    background-color: #282a36;
+    background-color: {{ .Param "colors.background_dark" }};
-    color: #87a5d2;
+    color: {{ .Param "colors.code" }};
 }
 
 .hljs, .hljs-subst, .hljs-variable {
-    color: #87a5d2;
+    color: {{ .Param "colors.code" }};
 }
 
 .hljs-type {
-    color: #97d28b;
+    color: {{ .Param "colors.type" }};
 }
 
 .hljs-quote {
-    color: #ffcb8d;
+    color: {{ .Param "colors.special" }};
 }
 
 .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-template-tag, .hljs-deletion {
-    color: #96c2d7;
+    color: {{ .Param "colors.value" }};
 }
 
 .hljs-comment {
-    color: #9aacbf;
+    color: {{ .Param "colors.trivial" }};
 }
 
 .hljs-regexp, .hljs-symbol, .hljs-template-variable {
-    color: #ffcb8d;
+    color: {{ .Param "colors.special" }};
 }
 
 .hljs-keyword, .hljs-attribute, .hljs-meta-keyword, .hljs-doctag, .hljs-name {
-    color: #97d28b;
+    color: {{ .Param "colors.type" }};
 }
 
 .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-title, .hljs-section {
-    color: #ff8e91;
+    color: {{ .Param "colors.statement" }};
 }
 
 .hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition {
-    color: #97d28b;
+    color: {{ .Param "colors.type" }};
 }

layouts/partials/css/highlight.min.css

@@ -0,0 +1 @@
+.hljs{display:block;background:white;padding:0.5em;color:#333333;overflow-x:auto}.hljs-comment,.hljs-meta{color:#969896}.hljs-string,.hljs-variable,.hljs-template-variable,.hljs-strong,.hljs-emphasis,.hljs-quote{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-attribute{color:#0086b3}.hljs-section,.hljs-name{color:#63a35c}.hljs-tag{color:#333333}.hljs-title,.hljs-attr,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}

layouts/partials/css/main.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'Nexa Bold';
-  src: url('../fonts/Nexa Bold.otf');
+  src: url('/fonts/Nexa Bold.otf');
 }
 
 html, body, div, span, applet, object, iframe,
@@ -82,23 +82,12 @@ body {
   justify-content: flex-start;
   width: 100%;
   min-height: 100%;
-  font-weight: 500;
+  font-weight: 400;
-  font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
+  font-family: 'Helvetica Neue', 'Arial', sans-serif;
   color: #111111;
   line-height: 1.6;
   text-rendering: optimizeLegibility !important;
 }
-@media (min-width: 600px) {
-  body {
-    -webkit-justify-content: center;
-    -moz-justify-content: center;
-    -ms-justify-content: center;
-    justify-content: center;
-  }
-  .non-narrow.zero-top-spacing {
-    padding-top: 0 !important;
-  }
-}
 .icon {
   text-rendering: geometricPrecision !important;
 }
@@ -126,14 +115,6 @@ section {
   display: flex;
   width: 100%;
 }
-@media (min-width: 600px) {
-  section {
-    padding: 0 16px;
-    margin-left: 100px;
-    margin-right: 100px;
-    max-width: 750px;
-  }
-}
 section.header .container {
   -webkit-align-items: center;
   -moz-align-items: center;
@@ -199,10 +180,10 @@ section.header nav ul a:last-child {
 }
 section.header nav ul li {
   color: #555555;
-  font-weight: 500;
+  font-weight: 400;
   font-size: 14px;
   text-transform: uppercase;
-  font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
+  font-family: 'Helvetica Neue', 'Arial', sans-serif;
   -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
   -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
   -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
@@ -211,53 +192,6 @@ section.header nav ul li {
 section.header nav ul li:hover {
   color: #111111;
 }
-@media (min-width: 600px) {
-  section.header {
-    background-color: transparent;
-  }
-  section.header .container {
-    -webkit-justify-content: flex-start;
-    -moz-justify-content: flex-start;
-    -ms-justify-content: flex-start;
-    justify-content: flex-start;
-  }
-  section.header .container .logo {
-    margin: 0;
-  }
-  section.header-home .container .logo {
-    max-width: 180px;
-    margin-left: 20px;
-  }
-  section.header-home .name-home {
-    padding-top: 30px;
-    font-size: 40px;
-  }
-  section.header-home nav ul li {
-    font-size: 18px;
-  }
-  section.header .content {
-    -webkit-align-items: flex-start;
-    -moz-align-items: flex-start;
-    -ms-align-items: flex-start;
-    align-items: flex-start;
-  }
-  section.header .name {
-    color: #333333;
-  }
-  section.header nav {
-    font-size: 14px;
-    margin-bottom: 0;
-  }
-  section.header nav ul {
-    text-align: left;
-  }
-  section.header nav ul li {
-    color: #666666;
-  }
-  section.header nav ul li:hover {
-    color: #333333;
-  }
-}
 section.footer .container {
   -webkit-align-items: center;
   -moz-align-items: center;
@@ -302,28 +236,6 @@ section.footer .container .icons {
   flex-grow: 0.5;
   text-align: end;
 }
-@media (min-width: 600px) {
-  section.footer {
-    background-color: transparent;
-  }
-  section.footer .container {
-    flex-direction: row;
-  }
-  section.footer .container a {
-    margin-left: 3px;
-    margin-right: 3px;
-    color: #666666;
-  }
-  section.footer .container a:hover {
-    color: #333333;
-  }
-  section.footer .container a .icon {
-    font-size: 18px;
-  }
-  section.footer .container a .icon.larger {
-    font-size: 20px;
-  }
-}
 section.main .container {
   -webkit-align-items: center;
   -moz-align-items: center;
@@ -354,10 +266,10 @@ section.main .content .posts {
 }
 section.main .content .page-heading {
   font-size: 20px;
-  font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
+  font-weight: 700;
+  font-family: 'Helvetica Neue', 'Arial', sans-serif;
   letter-spacing: -0.005rem;
   text-transform: uppercase;
-  font-weight: 700;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
@@ -420,15 +332,6 @@ section.main .content .front-matter .tags ul li:hover {
 section.main .content .front-matter .tags ul li a {
   color: #666666;
 }
-@media (min-width: 600px) {
-  section.main .content .front-matter .date,
-  section.main .content .front-matter .author,
-  section.main .content .front-matter .tags,
-  section.main .content .front-matter .word-count,
-  section.main .content .front-matter .reading-time .middot {
-    display: initial;
-  }
-}
 section.main .container.f04 {
   -webkit-justify-content: center;
   -moz-justify-content: center;
@@ -452,34 +355,13 @@ section.main .container.f04 .content {
 }
 section.main .container.f04 .content .num {
   margin: 30px 0px 30px 0;
-  font-weight: 200;
+  font-weight: 400;
-  font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
+  font-family: 'Helvetica Neue', 'Arial', sans-serif;
   font-size: 50px;
 }
 section.main .container.f04 .content .detail {
   margin-bottom: 40px;
 }
-@media (min-width: 600px) {
-  section.main .container.f04 {
-    -webkit-justify-content: flex-start;
-    -moz-justify-content: flex-start;
-    -ms-justify-content: flex-start;
-    justify-content: flex-start;
-  }
-  section.main .container.f04 .content {
-    -webkit-align-items: flex-start;
-    -moz-align-items: flex-start;
-    -ms-align-items: flex-start;
-    align-items: flex-start;
-  }
-  section.main .container.f04 .content .num {
-    margin: 0 0 10px 0;
-    font-size: 32px;
-  }
-  section.main .container.f04 .content .detail {
-    margin-bottom: 30px;
-  }
-}
 section.main .container .content .groupby {
   margin-top: 1em;
   padding-left: 0.5em;
@@ -532,34 +414,6 @@ section.main .container .content .post-item {
     display: flex;
     list-style: none;
 }
-@media (min-width: 600px) {
-  .container {
-    padding: 0 30px;
-  }
-  section.header {
-    padding-top: 60px;
-    padding-bottom: 60px;
-  }
-  section.footer {
-    padding-top: 30px;
-    padding-bottom: 60px;
-  }
-  section.main {
-    padding-top: 0;
-  }
-  section.main .container .content .post-item {
-    display: flex;
-    list-style: none;
-    padding-left: 1.5em;
-  }
-  section.main .container .content .post-item .meta {
-    display: block;
-  }
-  section.main.post {
-    padding-top: 60px;
-    padding-bottom: 60px;
-  }
-}
 a {
   color: #428bca;
   -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
@@ -580,7 +434,7 @@ section.main .content .markdown {
   font-size: 1.1em;
   line-height: 1.75em;
   color: #313537;
-  font-family: 'Merriweather', sans-serif;
+  font-family: serif;
   font-weight: 300;
 }
 section.main .content .markdown h1,
@@ -590,7 +444,7 @@ section.main .content .markdown h4,
 section.main .content .markdown h5,
 section.main .content .markdown h6 {
   font-size: 22px;
-  font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
+  font-family: 'Helvetica Neue', 'Arial', sans-serif;
   letter-spacing: -0.005rem;
   font-weight: 700;
   -moz-osx-font-smoothing: grayscale;
@@ -621,7 +475,7 @@ section.main .content .markdown h6 {
 }
 section.main .content .markdown code,
 section.main .content .markdown pre {
-  font-family: 'Ubuntu Mono', 'Menlo', monospace;
+  font-family: 'Menlo', monospace;
   font-size: 0.98rem;
   background-color: #f7f7f7;
 }
@@ -719,12 +573,6 @@ section.main .content .markdown blockquote {
 section.main .content .markdown blockquote p:last-child {
   margin-bottom: 0;
 }
-@media (min-width: 550px) {
-  section.main .content .markdown blockquote {
-    padding-right: 5rem;
-    padding-left: 1.25rem;
-  }
-}
 section.main .content .markdown figure {
   width: 100%;
   background: #fff;
@@ -738,17 +586,6 @@ section.main .content .markdown figure img {
   position: static;
   margin: auto;
 }
-@media (min-width: 769px) {
-  section.main .content .markdown figure {
-    width: 110%;
-    margin-left: -4%;
-  }
-  section.main .content .markdown img {
-    max-width: 110%;
-    width: 110%;
-    margin-left: -4%;
-  }
-}
 section.main .content .markdown table {
   margin-bottom: 1rem;
   width: 100%;
@@ -816,14 +653,27 @@ section.main .content .navigation a {
   font-style: italic;
   color: #313537;
 }
-@media (min-width: 570px) {
+
-  section.main .content .navigation {
+/* Fonts */
-    -webkit-flex-direction: row;
+
-    -moz-flex-direction: row;
+.wf-raleway-n4-active body, 
-    -ms-flex-direction: row;
+.wf-raleway-n4-active section.header nav ul li,
-    flex-direction: row;
+.wf-raleway-n7-active section.main .content .page-heading,
-  }
+.wf-raleway-n2-active section.main .container.f04 .content .num,
-  section.main .content .navigation div {
+.wf-raleway-n7-active section.main .content .markdown h1,
-    margin-top: 0em;
+.wf-raleway-n7-active section.main .content .markdown h2,
-  }
+.wf-raleway-n7-active section.main .content .markdown h3,
+.wf-raleway-n7-active section.main .content .markdown h4,
+.wf-raleway-n7-active section.main .content .markdown h5,
+.wf-raleway-n7-active section.main .content .markdown h6 {
+  font-family: 'Raleway';
+}
+
+.wf-merriweather-n3-active section.main .content .markdown {
+  font-family: 'Merriweather';
+}
+
+.wf-ubuntu-mono-n4-active section.main .content .markdown code,
+.wf-ubuntu-mono-n4-active section.main .content .markdown pre {
+  font-family: 'Ubuntu Mono';
 }

layouts/partials/css/min600px.css

@@ -0,0 +1,145 @@
+body {
+-webkit-justify-content: center;
+-moz-justify-content: center;
+-ms-justify-content: center;
+justify-content: center;
+}
+.non-narrow.zero-top-spacing {
+padding-top: 0 !important;
+}
+section {
+padding: 0 16px;
+margin-left: 100px;
+margin-right: 100px;
+max-width: 750px;
+}
+section.header {
+background-color: transparent;
+}
+section.header .container {
+-webkit-justify-content: flex-start;
+-moz-justify-content: flex-start;
+-ms-justify-content: flex-start;
+justify-content: flex-start;
+}
+section.header .container .logo {
+margin: 0;
+}
+section.header-home .container .logo {
+max-width: 180px;
+margin-left: 20px;
+}
+section.header-home .name-home {
+padding-top: 30px;
+font-size: 40px;
+}
+section.header-home nav ul li {
+font-size: 18px;
+}
+section.header .content {
+-webkit-align-items: flex-start;
+-moz-align-items: flex-start;
+-ms-align-items: flex-start;
+align-items: flex-start;
+}
+section.header .name {
+color: #333333;
+}
+section.header nav {
+font-size: 14px;
+margin-bottom: 0;
+}
+section.header nav ul {
+text-align: left;
+}
+section.header nav ul li {
+color: #666666;
+}
+section.header nav ul li:hover {
+color: #333333;
+}
+section.footer {
+background-color: transparent;
+}
+section.footer .container {
+flex-direction: row;
+}
+section.footer .container a {
+margin-left: 3px;
+margin-right: 3px;
+color: #666666;
+}
+section.footer .container a:hover {
+color: #333333;
+}
+section.footer .container a .icon {
+font-size: 18px;
+}
+section.footer .container a .icon.larger {
+font-size: 20px;
+}
+section.main .content .front-matter .date,
+section.main .content .front-matter .author,
+section.main .content .front-matter .tags,
+section.main .content .front-matter .word-count,
+section.main .content .front-matter .reading-time .middot {
+display: initial;
+}
+section.main .container.f04 {
+-webkit-justify-content: flex-start;
+-moz-justify-content: flex-start;
+-ms-justify-content: flex-start;
+justify-content: flex-start;
+}
+section.main .container.f04 .content {
+-webkit-align-items: flex-start;
+-moz-align-items: flex-start;
+-ms-align-items: flex-start;
+align-items: flex-start;
+}
+section.main .container.f04 .content .num {
+margin: 0 0 10px 0;
+font-size: 32px;
+}
+section.main .container.f04 .content .detail {
+margin-bottom: 30px;
+}
+.container {
+padding: 0 30px;
+}
+section.header {
+padding-top: 60px;
+padding-bottom: 60px;
+}
+section.footer {
+padding-top: 30px;
+padding-bottom: 60px;
+}
+section.main {
+padding-top: 0;
+}
+section.main .container .content .post-item {
+display: flex;
+list-style: none;
+padding-left: 1.5em;
+}
+section.main .container .content .post-item .meta {
+display: block;
+}
+section.main.post {
+padding-top: 60px;
+padding-bottom: 60px;
+}
+section.main .content .markdown blockquote {
+padding-right: 5rem;
+padding-left: 1.25rem;
+}
+section.main .content .navigation {
+-webkit-flex-direction: row;
+-moz-flex-direction: row;
+-ms-flex-direction: row;
+flex-direction: row;
+}
+section.main .content .navigation div {
+margin-top: 0em;
+}

layouts/partials/css/min769px.css

@@ -0,0 +1,9 @@
+section.main .content .markdown figure {
+width: 110%;
+margin-left: -4%;
+}
+section.main .content .markdown img {
+max-width: 110%;
+width: 110%;
+margin-left: -4%;
+}

layouts/partials/footer_scripts.html

@@ -1,3 +1,12 @@
+<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+<script>
+  WebFont.load({
+    google: {
+      families: ['Raleway:400,600,700', 'Merriweather:300,300i,700,700i', 'Ubuntu+Mono:400,700']
+    }
+  });
+</script>
+
 {{ if .Site.Params.highlightjs }}
   <script src="{{ .Site.BaseURL }}js/highlight.min.js" defer></script>
   {{ range .Site.Params.highlightjslanguages }}
@@ -21,8 +30,3 @@
     {{ end }}
   };
 </script>
-
-<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,700,700i" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
-

layouts/partials/head_includes.html

@@ -1,13 +1,37 @@
 <!-- CSS -->
 
-<link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.v1.0.0.css">
+<style media="screen">
+  {{ partial "css/main.css" . | safeCSS }}
+</style>
+<style media="(min-width: 600px)">
+  {{ partial "css/min600px.css" . | safeCSS }}
+</style>
+<style media="(min-width: 769px)">
+  {{ partial "css/min769px.css" . | safeCSS }}
+</style>
+
+<noscript>
+  <link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,700,700i" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
+</noscript>
 
 {{ if .Site.Params.highlightjs }}
-  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/highlight.min.css">
+  <style type="text/css" media="screen">
+    {{ partial "css/highlight.min.css" . | safeCSS }}
+  </style>
 {{ end }}
 
 {{ if .Site.Params.progressively }}
-  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/progressively.min.css">
+  <style type="text/css" media="screen">
+    {{ partial "css/progressively.min.css" . | safeCSS }}
+  </style>
+{{ end }}
+
+{{ if .Site.Params.colors }}
+  <style type="text/css" media="screen">
+    {{ partial "css/colors.css" . | safeCSS }}
+  </style>
 {{ end }}
 
 {{ range .Site.Params.extracssfiles }}

static/css/highlight.min.css

@@ -1 +0,0 @@
-.hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}