Use classes for syntax highlighting instead of inline styles

config.toml

@@ -10,6 +10,7 @@ rssLimit  = 10
 copyright = "© Maik de Kruif (maik_dev). All rights reserved."
 
 PygmentsCodeFences = true
+pygmentsUseClasses = true
 PygmentsStyle = "monokai"
 
 archetypeDir = "archetypes"

themes/maik-blog/assets/scss/syntax_highlighting.scss

@@ -0,0 +1,403 @@
+/* Background */
+.chroma {
+  color: #f8f8f2;
+  background-color: #272822;
+
+  /* Other */
+  .x {
+  }
+
+  /* Error */
+  .err {
+    color: #960050;
+    background-color: #1e0010;
+  }
+
+  /* LineTableTD */
+  .lntd {
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  /* LineTable */
+  .lntable {
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: auto;
+    overflow: auto;
+    display: block;
+  }
+
+  /* LineHighlight */
+  .hl {
+    display: block;
+    width: 100%;
+    background-color: #ffffcc;
+  }
+
+  /* LineNumbersTable */
+  .lnt {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f;
+  }
+
+  /* LineNumbers */
+  .ln {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f;
+  }
+
+  /* Keyword */
+  .k {
+    color: #66d9ef;
+  }
+
+  /* KeywordConstant */
+  .kc {
+    color: #66d9ef;
+  }
+
+  /* KeywordDeclaration */
+  .kd {
+    color: #66d9ef;
+  }
+
+  /* KeywordNamespace */
+  .kn {
+    color: #f92672;
+  }
+
+  /* KeywordPseudo */
+  .kp {
+    color: #66d9ef;
+  }
+
+  /* KeywordReserved */
+  .kr {
+    color: #66d9ef;
+  }
+
+  /* KeywordType */
+  .kt {
+    color: #66d9ef;
+  }
+
+  /* Name */
+  .n {
+  }
+
+  /* NameAttribute */
+  .na {
+    color: #a6e22e;
+  }
+
+  /* NameBuiltin */
+  .nb {
+  }
+
+  /* NameBuiltinPseudo */
+  .bp {
+  }
+
+  /* NameClass */
+  .nc {
+    color: #a6e22e;
+  }
+
+  /* NameConstant */
+  .no {
+    color: #66d9ef;
+  }
+
+  /* NameDecorator */
+  .nd {
+    color: #a6e22e;
+  }
+
+  /* NameEntity */
+  .ni {
+  }
+
+  /* NameException */
+  .ne {
+    color: #a6e22e;
+  }
+
+  /* NameFunction */
+  .nf {
+    color: #a6e22e;
+  }
+
+  /* NameFunctionMagic */
+  .fm {
+  }
+
+  /* NameLabel */
+  .nl {
+  }
+
+  /* NameNamespace */
+  .nn {
+  }
+
+  /* NameOther */
+  .nx {
+    color: #a6e22e;
+  }
+
+  /* NameProperty */
+  .py {
+  }
+
+  /* NameTag */
+  .nt {
+    color: #f92672;
+  }
+
+  /* NameVariable */
+  .nv {
+  }
+
+  /* NameVariableClass */
+  .vc {
+  }
+
+  /* NameVariableGlobal */
+  .vg {
+  }
+
+  /* NameVariableInstance */
+  .vi {
+  }
+
+  /* NameVariableMagic */
+  .vm {
+  }
+
+  /* Literal */
+  .l {
+    color: #ae81ff;
+  }
+
+  /* LiteralDate */
+  .ld {
+    color: #e6db74;
+  }
+
+  /* LiteralString */
+  .s {
+    color: #e6db74;
+  }
+
+  /* LiteralStringAffix */
+  .sa {
+    color: #e6db74;
+  }
+
+  /* LiteralStringBacktick */
+  .sb {
+    color: #e6db74;
+  }
+
+  /* LiteralStringChar */
+  .sc {
+    color: #e6db74;
+  }
+
+  /* LiteralStringDelimiter */
+  .dl {
+    color: #e6db74;
+  }
+
+  /* LiteralStringDoc */
+  .sd {
+    color: #e6db74;
+  }
+
+  /* LiteralStringDouble */
+  .s2 {
+    color: #e6db74;
+  }
+
+  /* LiteralStringEscape */
+  .se {
+    color: #ae81ff;
+  }
+
+  /* LiteralStringHeredoc */
+  .sh {
+    color: #e6db74;
+  }
+
+  /* LiteralStringInterpol */
+  .si {
+    color: #e6db74;
+  }
+
+  /* LiteralStringOther */
+  .sx {
+    color: #e6db74;
+  }
+
+  /* LiteralStringRegex */
+  .sr {
+    color: #e6db74;
+  }
+
+  /* LiteralStringSingle */
+  .s1 {
+    color: #e6db74;
+  }
+
+  /* LiteralStringSymbol */
+  .ss {
+    color: #e6db74;
+  }
+
+  /* LiteralNumber */
+  .m {
+    color: #ae81ff;
+  }
+
+  /* LiteralNumberBin */
+  .mb {
+    color: #ae81ff;
+  }
+
+  /* LiteralNumberFloat */
+  .mf {
+    color: #ae81ff;
+  }
+
+  /* LiteralNumberHex */
+  .mh {
+    color: #ae81ff;
+  }
+
+  /* LiteralNumberInteger */
+  .mi {
+    color: #ae81ff;
+  }
+
+  /* LiteralNumberIntegerLong */
+  .il {
+    color: #ae81ff;
+  }
+
+  /* LiteralNumberOct */
+  .mo {
+    color: #ae81ff;
+  }
+
+  /* Operator */
+  .o {
+    color: #f92672;
+  }
+
+  /* OperatorWord */
+  .ow {
+    color: #f92672;
+  }
+
+  /* Punctuation */
+  .p {
+  }
+
+  /* Comment */
+  .c {
+    color: #75715e;
+  }
+
+  /* CommentHashbang */
+  .ch {
+    color: #75715e;
+  }
+
+  /* CommentMultiline */
+  .cm {
+    color: #75715e;
+  }
+
+  /* CommentSingle */
+  .c1 {
+    color: #75715e;
+  }
+
+  /* CommentSpecial */
+  .cs {
+    color: #75715e;
+  }
+
+  /* CommentPreproc */
+  .cp {
+    color: #75715e;
+  }
+
+  /* CommentPreprocFile */
+  .cpf {
+    color: #75715e;
+  }
+
+  /* Generic */
+  .g {
+  }
+
+  /* GenericDeleted */
+  .gd {
+    color: #f92672;
+  }
+
+  /* GenericEmph */
+  .ge {
+    font-style: italic;
+  }
+
+  /* GenericError */
+  .gr {
+  }
+
+  /* GenericHeading */
+  .gh {
+  }
+
+  /* GenericInserted */
+  .gi {
+    color: #a6e22e;
+  }
+
+  /* GenericOutput */
+  .go {
+  }
+
+  /* GenericPrompt */
+  .gp {
+  }
+
+  /* GenericStrong */
+  .gs {
+    font-weight: bold;
+  }
+
+  /* GenericSubheading */
+  .gu {
+    color: #75715e;
+  }
+
+  /* GenericTraceback */
+  .gt {
+  }
+
+  /* GenericUnderline */
+  .gl {
+  }
+
+  /* TextWhitespace */
+  .w {
+  }
+}

themes/maik-blog/layouts/partials/head.html

@@ -13,6 +13,10 @@
 {{- $style := resources.Get "scss/main.scss" | resources.ToCSS $options | resources.Fingerprint }}
 <link rel="stylesheet" href="{{ $style.Permalink }}">
 
+{{ $options := (dict "targetPath" "syntax_highlighting.css" "outputStyle" "compressed" "enableSourceMap" true) }}
+{{- $style := resources.Get "scss/syntax_highlighting.scss" | resources.ToCSS $options | resources.Fingerprint }}
+<link rel="stylesheet" href="{{ $style.Permalink }}">
+
 {{- range $val := $.Site.Params.customCSS }}
 {{- if gt (len $val) 0 }}
 <link rel="stylesheet" type="text/css" href="{{ $val }}">