Full compile-time code highlighting

.woodpecker.yml

@@ -3,8 +3,11 @@ steps:
     image: journal
     environment:
       BASE_URL: https://compute.nations.lol
+      CODE_THEME: emacs
+      HELIX_RUNTIME: /usr/lib/helix/runtime
     commands:
       - bruin-journal-gen
     volumes:
       - /var/woodpecker:/var/woodpecker
       - /usr/share/fonts:/usr/share/fonts
+      - /usr/lib/helix/runtime/:/usr/lib/helix/runtime/

templates/article.html

@@ -39,13 +39,15 @@
   <link href="{{base_url}}/css/normalize.css" rel="stylesheet" type="text/css">
   <link href="{{base_url}}/css/webflow.css" rel="stylesheet" type="text/css">
   <link href="{{base_url}}/css/compute-c23f91.webflow.css" rel="stylesheet" type="text/css">
+  <link href="{{base_url}}/css/code-theme.css" rel="stylesheet" type="text/css">
   <script
     type="text/javascript">!function (o, c) {var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")}(window, document);</script>
   <link href="{{base_url}}/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
   <link href="{{base_url}}/images/webclip.png" rel="apple-touch-icon">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap"
+  <link
+    href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Fira+Code:wght@300..700&display=swap"
     rel="stylesheet">
 </head>
 

templates/assets

@@ -1 +1 @@
-../assets
+../assets/

templates/css/code-theme.css

@@ -0,0 +1,272 @@
+.content code .a {
+	color: #483D8B;
+}
+.content code .b {
+	color: #B22222;
+}
+.content code .c {
+	color: #008B8B;
+}
+.content code .d {
+	color: #483D8B;
+}
+.content code .e {
+	color: #228B22;
+}
+.content code .f {
+	text-decoration-color: #FF0000;
+	text-decoration: underline wavy;
+}
+.content code .g {
+	text-decoration-color: #008B8B;
+	text-decoration: underline wavy;
+}
+.content code .h {
+	text-decoration-color: #228B22;
+	text-decoration: underline wavy;
+}
+.content code .i {
+	text-decoration-color: #FF8C00;
+	text-decoration: underline wavy;
+}
+.content code .j {
+	color: #EE9A00;
+}
+.content code .k {
+	color: #EE0000;
+}
+.content code .l {
+	color: #00CD00;
+}
+.content code .m {
+	color: #FF0000;
+}
+.content code .n {
+	color: #0000FF;
+}
+.content code .o {
+	color: #483D8B;
+}
+.content code .p {
+	color: #0000FF;
+}
+.content code .q {
+	color: #483D8B;
+}
+.content code .r {
+	color: #483D8B;
+}
+.content code .s {
+	color: #008B8B;
+}
+.content code .t {
+	color: #228B22;
+}
+.content code .u {
+	color: #A020F0;
+}
+.content code .v {
+	color: #483D8B;
+}
+.content code .w {
+	font-weight: bold;
+}
+.content code .x {
+	color: #FFD700;
+	font-weight: bold;
+}
+.content code .y {
+	color: #0000FF;
+}
+.content code .z {
+	color: #A0522D;
+}
+.content code .aa {
+	color: #A020F0;
+}
+.content code .ab {
+	color: #B22222;
+}
+.content code .ac {
+	color: #228B22;
+}
+.content code .ad {
+	color: #008B8B;
+}
+.content code .ae {
+	color: #999999;
+}
+.content code .af {
+	font-style: italic;
+}
+.content code .ag {
+	color: #3A5FCD;
+}
+.content code .ah {
+	color: #3A5FCD;
+	text-decoration: underline;
+}
+.content code .ai {
+	color: #000000;
+}
+.content code .aj {
+	color: #999999;
+}
+.content code .ak {
+	color: #008B8B;
+}
+.content code .al {
+	color: #008B8B;
+}
+.content code .am {
+}
+.content code .an {
+	color: #008B8B;
+}
+.content code .ao {
+	color: #008B8B;
+}
+.content code .ap {
+	color: #A020F0;
+}
+.content code .aq {
+	color: #000000;
+}
+.content code .ar {
+	color: #0000FF;
+}
+.content code .as {
+	color: #8B2252;
+}
+.content code .at {
+	color: #8B2252;
+	font-weight: bold;
+}
+.content code .au {
+	color: #0000FF;
+}
+.content code .av {
+	color: #228B22;
+}
+.content code .aw {
+	color: #483D8B;
+}
+pre {
+	color: #000000;
+	background-color: #FFFFFF;
+}
+.content code .ay {
+	color: #000000;
+	background-color: #FFFFFF;
+}
+.content code .az {
+	color: #5C5C5C;
+	background-color: #E5E5E5;
+	text-decoration: underline;
+}
+.content code .ba {
+	color: #000000;
+	background-color: #FCFCFC;
+}
+.content code .bb {
+	background-color: #BFBFBF;
+}
+.content code .bc {
+	color: #FFFFFF;
+	background-color: #B3B3B3;
+}
+.content code .bd {
+	color: #FF0000;
+	background-color: #000000;
+}
+.content code .be {
+	color: #000000;
+	background-color: #40E0D0;
+}
+.content code .bf {
+	color: #FFFFFF;
+	background-color: #000000;
+}
+.content code .bg {
+	color: #FFFFFF;
+	background-color: #000000;
+}
+.content code .bh {
+	background-color: #B4EEB4;
+}
+.content code .bi {
+	background-color: #B4EEB4;
+}
+.content code .bj {
+	color: #8B0000;
+	background-color: #FFF8DC;
+}
+.content code .bk {
+	color: #999999;
+}
+.content code .bl {
+	color: #CCCCCC;
+}
+.content code .bm {
+	color: #000000;
+	background-color: #FFF8DC;
+}
+.content code .bn {
+	color: #8B0000;
+	background-color: #ADD8E6;
+}
+.content code .bo {
+	color: #000000;
+	background-color: #F7F7F7;
+}
+.content code .bp {
+	color: #000000;
+	background-color: #F7F7F7;
+}
+.content code .bq {
+	background-color: #FFEC8B;
+}
+.content code .br {
+	background-color: #EEDC82;
+}
+.content code .bs {
+	color: #000000;
+	background-color: #BFBFBF;
+}
+.content code .bt {
+	color: #333333;
+	background-color: #E5E5E5;
+}
+.content pre code {
+  border: 1px solid #999;
+  display: block;
+  padding: 20px;
+	color: #000000;
+}
+.content code .bv {
+	color: #000000;
+	background-color: #B4EEB4;
+}
+.content code .bw {
+	color: #BFBFBF;
+}
+.content code .bx {
+	background-color: #F2F2F2;
+}
+.content code .by {
+}
+.content code .bz {
+	color: #000000;
+}
+.content code .ca {
+	color: #A0522D;
+}
+.content code .cb {
+	color: #483D8B;
+}
+.content code .cc {
+	color: #A0522D;
+}
+.content code .cd {
+	color: #FF8C00;
+}

templates/css/compute-c23f91.webflow.css

@@ -8,6 +8,10 @@ body {
   font-family: 'Arimo', sans-serif;
 }
 
+code {
+  font-family: 'Fira Code', monospace;
+}
+
 .w-layout-vflex {
   flex-direction: column;
   align-items: flex-start;