Frontend: Added full code highlight support for markdown. Adjusted Markdown CSS.

frontend/package-lock.json

@@ -12,6 +12,8 @@
         "@jamescoyle/svelte-icon": "^0.1.1",
         "@mdi/js": "^7.3.67",
         "flag-icons": "^7.1.0",
+        "highlight.js": "^11.9.0",
+        "highlightjs-svelte": "^1.0.6",
         "sass": "^1.69.5",
         "simple-icons": "^9.21.0",
         "svelte-markdown": "^0.4.1"
@@ -1167,6 +1169,19 @@
       "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
       "dev": true
     },
+    "node_modules/highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/highlightjs-svelte": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/highlightjs-svelte/-/highlightjs-svelte-1.0.6.tgz",
+      "integrity": "sha512-aXuBPz8df3sOXg90q8rRcBLyxIR8ozPU39a6tJ2rpJUjjd9brRIr55aC0IccW4gsPhQxZ+B3rFugdXsg9/ckDw=="
+    },
     "node_modules/immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",

frontend/package.json

@@ -20,6 +20,8 @@
     "@jamescoyle/svelte-icon": "^0.1.1",
     "@mdi/js": "^7.3.67",
     "flag-icons": "^7.1.0",
+    "highlight.js": "^11.9.0",
+    "highlightjs-svelte": "^1.0.6",
     "sass": "^1.69.5",
     "simple-icons": "^9.21.0",
     "svelte-markdown": "^0.4.1"

frontend/src/lib/components/markdown-highlight.svelte

@@ -0,0 +1,83 @@
+<script>
+  import "$lib/css/markdown.css";
+  import "highlight.js/styles/base16/atelier-estuary-light.min.css";
+
+  import hljs from "highlight.js/lib/core";
+  // Language support static import
+  import javascript from "highlight.js/lib/languages/javascript";
+  import bash from "highlight.js/lib/languages/bash";
+  import csharp from "highlight.js/lib/languages/csharp"
+  import c from "highlight.js/lib/languages/c";
+  import cpp from "highlight.js/lib/languages/cpp";
+  import armasm from "highlight.js/lib/languages/armasm";
+  import arduino from "highlight.js/lib/languages/arduino";
+  import cmake from "highlight.js/lib/languages/cmake";
+  import css from "highlight.js/lib/languages/css";
+  import json from "highlight.js/lib/languages/json";
+  import java from "highlight.js/lib/languages/java";
+  import latex from "highlight.js/lib/languages/latex";
+  import matlab from "highlight.js/lib/languages/matlab";
+  import nginx from "highlight.js/lib/languages/nginx";
+  import php from "highlight.js/lib/languages/php";
+  import python from "highlight.js/lib/languages/python";
+  import rust from "highlight.js/lib/languages/rust";
+  import sql from "highlight.js/lib/languages/sql";
+  import shell from "highlight.js/lib/languages/shell";
+  import vhdl from "highlight.js/lib/languages/vhdl";
+  import xml from "highlight.js/lib/languages/xml";
+  // Addons
+  import svelte from "highlightjs-svelte";
+
+  // Registering all languages
+  hljs.registerLanguage("javascript", javascript);
+  hljs.registerLanguage("bash", bash);
+  hljs.registerLanguage("csharp",csharp);
+  hljs.registerLanguage("c", c);
+  hljs.registerLanguage("cpp", cpp);
+  hljs.registerLanguage("armasm", armasm);
+  hljs.registerLanguage("arduino", arduino);
+  hljs.registerLanguage("cmake", cmake);
+  hljs.registerLanguage("css", css);
+  hljs.registerLanguage("json", json);
+  hljs.registerLanguage("java", java);
+  hljs.registerLanguage("latex", latex);
+  hljs.registerLanguage("matlab", matlab);
+  hljs.registerLanguage("nginx", nginx);
+  hljs.registerLanguage("php", php);
+  hljs.registerLanguage("python", python);
+  hljs.registerLanguage("rust",rust);
+  hljs.registerLanguage("sql",sql);
+  hljs.registerLanguage("shell", shell);
+  hljs.registerLanguage("vhdl", vhdl);
+  hljs.registerLanguage("xml", xml);
+  // Addons
+  svelte(hljs);
+
+  // Exporting values
+  export let lang;
+  export let text;
+  let littleLanguage;
+  let html = text;
+
+  if(hljs.getLanguage(lang) != undefined)
+  {
+    html = hljs.highlight(text, { language: lang }).value;
+  }
+
+  function showLang(visible) {
+    if (visible) littleLanguage.style.visibility = "visible";
+    else littleLanguage.style.visibility = "hidden";
+  }
+</script>
+
+<div
+  class="markdown-codeblock"
+  on:mouseover={() => showLang(true)}
+  on:mouseleave={() => showLang(false)}
+  on:focus={() => true}
+  role="link"
+  tabindex="0"
+>
+  <div class="little-language" bind:this={littleLanguage}>{lang}</div>
+  <pre>{@html html}</pre>
+</div>

frontend/src/lib/components/projects-popup.svelte

@@ -21,6 +21,7 @@
     mdiDownload,
   } from "@mdi/js";
   import SvelteMarkdown from "svelte-markdown";
+  import MarkdownHighlight from "$lib/components/markdown-highlight.svelte";
   import { formatMonth } from "$lib/js/date.js";
 
   // Variables
@@ -65,6 +66,7 @@
       archive_link = data.archive_link;
       application_link = data.application_link;
       filteredTags = filterTag(tags, id);
+
       // Active set to true after the await to avoid conflict when clicking outside while the popup hasn't showed yet.
       setTimeout(() => {
         active = true;
@@ -140,7 +142,10 @@
           <p class="slide-subtitle slide-aftericon">Description</p>
         </div>
         <div class="markdown">
-          <SvelteMarkdown source={description} />
+          <SvelteMarkdown
+            source={description}
+            renderers={{ code: MarkdownHighlight }}
+          />
         </div>
       </div>
       <!-- Links -->
@@ -218,7 +223,10 @@
         <p class="slide-subtitle slide-aftericon">Description</p>
       </div>
       <div class="markdown">
-        <SvelteMarkdown source={description} />
+        <SvelteMarkdown
+          source={description}
+          renderers={{ code: MarkdownHighlight }}
+        />
       </div>
     </div>
   </div>

frontend/src/lib/css/markdown.css

@@ -48,18 +48,36 @@ li {
 }
 
 /* Code Blcoks */
-.markdown pre {
+.markdown-codeblock {
+    position: relative;
+    font-family: 'Sometype Mono', monospace;
+    font-weight: 500;
+    color: var(--color-text);
+}
+
+.markdown-codeblock pre {
     display: block;
     padding: 9.5px;
     margin: 0 0 10px;
     font-size: 13px;
     line-height: 1.42857143;
-    color: var(--color-text);
     word-break: break-all;
     word-wrap: break-word;
     background-color: var(--color-code);
     border-radius: 0.5rem;
     box-shadow: #352b4027 0px 4px 6px -1px, #352b4016 0px 2px 4px -1px;
+    white-space: pre-wrap;
+}
+
+.little-language {
+    color: var(--color-subtext);
+    position: absolute;
+    visibility: hidden;
+    top: 0;
+    right: 0;
+    margin-top: 0.5rem;
+    margin-right: 0.5rem;
+    cursor: default;
 }
 
 .markdown code {
@@ -70,15 +88,6 @@ li {
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 }
 
-.markdown pre>code {
-    font-family: 'Sometype Mono', monospace;
-    font-weight: 500;
-    padding: 0 !important;
-    border-radius: 0 !important;
-    color: var(--color-subtext) !important;
-    box-shadow: none !important;
-}
-
 .markdown blockquote {
     padding: 10px 20px;
     margin: 0 0 20px;