Markdown Preview Toggle on Text Areas

WHAT IT DOES

This script adds a floating toggle button that transforms any text area into a live Markdown preview tool. Click the button to convert the text area into a split view—editor on the left, rendered preview on the right—or a full preview mode that shows only the rendered output. The preview updates in real time as you type, supporting headings (#, ##, ###), bold (**), italic (*), lists (ordered and unordered), links, images, code blocks (fenced with syntax highlighting), blockquotes, horizontal rules, and emoji shortcuts. Sync scroll keeps the preview aligned with your editing position, so you always see the rendered result of what you're working on.

WHERE IT RUNS

The script works on any page with text areas—issue trackers (GitHub, GitLab), CMS editors (WordPress), documentation platforms, forum posts, comment boxes, and any site with Markdown input fields. It detects text areas automatically and adds the toggle button for a seamless editing experience.

HOW TO USE

After installation, a floating 📝 button appears on the page. Click it to activate preview mode for the first text area on the page. The text area transforms into a split view with the editor on one side and the rendered Markdown on the other. As you type, the preview updates instantly. Click the ✕ button in the preview pane to close the preview. Open the settings panel to configure: choose between split or full preview mode, toggle sync scroll on or off, enable or disable emoji rendering and code highlighting, switch between dark and light themes, adjust font size and line height, and set the toolbar position. The script also works with dynamically added text areas.

TECHNICAL MECHANISM

The script uses a multi-stage Markdown rendering pipeline. First, it identifies text areas using a DOM query with filtering to exclude password and hidden fields. Second, it creates a preview container that wraps the text area and a preview pane, with CSS flexbox for split or full layout. Third, it implements a Markdown parser using regex-based tokenization: it processes fenced code blocks first (to preserve them), then inline code, headings, bold/italic, blockquotes, links, images, lists, horizontal rules, and finally line breaks. Each pass applies a regex replacement on the escaped text to avoid HTML injection—the text is passed through a text node to escape it before rendering. Fourth, it syncs scrolling between the text area and preview pane by calculating scroll ratios and applying them bidirectionally. Fifth, it uses event listeners (input, scroll) to update the preview in real time.

THE PANEL

The settings panel is fully draggable and can be positioned anywhere on your screen. It automatically snaps to the nearest edge when released, keeping your workspace organized. The panel can be collapsed to a small bubble showing only a gear icon, and restored with a single click. Its position is remembered across page reloads using GM_setValue. The panel also responds to the Escape key, which instantly hides it until you click the bubble again. All settings are saved immediately when changed and persist across browser sessions.

PLEASE NOTE

This script requires the free BotGentz extension to run. The Markdown renderer is a lightweight client-side parser and does not support all GitHub-flavored Markdown extensions. The script does not access, store, or transmit any personal data or browsing history. All rendering happens locally in your browser and never leaves your device.