pretty.html: add aez, line numbers, default font

Should look a lot cleaner now.

Signed-off-by: Gunwant Jain <mail@wantguns.dev>

templates/pretty.html.tera

@@ -6,21 +6,60 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title }}</title>
 
-        <style>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@4/distr/fira_code.css">
+
+    <style>
 
             /* Use Ayu-Colors by default */
             .hljs{display:block;overflow-x:auto;background:#191f26;color:#e6e1cf;padding:.5em}.hljs-comment,.hljs-quote{color:#5c6773;font-style:italic}.hljs-attr,.hljs-attribute,.hljs-link,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#f73}.hljs-builtin-name,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#fe9}.hljs-bullet,.hljs-string{color:#b8cc52}.hljs-built_in,.hljs-section,.hljs-title{color:#ffb454}.hljs-keyword,.hljs-selector-tag,.hljs-symbol{color:#f73}.hljs-name{color:#36a3d9}.hljs-tag{color:#00568d}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-addition{color:#91b362}.hljs-deletion{color:#d96c75}
         
             /* fill entire page */
             code {
-                background: #fff;
-                position: fixed;
-                width: 100%;
-                bottom: 0;
-                right: 0;
-                left: 0;
-                top: 0;
+                padding: 0px;
+                background: transparent !important;
+                font-family: 'Fira Code', monospace;
             }
+
+            body {
+                /* Change background color to that of your theme's */
+                background: #191f26;
+                padding: 20px 50px;
+                margin: 0px;
+            }
+            
+                /* for block of numbers */
+            .hljs-ln-numbers {
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                -khtml-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+
+                text-align: centre;
+                /* Change color to that of your theme's comment color */
+                color: #5c6773;
+                border-right: 20px solid transparent;
+                vertical-align: top;
+            }
+
+
+            /* for block of code */
+            .hljs-ln-code {
+                padding-left: 10px;
+            }
+
+            /* remove scrollbar */
+            html {
+                overflow: scroll;
+                overflow-x: hidden;
+                scrollbar-width: none;
+            }
+            ::-webkit-scrollbar {
+                width: 0px;
+                background: transparent;
+            }
+
         </style>
 
         <!-- Bring your own theme -->
@@ -35,8 +74,10 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"
         integrity="sha512-DrpaExP2d7RJqNhXB41Q/zzzQrtb6J0zfnXD5XeVEWE8d9Hj54irCLj6dRS3eNepPja7DvKcV+9PnHC7A/g83A=="
         crossorigin="anonymous"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
 <script>
     hljs.initHighlightingOnLoad();
+    hljs.initLineNumbersOnLoad();
 </script>
 </body>