diff --git a/index.html b/index.html index c8a36f2..a0ff99b 100644 --- a/index.html +++ b/index.html @@ -12,18 +12,22 @@ 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 "> diff --git a/index.js b/index.js index 0028c0e..f8178f0 100644 --- a/index.js +++ b/index.js @@ -14,11 +14,12 @@ const init = () => { 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 @@ const buildUrl = (rawData, mode) => { return `[paste](${url})`; } if (mode === 'iframe') { - const height = document.getElementsByClassName('CodeMirror-sizer')[0].scrollHeight; + const height = document.getElementsByClassName('CodeMirror-sizer')[0].clientHeight + 8; return ``; } return url; @@ -173,4 +174,14 @@ const slugify = str => .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(); diff --git a/style.css b/style.css index ce248b7..d4f13cb 100644 --- a/style.css +++ b/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 @@ z-index: 5; width: 0; } + +#copy-link { + font-family: JetBrainsMono, sans-serif; +} + .grow { flex-grow: 1; } @@ -96,3 +102,14 @@ button:hover { .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; +}