vimarkdown

\n \n \n

\n Download:{\" \"}\n \n MD\n \n

\n Made by Jxnblk. Built with Val Town.\n

\n {preview && (\n

\n setPreview(false)}\n className=\"close\"\n title=\"Close preview\"\n >\n ×\n \n {Object.keys(data).length > 0 && (\n

\n                {JSON.stringify(data, null, 2).slice(2, -2)}\n

\n )}\n \n

\n )}\n \n \n );\n}\n\ntype AppCookies = {\n color?: number;\n font?: string;\n};\nfunction parseCookies(cookies: string) {\n return (cookies || \"\").split(\";\").reduce((acc, n) => {\n const [key, value] = n.split(\"=\").map(s => s.trim());\n const num = parseFloat(value);\n acc[key] = isNaN(num) ? value : num;\n return acc;\n }, {});\n}\n\nfunction setCookie(key: string, value: string) {\n document.cookie = `${key}=${value}`;\n}\n\nexport default render(App, import.meta.url);\n\nconst sanitizeSchema = {\n ...rehypeSanitize.defaultSchema,\n comments: true, // Allow comments\n};\nconst rehypePlugins = [\n [rehypeSanitize, sanitizeSchema],\n];\n\nfunction getDownloadString(text) {\n return `data:text/json;charset=utf-8,${encodeURIComponent(text)}`;\n}\n\nexport function useLocalStorage(key: string, initialValue: T) {\n const [val, setStored] = useState(() => {\n try {\n const item = window.localStorage.getItem(key);\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n console.log(error);\n return initialValue;\n }\n });\n function setVal(value: T): void {\n try {\n setStored(value);\n window.localStorage.setItem(key, JSON.stringify(value));\n } catch (error) {\n console.log(error);\n }\n }\n return [val, setVal];\n}\n\nconst css = `\n* { box-sizing: border-box; }\n:root {\n --color: #000;\n --background: #fff;\n --shadow: rgba(0, 0, 0, 0.025);\n --highlight: #0cf;\n --highlight-50: color-mix(in srgb, var(--highlight) 50%, var(--background));\n --highlight-25: color-mix(in srgb, var(--highlight) 25%, var(--background));\n --highlight-dark: color-mix(in srgb, var(--highlight) 50%, var(--color));\n --color-50: color-mix(in srgb,var(--color) 50%,transparent);\n --color-25: color-mix(in srgb,var(--color) 25%,transparent);\n --color-12: color-mix(in srgb,var(--color) 12%,transparent);\n --color-6: color-mix(in srgb,var(--color) 6%,transparent);\n --font: ${iamono};\n --sans: \"Lexend\", sans-serif;\n}\nbody {\n margin: 0;\n font-family: var(--font);\n font-optical-sizing: auto;\n font-weight: 400;\n font-style: normal;\n line-height: 1.75;\n color: var(--color, black);\n background-color: var(--background, white);\n transition-property: background-color, color;\n transition-duration: 0.5s;\n transition-timing-function: ease-in-out;\n}\nh1 {\n font-size: 18px;\n margin-top: 0;\n margin-bottom: 32px;\n}\n.container {\n max-width: 768px;\n margin-left: auto;\n margin-right: auto;\n height: 100vh;\n}\n.editor {\n height: 100vh;\n transition: transform 0.2s ease-in-out;\n}\n.toolbar {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n margin: 8px;\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.button {\n appearance: none;\n border: 0;\n outline: 0;\n background-color: var(--color);\n color: var(--background);\n padding-top: 4px;\n padding-bottom: 4px;\n padding-left: 8px;\n padding-right: 8px;\n border-radius: 2px;\n font-family: var(--sans);\n font-size: 10px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.toolbar:hover .button {\n opacity: 0.2;\n}\n.button:hover {\n opacity: 0.8;\n}\n.footer {\n position: fixed;\n bottom: 0;\n right: 0;\n left: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 16px;\n font-family: var(--sans);\n font-size: 12px;\n text-align: right;\n color: var(--color-25);\n background-image: linear-gradient(transparent, var(--background));\n}\n.footer:hover {\n color: var(--color-50);\n}\n.footer a {\n color: inherit;\n}\n.footer a:hover {\n color: var(--highlight);\n}\n.spacer { margin: auto }\n.preview {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n margin: 24px;\n width: 50%;\n min-width: 320px;\n max-width: 768px;\n overflow: scroll;\n background-color: var(--background);\n border-radius: 16px;\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n}\n.close {\n position: absolute;\n top: 0;\n right: 0;\n appearance: none;\n border: 0;\n outline: 0;\n background-color: transparent;\n color: var(--color);\n display: inline;\n align-items: center;\n padding: 8px;\n height: 48px;\n width: 48px;\n border-radius: 9999px;\n font-family: inherit;\n font-size: 24px;\n cursor: pointer;\n opacity: 0.5;\n}\n.close:hover {\n opacity: 0.8;\n}\n.frontmatter {\n font-family: inherit;\n font-size: 12px;\n background-color: var(--shadow);\n padding: 8px;\n padding-top: 16px;\n margin: 0;\n}\n.markdown {\n padding: 32px;\n margin: 0;\n color: var(--color);\n background-color: var(--background);\n font-family: \"Lexend\", Georgia, serif;\n}\n.markdown pre {\n background-color: var(--shadow);\n font-family: var(--font);\n}\n.markdown hr {\n background-color: var(--shadow);\n}\n.markdown h1,\n.markdown h2 {\n border-color: var(--shadow);\n}\n`;\n\nconst style =