diff --git a/config.toml b/config.toml
index a0102e6..1a933a7 100644
--- a/config.toml
+++ b/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"
diff --git a/themes/maik-blog/assets/scss/syntax_highlighting.scss b/themes/maik-blog/assets/scss/syntax_highlighting.scss
new file mode 100644
index 0000000..50b8b86
--- /dev/null
+++ b/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 {
+ }
+}
diff --git a/themes/maik-blog/layouts/partials/head.html b/themes/maik-blog/layouts/partials/head.html
index d62d27f..2252d14 100644
--- a/themes/maik-blog/layouts/partials/head.html
+++ b/themes/maik-blog/layouts/partials/head.html
@@ -13,6 +13,10 @@
{{- $style := resources.Get "scss/main.scss" | resources.ToCSS $options | resources.Fingerprint }}
+{{ $options := (dict "targetPath" "syntax_highlighting.css" "outputStyle" "compressed" "enableSourceMap" true) }}
+{{- $style := resources.Get "scss/syntax_highlighting.scss" | resources.ToCSS $options | resources.Fingerprint }}
+
+
{{- range $val := $.Site.Params.customCSS }}
{{- if gt (len $val) 0 }}