Use external font
parent
6c1448774c
commit
ec5630a040
16
index.html
16
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
|
||||
"></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" />
|
||||
|
|
|
|||
17
index.js
17
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 `<iframe width="100%" height="${height}" frameborder="0" src="${url}"></iframe>`;
|
||||
}
|
||||
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();
|
||||
|
|
|
|||
19
style.css
19
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue