veryroundbird / ao3markdown.user.js

// ==UserScript== // @name AO3 Markdown Editor // @namespace https://veryroundbird.house // @version 2026-03-31 // @description replaces the standard AO3 editor with a markdown editor that has syntax highlighting and a previewer for people with my brain disease // @author You // @match https://archiveofourown.org/works/* // @icon https://www.google.com/s2/favicons?sz=64&domain=archiveofourown.org // @require https://unpkg.com/turndown/dist/turndown.js // @require https://unpkg.com/@highlightjs/cdn-assets@11.11.1/highlight.min.js // @require https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js // ==/UserScript== const addCss = (url, container) => { const css = document.createElement('link'); css.setAttribute('rel', 'stylesheet'); css.setAttribute('type', 'text/css'); css.setAttribute('href', url); container.appendChild(css); return css; } (() => { 'use strict'; addCss('https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/base16/cupcake.min.css', document.head); addCss('https://unpkg.com/@fontsource/maple-mono@5.2.6/index.css', document.head); const styles = document.createElement('style'); styles.setAttribute('type', 'text/css'); styles.innerHTML = ` #editor-tabs { display: flex; gap: 10px; } #editor-tabs button { border-radius: 10px 10px 0 0; box-shadow: none; } #editor-tabs button[disabled] { opacity: 0.5; } #editor-container, #preview { border: 1px white solid; } #editor, #preview { height: 500px; overflow: auto; display: block; } #editor { font-family: 'Maple Mono', monospace; font-size: 16px; } #preview { padding: 20px; } #preview p { padding: 0; margin: 1em 0; } `; document.head.appendChild(styles); const content = document.getElementById('content'); const buttons = document.querySelector('.rtf-html-switch'); if (buttons) { buttons.style.display = 'none'; } const turndownService = new TurndownService({ headingStyle: 'atx', emDelimiter: '*', codeBlockStyle: 'fenced' }); if (content) { content.style.display = 'none'; const initialText = turndownService.turndown(content.textContent); const wrapper = document.createElement('div'); wrapper.id = 'editor-wrapper'; const tabs = document.createElement('div'); tabs.id = 'editor-tabs'; const mdBtn = document.createElement('button'); mdBtn.setAttribute('type', 'button'); mdBtn.textContent = "Markdown"; mdBtn.setAttribute("disabled", "disabled"); mdBtn.id = 'editor-btn-markdown'; tabs.appendChild(mdBtn); const htmlBtn = document.createElement('button'); htmlBtn.setAttribute('type', 'button'); htmlBtn.id = 'editor-btn-html'; htmlBtn.textContent = "Preview"; tabs.appendChild(htmlBtn); wrapper.appendChild(tabs); const editorContainer = document.createElement('pre'); editorContainer.id = 'editor-container'; const editor = document.createElement('code'); editor.id = 'editor'; editor.classList.add('language-markdown'); editor.setAttribute("contenteditable", "plaintext-only"); editor.textContent = initialText; editorContainer.appendChild(editor); wrapper.appendChild(editorContainer); const preview = document.createElement('div'); preview.id = 'preview'; preview.style.display = "none"; preview.innerHTML = content.value; wrapper.appendChild(preview); content.after(wrapper); mdBtn.addEventListener('click', (e) => { e.preventDefault(); htmlBtn.removeAttribute("disabled"); mdBtn.setAttribute("disabled", "disabled"); editorContainer.style.display = "block"; preview.style.display = "none"; }); htmlBtn.addEventListener('click', (e) => { e.preventDefault(); mdBtn.removeAttribute("disabled"); htmlBtn.setAttribute("disabled", "disabled"); editorContainer.style.display = "none"; preview.style.display = "block"; }); editor.addEventListener('input', (_e) => { const text = marked.parse(editor.innerHTML.replaceAll(/<\/?span(\sclass="hljs-[a-z]+")>/g, "")); preview.innerHTML = text; content.value = text; }); hljs.highlightAll(); } })();