Improve styling of multiline code blocks

Author: jeppester

styles/content.scss

@@ -52,6 +52,15 @@
   color: $code;
   font-family: 'Roboto Mono', monospace;
   font-weight: 400;
+
+  .highlighted {
+    color: $code-light;
+    background:$code-light-background;
+    border-radius: 2px;
+    padding: 1rem;
+    box-shadow: inset 0px 0px 2rem rgba(0, 0, 0, 0.3), 0px 0.4rem 1rem rgba(0, 0, 0, 0.2);
+    overflow-x: auto;
+  }
 }
 
 .content img {

styles/variables.scss

@@ -2,6 +2,8 @@ $light-background: hsl(0, 100%, 99%);
 $light-foreground: hsl(0, 79%, 15%);
 $light-foreground-2: hsl(99, 42%, 15%);
 $code: hsl(22, 98%, 18%);
+$code-light: hsl(22, 70%, 90%);
+$code-light-background: hsl(22, 35%, 22%);
 
 $dark-background: hsl(100, 47%, 25%);
 $dark-foreground: hsl(200, 45%, 98%);

util/renderMarkdown.mjs

@@ -5,15 +5,22 @@ import hljs from 'highlight.js'
 const markdown = new remarkable({
   linkTarget: '_blank',
   highlight: function (str, lang) {
+    let result = ''
+
     if (lang && hljs.getLanguage(lang)) {
       try {
-        return hljs.highlight(lang, str).value;
+        result = hljs.highlight(lang, str).value;
+      } catch (err) {}
+    }
+    else {
+      try {
+        result = hljs.highlightAuto(str).value;
       } catch (err) {}
     }
 
-    try {
-      return hljs.highlightAuto(str).value;
-    } catch (err) {}
+    if (result) {
+      return `<div class="highlighted">${result}</div>`
+    }
 
     return ''; // use external default escaping
   }