web: add imports and styles for codejar

web/demo/index.njk

@@ -6,7 +6,9 @@
     <link href="/app/main.css" rel="stylesheet"></link>
     <link rel="icon" href="/icon.png" type="image/x-icon" />
     <link rel="manifest" href="/app/main.webmanifest" />
-    <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Source+Code+Pro&display=swap" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/railscasts.min.css" rel="stylesheet" />
     <script src="/vnd/mithril-2.0.3.min.js"></script>
     <script src="/vnd/minisearch-6.0.1.min.js"></script>
     <script src="/analytics.js"></script>
@@ -19,6 +21,10 @@
     <script type="module">
       import { Editor } from "/vnd/codemirror-6.0.1.min.js";
       window.Editor = Editor;
+      
+      import { CodeJar } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
+      window.CodeJar = CodeJar;
+
       window.backend = {{ backend | safe }};
     </script>
     <script src="/app/main.js" type="module"></script>

web/static/app/main.css

@@ -663,4 +663,24 @@ the top nav in a more elegant way at some point*/
   .menu li {
     padding: var(--padding);
   }
+}
+
+/*------------CODE EDITOR------------*/
+
+.code-editor {
+  border-radius: 6px;
+  font-family: 'Source Code Pro', monospace;
+  font-size: 14px;
+  font-weight: 400;
+  height: 340px;
+  letter-spacing: normal;
+  line-height: 20px;
+  padding: 10px;
+  resize: none !important;
+  tab-size: 4;
+  margin-left: -0.5rem;
+}
+
+.code-editor.hljs {
+  padding: 10px;
 }