@@ -0,0 +1,328 @@ 
+ pre {
+     color: #e6edf3;
+     background-color: #0d1117;
+ }
+
+ .chroma {
+     color: #e6edf3;
+     background-color: #0d1117;
+ }
+
+ .chroma .err {
+     color: #f85149
+ }
+
+ .chroma .lnlinks {
+     outline: none;
+     text-decoration: none;
+     color: inherit
+ }
+
+ .chroma .lntd {
+     vertical-align: top;
+     padding: 0;
+     margin: 0;
+     border: 0;
+ }
+
+ .chroma .lntable {
+     border-spacing: 0;
+     padding: 0;
+     margin: 0;
+     border: 0;
+ }
+
+ .chroma .hl {
+     background-color: #6e7681
+ }
+
+ .chroma .lnt {
+     white-space: pre;
+     -webkit-user-select: none;
+     user-select: none;
+     margin-right: 0.4em;
+     padding: 0 0.4em 0 0.4em;
+     color: #737679
+ }
+
+ .chroma .ln {
+     white-space: pre;
+     -webkit-user-select: none;
+     user-select: none;
+     margin-right: 0.4em;
+     padding: 0 0.4em 0 0.4em;
+     color: #6e7681
+ }
+
+ .chroma .line {
+     display: flex;
+ }
+
+ .chroma .k {
+     color: #ff7b72
+ }
+
+ .chroma .kc {
+     color: #79c0ff
+ }
+
+ .chroma .kd {
+     color: #ff7b72
+ }
+
+ .chroma .kn {
+     color: #ff7b72
+ }
+
+ .chroma .kp {
+     color: #79c0ff
+ }
+
+ .chroma .kr {
+     color: #ff7b72
+ }
+
+ .chroma .kt {
+     color: #ff7b72
+ }
+
+ .chroma .nc {
+     color: #f0883e;
+     font-weight: bold
+ }
+
+ .chroma .no {
+     color: #79c0ff;
+     font-weight: bold
+ }
+
+ .chroma .nd {
+     color: #d2a8ff;
+     font-weight: bold
+ }
+
+ .chroma .ni {
+     color: #ffa657
+ }
+
+ .chroma .ne {
+     color: #f0883e;
+     font-weight: bold
+ }
+
+ .chroma .nf {
+     color: #d2a8ff;
+     font-weight: bold
+ }
+
+ .chroma .nl {
+     color: #79c0ff;
+     font-weight: bold
+ }
+
+ .chroma .nn {
+     color: #ff7b72
+ }
+
+ .chroma .py {
+     color: #79c0ff
+ }
+
+ .chroma .nt {
+     color: #7ee787
+ }
+
+ .chroma .nv {
+     color: #79c0ff
+ }
+
+ .chroma .l {
+     color: #a5d6ff
+ }
+
+ .chroma .ld {
+     color: #79c0ff
+ }
+
+ .chroma .s {
+     color: #a5d6ff
+ }
+
+ .chroma .sa {
+     color: #79c0ff
+ }
+
+ .chroma .sb {
+     color: #a5d6ff
+ }
+
+ .chroma .sc {
+     color: #a5d6ff
+ }
+
+ .chroma .dl {
+     color: #79c0ff
+ }
+
+ .chroma .sd {
+     color: #a5d6ff
+ }
+
+ .chroma .s2 {
+     color: #a5d6ff
+ }
+
+ .chroma .se {
+     color: #79c0ff
+ }
+
+ .chroma .sh {
+     color: #79c0ff
+ }
+
+ .chroma .si {
+     color: #a5d6ff
+ }
+
+ .chroma .sx {
+     color: #a5d6ff
+ }
+
+ .chroma .sr {
+     color: #79c0ff
+ }
+
+ .chroma .s1 {
+     color: #a5d6ff
+ }
+
+ .chroma .ss {
+     color: #a5d6ff
+ }
+
+ .chroma .m {
+     color: #a5d6ff
+ }
+
+ .chroma .mb {
+     color: #a5d6ff
+ }
+
+ .chroma .mf {
+     color: #a5d6ff
+ }
+
+ .chroma .mh {
+     color: #a5d6ff
+ }
+
+ .chroma .mi {
+     color: #a5d6ff
+ }
+
+ .chroma .il {
+     color: #a5d6ff
+ }
+
+ .chroma .mo {
+     color: #a5d6ff
+ }
+
+ .chroma .o {
+     color: #ff7b72;
+     font-weight: bold
+ }
+
+ .chroma .ow {
+     color: #ff7b72;
+     font-weight: bold
+ }
+
+ .chroma .c {
+     color: #8b949e;
+     font-style: italic
+ }
+
+ .chroma .ch {
+     color: #8b949e;
+     font-style: italic
+ }
+
+ .chroma .cm {
+     color: #8b949e;
+     font-style: italic
+ }
+
+ .chroma .c1 {
+     color: #8b949e;
+     font-style: italic
+ }
+
+ .chroma .cs {
+     color: #8b949e;
+     font-weight: bold;
+     font-style: italic
+ }
+
+ .chroma .cp {
+     color: #8b949e;
+     font-weight: bold;
+     font-style: italic
+ }
+
+ .chroma .cpf {
+     color: #8b949e;
+     font-weight: bold;
+     font-style: italic
+ }
+
+ .chroma .gd {
+     color: #ffa198;
+     background-color: #490202
+ }
+
+ .chroma .ge {
+     font-style: italic
+ }
+
+ .chroma .gr {
+     color: #ffa198
+ }
+
+ .chroma .gh {
+     color: #79c0ff;
+     font-weight: bold
+ }
+
+ .chroma .gi {
+     color: #56d364;
+     background-color: #0f5323
+ }
+
+ .chroma .go {
+     color: #8b949e
+ }
+
+ .chroma .gp {
+     color: #8b949e
+ }
+
+ .chroma .gs {
+     font-weight: bold
+ }
+
+ .chroma .gu {
+     color: #79c0ff
+ }
+
+ .chroma .gt {
+     color: #ff7b72
+ }
+
+ .chroma .gl {
+     text-decoration: underline
+ }
+
+ .chroma .w {
+     color: #6e7681
+ }

@@ -30,7 +30,6 @@ @font-face {
     font-family: "JetBrains Mono";
     src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
     font-weight: 400;
-    -webkit-font-feature-settings: "liga" on, "calt" on;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     font-variant-ligatures: normal;

@@ -140,7 +140,7 @@ }
 
 body {
     font-family: 'Noway', sans-serif;
-    font-feature-settings: "liga", "clig", "onum", "frac", "kern";
+    font-feature-settings: "liga", "clig", "kern";
     hyphens: auto;
     font-weight: 300;
     margin: auto;
@@ -577,16 +577,17 @@ }
 
 code,
 pre {
-    background-color: var(--secondary-background);
+    /*background-color: var(--secondary-background);*/
     font-size: 0.8rem;
 }
 
-pre code,
 img {
     border: 1px solid var(--secondary-background);
 }
 
 pre {
+    border-radius: 4px;
+    white-space: pre-wrap;
     padding: 1rem;
 }
 

@@ -109,7 +109,7 @@ text "<code[^>]*>([\s\S]+?)</code>" (
       :match
       match 1 get escape :code
       cmd (code) =% run /output :out
-      "<code>$#</code>" (out) =%
+      "<code class=\"chroma\">$#</code>" (out) =%
     ) replace-apply @result
 
   )
@@ -217,7 +217,7 @@ ) ^process-css-asset
 
 ;;;;; MAIN ;;;;;
 
-;#|
+#|
 ; Process all contents
 contents (
   :content

@@ -11,5 +11,6 @@ <link rel="shortcut icon" href="/favicon.png" type="image/png">
 		<meta content="44.388041;9.073248" name="ICBM">
 		<link rel="stylesheet" type="text/css" href="/styles/fonts.css" />
 		<link rel="stylesheet" type="text/css" href="/styles/flexboxgrid.css">
+		<link rel="stylesheet" type="text/css" href="/styles/chroma.css" />
 		<link rel="stylesheet" type="text/css" href="/styles/style.css">
 	</head>