AO3: Comment Formatting and Preview

Adds buttons to insert HTML formatting, and shows a live preview box of what the comment will look like

Instalează acest script ?

Pune o întrebare, postează o recenzie, sau raportează-l.

Autor

escctrl

Instalări zilnice

Total instalări

343

Rating-uri

7 0 0

Versiune

7.2

Creat

05-01-2024

Actualizat

21-04-2026

Size

32,1 KB

Licență

GNU GPL-3.0-only

Se aplică pe

archiveofourown.org

💖 What it does

Adds buttons above comment boxes (and other textboxes that allow HTML), to easily insert the HTML code for formatting the text.

Below the comment box, adds a preview of what the final comment will look like.

animated preview of a work comment. Above the textbox is a row of buttons with text formatting icons such as 'bold', 'italics', etc. The textbox contains some text, and underneath the textbox is a field showing a preview of the comment visually formatted. The user selects a word, and clicks the 'bold' button. The HTML code to make text bold is inserted around the highlighted word.

🪴 How to use it

After installing the script, open the configuration dialog to change the settings. Touching the code is not needed.

The button bar is added on:

Comments and Comment Replies on works (posting and editing), as well as when replying from the AO3 Inbox
Summary, Notes and End Notes when posting or editing a work, chapter, or series
Bookmarker Notes when adding or editing a bookmark, and works with my Safekeeping Buttons script
Intro, FAQ and Rules when creating a new Collection or editing its profile
Instructions for Prompt Memes and Gift Exchanges
Bio in user profiles
My Sticky Comment Box script (no preview to save space)
My View and Post Comments from the Bin script for tag wranglers (no preview to save space)

🎨 How to configure it

In the main navigation of AO3, next to “About”, there’s a new menu item “Userscripts”.
From the “Userscripts” menu, select the “Comment Formatting Buttons” option.
A configuration dialog opens. Here, you can set your preferences.
- Show or hide any of the standard buttons
- Add custom buttons, for all your repetitive commenting needs (follow the instructions within the GUI to add buttons)
- Put the active buttons into any order you like

⚠️ Upgrading from an older version to version 7 or higher: Your custom buttons will show as text only. When you first open the configuration, it will tell you to update your old icon unicode to an SVG.

On the FontAwesome v4 Cheatsheet, search for the unicode (e.g. ) you had before.
It'll have a name listed like "fa-heart".
Ignore the "fa-" prefix, but you can search for the rest of the name in their latest icon set.
Once you found an icon you like, click it. In the popup, there's a box with a long HTML code starting with <svg xmlns="https://...
Click into that box, that copies the whole SVG to your clipboard.
Paste it into the textbox labeled "Icon" for your custom formatting button.

🏛️ History

v7
- support for Chapter and Series summary/notes
- user profile Bio support
- support for Instructions in Challenges
- all buttons are sortable
- switch from FontAwesome v4 to SVGs to be future-proof
v6
- Collection profile support
- inbox comments on AO3 Homepage support
v5 - Post Tag Comment from Bins support
v4 - Bookmark notes support
v3 - Summary and Notes support when posting or editing a work
v2
- Sticky Comment Box support
- AO3 News Posts support
v1 - work comment support

🏅 Credit

It's inspired by the popular Comment Formatting Options script, but I created my own version from scratch, trying to fix issues I'd noticed and to add a bunch of new features.