CSS cleanup

_includes/footer.html

@@ -15,6 +15,9 @@
     integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
     crossorigin="anonymous"></script>
 
+<!-- code block tweaks -->
+<script src="/assets/js/highlight-rewrite.js"></script>
+
 {% if page.uses contains "masonry" %}
 <!-- Masonry for card grids -->
 <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

_sass/site/codeblock.scss

@@ -0,0 +1,46 @@
+.highlight pre,
+pre {
+    font-size: 12px;
+    border: 1px #e1e4e8 solid;
+    background-color: #f6f8fa;
+}
+
+div.highlighter-rouge {
+    position: relative;
+}
+
+div.highlighter-rouge::after {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    font-size: 12px;
+    content: attr(data-lang);
+    padding: 0 5px;
+    color: #bbc0c5;
+}
+
+.highlight pre,
+.markdown-body pre {
+    font-size: 12px;
+    border: 1px #e1e4e8 solid;
+    background-color: #f6f8fa;
+}
+
+.highlight {
+    border-radius: 5px;
+    padding: 3px;
+    margin-bottom: 0;
+}
+
+pre code,
+pre tt {
+    display: inline;
+    max-width: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+}

_sass/site/github-syntax.scss

@@ -1,4 +1,4 @@
-.highlight .hll { background-color: #ffffcc }
+.highlight .hll { background-color: #f8f8f8 }
 .highlight .c { color: #999988; font-style: italic } /* Comment */
 .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 .highlight .k { color: #000000; font-weight: bold } /* Keyword */

_sass/site/page.scss

@@ -16,13 +16,6 @@ html {
     margin-top: 6rem;
 }
 
-.highlight {
-    background-color: var(--light-gray);
-    border-radius: 5px;
-    padding: 3px;
-    margin-bottom: 0;
-}
-
 img {
     max-width: 99%;
 }

assets/css/site.scss

@@ -9,4 +9,5 @@
 @import "site/home.scss";
 @import "site/navigation.scss";
 @import "site/page.scss";
-@import "site/kbd.scss";
+@import "site/kbd.scss";
+@import "site/codeblock.scss";

assets/js/highlight-rewrite.js

@@ -0,0 +1,10 @@
+var allCodeBlocks = document.getElementsByClassName("highlighter-rouge");
+
+for (let element of allCodeBlocks) {
+    // Look for lang data
+    element.classList.forEach(clazz => {
+        if (clazz.includes("language-")) {
+            element.dataset.lang = clazz.substring(9);
+        }
+    })
+}