add line numbers for code blocks

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

src/Layouts/Blog.elm

@@ -73,7 +73,7 @@ view : { fromMsg : Msg -> mainMsg, content : View mainMsg, model : Model } -> Vi
 view { fromMsg, model, content } =
     { title = content.title
     , body =
-        [ Html.div [ class "min-h-screen flex flex-col justify-center relative overflow-hidden " ]
+        [ Html.div [ class "min-h-screen flex flex-col justify-center relative overflow-hidden" ]
             [ Html.div [ class "relative w-full bg-neutral  md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pb-28" ]
                 [ Html.article [ class blogTheme ]
                     content.body

src/Pages/Posts/Category_/Post_.elm

@@ -186,6 +186,7 @@ articleNode data fragment title description =
         , Html.Attributes.attribute "fragment" fragment
         , Html.Attributes.attribute "title" title
         , Html.Attributes.attribute "description" description
+        , class "line-numbers"
         ]
         []
 

src/input.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 /* PrismJS 1.29.0
-https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */
+https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+bash+basic+brainfuck+c+cpp+cmake+diff+docker+elm+git+go+go-module+graphql+haskell+http+java+json+json5+jsonp+makefile+markdown+matlab+mermaid+powershell+protobuf+python+rest+rust+shell-session+sql+toml+typescript+vim+wasm+yaml&plugins=line-numbers+toolbar+match-braces+diff-highlight */
 code[class*=language-],
 pre[class*=language-] {
     color: #f8f8f2;
@@ -35,7 +35,7 @@ pre[class*=language-] {
 
 :not(pre)>code[class*=language-],
 pre[class*=language-] {
-    background: #272822
+    background: #0b0b0b
 }
 
 :not(pre)>code[class*=language-] {
@@ -117,4 +117,154 @@ pre[class*=language-] {
 
 .token.entity {
     cursor: help
+}
+
+pre[class*=language-].line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber
+}
+
+pre[class*=language-].line-numbers>code {
+    position: relative;
+    white-space: inherit
+}
+
+.line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em;
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+
+.line-numbers-rows>span {
+    display: block;
+    counter-increment: linenumber
+}
+
+.line-numbers-rows>span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: .8em;
+    text-align: right
+}
+
+div.code-toolbar {
+    position: relative
+}
+
+div.code-toolbar>.toolbar {
+    position: absolute;
+    z-index: 10;
+    top: .3em;
+    right: .2em;
+    transition: opacity .3s ease-in-out;
+    opacity: 0
+}
+
+div.code-toolbar:hover>.toolbar {
+    opacity: 1
+}
+
+div.code-toolbar:focus-within>.toolbar {
+    opacity: 1
+}
+
+div.code-toolbar>.toolbar>.toolbar-item {
+    display: inline-block
+}
+
+div.code-toolbar>.toolbar>.toolbar-item>a {
+    cursor: pointer
+}
+
+div.code-toolbar>.toolbar>.toolbar-item>button {
+    background: 0 0;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none
+}
+
+div.code-toolbar>.toolbar>.toolbar-item>a,
+div.code-toolbar>.toolbar>.toolbar-item>button,
+div.code-toolbar>.toolbar>.toolbar-item>span {
+    color: #bbb;
+    font-size: .8em;
+    padding: 0 .5em;
+    background: #f5f2f0;
+    background: rgba(224, 224, 224, .2);
+    box-shadow: 0 2px 0 0 rgba(0, 0, 0, .2);
+    border-radius: .5em
+}
+
+div.code-toolbar>.toolbar>.toolbar-item>a:focus,
+div.code-toolbar>.toolbar>.toolbar-item>a:hover,
+div.code-toolbar>.toolbar>.toolbar-item>button:focus,
+div.code-toolbar>.toolbar>.toolbar-item>button:hover,
+div.code-toolbar>.toolbar>.toolbar-item>span:focus,
+div.code-toolbar>.toolbar>.toolbar-item>span:hover {
+    color: inherit;
+    text-decoration: none
+}
+
+.token.punctuation.brace-hover,
+.token.punctuation.brace-selected {
+    outline: solid 1px
+}
+
+.rainbow-braces .token.punctuation.brace-level-1,
+.rainbow-braces .token.punctuation.brace-level-5,
+.rainbow-braces .token.punctuation.brace-level-9 {
+    color: #e50;
+    opacity: 1
+}
+
+.rainbow-braces .token.punctuation.brace-level-10,
+.rainbow-braces .token.punctuation.brace-level-2,
+.rainbow-braces .token.punctuation.brace-level-6 {
+    color: #0b3;
+    opacity: 1
+}
+
+.rainbow-braces .token.punctuation.brace-level-11,
+.rainbow-braces .token.punctuation.brace-level-3,
+.rainbow-braces .token.punctuation.brace-level-7 {
+    color: #26f;
+    opacity: 1
+}
+
+.rainbow-braces .token.punctuation.brace-level-12,
+.rainbow-braces .token.punctuation.brace-level-4,
+.rainbow-braces .token.punctuation.brace-level-8 {
+    color: #e0e;
+    opacity: 1
+}
+
+pre.diff-highlight>code .token.deleted:not(.prefix),
+pre>code.diff-highlight .token.deleted:not(.prefix) {
+    background-color: rgba(255, 0, 0, .1);
+    color: inherit;
+    display: block
+}
+
+pre.diff-highlight>code .token.inserted:not(.prefix),
+pre>code.diff-highlight .token.inserted:not(.prefix) {
+    background-color: rgba(0, 255, 128, .1);
+    color: inherit;
+    display: block
 }

src/web-components/Calcom.js

@@ -49,7 +49,7 @@ customElements.define(
         },
         hideEventTypeDetails: false,
       });
-      console.log("These errors are not produced by the Elm app :)")
+      console.log("These errors are not produced by the Elm app :)");
     }
   }
 );

src/web-components/MarkedRender.js

@@ -10,14 +10,64 @@ customElements.define(
     }
 
     updateMeta(title, description) {
-      document.querySelector('meta[name="title"]').setAttribute("content", title + " | Avinal Kumar | Personal Website");
-      document.querySelector('meta[name="description"]').setAttribute("content", description);
-      document.querySelector('meta[property="og:title"]').setAttribute("content", title + " | Avinal Kumar | Personal Website");
-      document.querySelector('meta[property="og:description"]').setAttribute("content", description);
-      document.querySelector('meta[property="og:url"]').setAttribute("content", window.location);
-      document.querySelector('meta[property="twitter:title"]').setAttribute("content", title + " | Avinal Kumar | Personal Website");
-      document.querySelector('meta[property="twitter:description"]').setAttribute("content", description);
-      document.querySelector('meta[property="twitter:url"]').setAttribute("content", window.location);
+      document
+        .querySelector('meta[name="title"]')
+        .setAttribute("content", title + " | Avinal Kumar | Personal Website");
+      document
+        .querySelector('meta[name="description"]')
+        .setAttribute("content", description);
+      document
+        .querySelector('meta[property="og:title"]')
+        .setAttribute("content", title + " | Avinal Kumar | Personal Website");
+      document
+        .querySelector('meta[property="og:description"]')
+        .setAttribute("content", description);
+      document
+        .querySelector('meta[property="og:url"]')
+        .setAttribute("content", window.location);
+      document
+        .querySelector('meta[property="twitter:title"]')
+        .setAttribute("content", title + " | Avinal Kumar | Personal Website");
+      document
+        .querySelector('meta[property="twitter:description"]')
+        .setAttribute("content", description);
+      document
+        .querySelector('meta[property="twitter:url"]')
+        .setAttribute("content", window.location);
+    }
+
+    addLineNumber() {
+      var env = {
+        container: document,
+        selector:
+          'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code',
+      };
+
+      env.elements = Array.prototype.slice.apply(
+        env.container.querySelectorAll(env.selector)
+      );
+
+      for (var i = 0, element; (element = env.elements[i++]); ) {
+        highlightElement(element);
+      }
+      function highlightElement(element) {
+        var language = Prism.util.getLanguage(element);
+
+        var grammar = Prism.languages[language];
+
+        var parent = element.parentElement;
+        if (parent && parent.nodeName.toLowerCase() === "pre") {
+          Prism.util.setLanguage(parent, language);
+        }
+        var code = element.textContent;
+        var env = {
+          element: element,
+          language: language,
+          grammar: grammar,
+          code: code,
+        };
+        Prism.hooks.run("complete", env);
+      }
     }
 
     runMarked() {
@@ -83,8 +133,12 @@ customElements.define(
 
       this.innerHTML = marked.parse(data);
       console.log("Markdown rendering complete!");
+      this.addLineNumber();
+
       if (fragment) {
-        console.log(`Fragment found, scrolling to: ${window.location}#${fragment}`);
+        console.log(
+          `Fragment found, scrolling to: ${window.location}#${fragment}`
+        );
         window.location = "#" + fragment;
       }
     }