feat: Added code syntax highlighting for use in articles

Author: ripixel

assets/styles/syntax_highlight.css

@@ -0,0 +1,76 @@
+/*
+
+Darcula color scheme from the JetBrains family of IDEs
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+  background: #2b2b2b;
+  color: #bababa;
+  margin-bottom: 20px;
+  margin-left: 10px;
+  font-family: "Inconsolata", monospace;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+  color: #a8a8a2;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-link,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal {
+  color: #6896ba;
+}
+
+.hljs-code,
+.hljs-selector-class {
+  color: #a6e22e;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-attribute,
+.hljs-name,
+.hljs-variable {
+  color: #cb7832;
+}
+
+.hljs-params {
+  color: #b9b9b9;
+}
+
+.hljs-string {
+  color: #6a8759;
+}
+
+.hljs-subst,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-symbol,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition {
+  color: #e0c46c;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-meta {
+  color: #7f7f7f;
+}

package-lock.json

@@ -36,6 +36,7 @@
         "firebase-tools": "^8.2.0",
         "nodemon": "^2.0.3",
         "showdown": "^1.9.1",
+        "showdown-highlight": "^2.1.4",
         "standard-version": "^8.0.0",
         "ts-node": "^8.10.1",
         "typescript": "^3.8.3",

package.json

@@ -1,5 +1,6 @@
 import * as fs from "fs";
 import showdown from "showdown";
+import showdownHighlight from "showdown-highlight";
 import { format as dateFormat } from "date-fns";
 
 import findInDir from "./findInDir";
@@ -28,7 +29,9 @@ templates.forEach((template) => {
 console.log(`Processing articles`);
 const articles = findInDir("./thoughts/articles", ".md");
 
-const mdConverter = new showdown.Converter();
+const mdConverter = new showdown.Converter({
+  extensions: [showdownHighlight],
+});
 
 const articlesGenerated: Array<{
   title: string;

scripts/generateThoughts.ts

@@ -37,7 +37,7 @@
   {meta.html}
 
   <link
-    href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Fredoka+One&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Fredoka+One&family=Inconsolata:wght@300&display=swap"
     rel="stylesheet"
   />