AO3: Comment Formatting and Preview

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

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

ستحتاج إلى تثبيت إضافة مثل Stylus لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتتمكن من تثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

(لدي بالفعل مثبت أنماط للمستخدم، دعني أقم بتثبيته!)

المؤلف
escctrl
التثبيت اليومي
1
إجمالي التثبيت
343
التقييمات
7 0 0
الإصدار
7.2
تم إنشاؤه
05-01-2024
تم تحديثه
21-04-2026
الحجم
32.1 KB
الترخيص
GNU GPL-3.0-only
ينطبق على

💖 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

  1. In the main navigation of AO3, next to “About”, there’s a new menu item “Userscripts”.
  2. From the “Userscripts” menu, select the “Comment Formatting Buttons” option.
  3. 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
preview of the configuration dialog

⚠️ 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.

  1. On the FontAwesome v4 Cheatsheet, search for the unicode (e.g. ) you had before.
  2. It'll have a name listed like "fa-heart".
  3. Ignore the "fa-" prefix, but you can search for the rest of the name in their latest icon set.
  4. 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://...
  5. Click into that box, that copies the whole SVG to your clipboard.
  6. 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.