M index.html → index.html

@@ -12,18 +12,22 @@ <script src="https://cdn.jsdelivr.net/combine/
 npm/lzma@2.3.2/src/lzma.min.js,
 npm/slim-select@1.25.0/dist/slimselect.min.js,
 npm/clipboard@2/dist/clipboard.min.js,
-npm/codemirror@5.51.0/lib/codemirror.min.js,
-npm/codemirror@5.51.0/addon/mode/overlay.min.js,
-npm/codemirror@5.51.0/addon/mode/loadmode.min.js,
-npm/codemirror@5.51.0/mode/meta.min.js
+npm/codemirror@5.52.0,
+npm/codemirror@5.52.0/addon/mode/loadmode.min.js,
+npm/codemirror@5.52.0/addon/mode/overlay.min.js,
+npm/codemirror@5.52.0/addon/mode/multiplex.min.js,
+npm/codemirror@5.52.0/addon/mode/simple.min.js,
+npm/codemirror@5.52.0/addon/scroll/simplescrollbars.js,
+npm/codemirror@5.52.0/mode/meta.min.js
 "></script>
         <link
             rel="stylesheet"
             type="text/css"
             href="https://cdn.jsdelivr.net/combine/
 npm/slim-select@1.25.0/dist/slimselect.min.css,
-npm/codemirror@5.51.0/lib/codemirror.min.css,
-npm/codemirror@5.51.0/theme/dracula.min.css
+npm/codemirror@5.52.0/lib/codemirror.min.css,
+npm/codemirror@5.52.0/addon/scroll/simplescrollbars.css,
+npm/codemirror@5.52.0/theme/dracula.min.css
 "
         />
         <link rel="stylesheet" href="style.css" />

M index.js → index.js

@@ -14,11 +14,12 @@ };
 
 const initCodeEditor = () => {
     const readOnly = new URLSearchParams(window.location.search).has('readonly');
-    CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.51.0/mode/%N/%N.js';
+    CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.52.0/mode/%N/%N.js';
     editor = new CodeMirror(document.getElementById('editor'), {
         lineNumbers: true,
         theme: 'dracula',
-        readOnly: readOnly
+        readOnly: readOnly,
+        scrollbarStyle: 'simple'
     });
     if (readOnly) {
         document.body.classList.add('readonly');
@@ -110,7 +111,7 @@ if (mode === 'markdown') {
         return `[paste](${url})`;
     }
     if (mode === 'iframe') {
-        const height = document.getElementsByClassName('CodeMirror-sizer')[0].scrollHeight;
+        const height = document.getElementsByClassName('CodeMirror-sizer')[0].clientHeight + 8;
         return `<iframe width="100%" height="${height}" frameborder="0" src="${url}"></iframe>`;
     }
     return url;
@@ -172,5 +173,15 @@ .replace(/\s+/g, '-')
         .replace(/\+/g, '-p')
         .replace(/#/g, '-sharp')
         .replace(/[^\w\-]+/g, '');
+
+/* Only for tests purposes */
+const testAllModes = () => {
+    for (const [index, language] of Object.entries(CodeMirror.modeInfo)) {
+        setTimeout(() => {
+            console.info(language.name);
+            select.set(slugify(language.name));
+        }, 1000 * index);
+    }
+};
 
 init();

M style.css → style.css

@@ -19,7 +19,8 @@ }
 
 .CodeMirror {
     height: 100%;
-    font-size: 13px;
+    font-size: 14px;
+    font-family: JetBrainsMono, sans-serif;
 }
 
 #footer,
@@ -47,6 +48,11 @@ background: #ff79c6;
     z-index: 5;
     width: 0;
 }
+
+#copy-link {
+    font-family: JetBrainsMono, sans-serif;
+}
+
 .grow {
     flex-grow: 1;
 }
@@ -96,3 +102,14 @@ }
 .ss-content .ss-disabled {
     background-color: #3b3b47 !important;
 }
+
+/* Fonts */
+@font-face {
+    font-family: 'JetBrainsMono';
+    src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2')
+            format('woff2'),
+        url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff'),
+        url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}