Merge branch 'better-syntax-highlighting' into 'master'

Reworked code highlighting

See merge request Syndamia/syndamiadotcom!8

1 files changed, 71 insertions, 28 deletions

diff --git a/src/styles.css b/src/styles.css
index b24a355..6173c5e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -55,23 +55,56 @@
   --bg-color: white;
   --fg-color: black;
 
-  --a-color: #336700;
-  --a-hover-color: #3ea100;
-  --accent-line-color: #004080;
-  --alternating-row-color: #eef0f2;
-  --bg-selection-color: #338fff;
-  --blockquote-color: #6a737d;
+  --a-color:                 #336700;
+  --a-hover-color:           #3ea100;
+  --accent-line-color:       #004080;
+  --alternating-row-color:   #eef0f2;
+  --bg-selection-color:      #338fff;
+  --blockquote-color:        #6a737d;
   --blockquote-border-color: #dfe2e5;
-  --body-bg: #dbdbdb;
-  --border-color: black;
-  --code-bg-color: #e2e4e6;
-  --em-color: black;
-  --fg-selection-color: white;
-  --header-color: #006b8f;
-  --pre-bg-color: #f6f8fa;
-  --strong-color: black;
-  --table-border-color: black;
-  --tr-bg-color: #fff;
+  --body-bg:                 #dbdbdb;
+  --border-color:            black;
+  --code-bg-color:           #e2e4e6;
+  --em-color:                black;
+  --fg-selection-color:      white;
+  --header-color:            #006b8f;
+  --pre-bg-color:            #f6f8fa;
+  --strong-color:            black;
+  --table-border-color:      black;
+  --tr-bg-color:             white;
+
+  /* https://github.com/morhetz/gruvbox/blob/master/autoload/gruvbox.vim */
+  --hi-fg:      #282828;
+  --hi-bg:      #f9f5d7;
+  --hic-gray:   #928374;
+  --hic-red:    #fb4934;
+  --hic-green:  #79740e;
+  --hic-blue:   #076678;
+  --hic-yellow: #b57614;
+  --hic-purple: #8f3f71;
+  --hic-aqua:   #427b58;
+  --hic-orange: #af3a03;
+
+  --hi-comment:      var(--hic-gray);
+  --hi-const:        var(--hic-purple);
+  --hi-string:       var(--hic-green);
+  --hi-char:         var(--hic-purple);
+  --hi-number:       var(--hic-purple);
+  --hi-bool:         var(--hic-purple);
+  --hi-float:        var(--hic-purple);
+  --hi-identifier:   var(--hic-blue);
+  --hi-function:     var(--hic-green);
+  --hi-statement:    var(--hic-red);
+  --hi-conditional:  var(--hic-red);
+  --hi-repeat:       var(--hic-red);
+  --hi-operator:     var(--hi-fg);
+  --hi-keyword:      var(--hic-red); /* Label and Exception are keywords */
+  --hi-preproc:      var(--hic-aqua);
+  --hi-type:         var(--hic-yellow);
+  --hi-storageclass: var(--hic-orange);
+  --hi-structure:    var(--hic-aqua);
+  --hi-typedef:      var(--hic-aqua);
+  --hi-ignore:       var(--hi-fg);
 }
 
 /* Global */
@@ -187,7 +220,6 @@ h1, h2, h3, h4, h5, h6, b {
 code, pre {
   background-color: var(--pre-bg-color);
   font-family: monospace;
-  line-height: 1em;
 }
   pre {
       overflow: auto;
@@ -202,7 +234,7 @@ code, pre {
     }
   pre code {
       border: 0;
-      display: inline;
+      display: inline-block;
       overflow: visible;
       padding: 0;
       word-wrap: normal;
@@ -471,14 +503,25 @@ dt { font-size: 1.2em; }
         padding: 0.2em 0 0.2em 0.2em !important;
       }
 
-/* Syntax highlighting (colours are inspired from gruvbox) */
+/* Syntax highlighting */
 
-/* Constant, Chars         */ .SH-cst, .SH-chr { color: #d787af; }
-/* Comment                 */ .SH-com          { color: #8a8a8a; }
-/* Keyword                 */ .SH-kwd          { color: #d75f5f; }
-/* Second keyword color    */ .SH-kwd2         { color: #ff8700; }
-/* Third keyword color     */ .SH-kwd3         { color: #87af87; }
-/* Type                    */ .SH-typ          { color: #ffaf00; }
-/* Class                   */ .SH-cls          { color: #87afaf; }
-/* Function names, Strings */ :not(.SH-cls) > .SH-fnc, .SH-str { color: #afaf00; }
-.SH-none { color: var(--fg-color); }
+.HI-comment      { color: var(--hi-comment); }
+.HI-const        { color: var(--hi-const); }
+.HI-string       { color: var(--hi-string); }
+.HI-char         { color: var(--hi-char); }
+.HI-number       { color: var(--hi-number); }
+.HI-bool         { color: var(--hi-bool); }
+.HI-float        { color: var(--hi-float); }
+.HI-identifier   { color: var(--hi-identifier); }
+.HI-function     { color: var(--hi-function); }
+.HI-statement    { color: var(--hi-statement); }
+.HI-conditional  { color: var(--hi-conditional); }
+.HI-repeat       { color: var(--hi-repeat); }
+.HI-operator     { color: var(--hi-operator); }
+.HI-keyword      { color: var(--hi-keyword); /* Label and Exception are keywords */ }
+.HI-preproc      { color: var(--hi-preproc); }
+.HI-type         { color: var(--hi-type); }
+.HI-storageclass { color: var(--hi-storageclass); }
+.HI-structure    { color: var(--hi-structure); }
+.HI-typedef      { color: var(--hi-typedef); }
+.HI-ignore       { color: var(--hi-ignore); }