I've converted a script that I hope to get embedded on a StackExchange site (Lego Answers) to a GreaseMonkey/Userscript but I'd like to get it interacting with the live preview when creating or editing questions and answers.

At the moment the script runs once the page is loaded and looks for our custom tags (for example [part:3700:4]) and when it finds one, calls a webservice to retrieve the part name and image details and then replaces the tag with the image.

However, this doesn't work with either inline editing or creating a question as the preview updates on the fly.

Has anyone else hooked a userscript or similar into the preview for this sort of feature?

The script can be seen here:

BrickJax: Brick Image Replacement


1 Answer 1


There's a few ways to do it, but at first glance the simplest way would be to hook into the wmdrefresh event that will get called when the preview area is updated:

$(document).bind('wmdrefresh', function (event) {
    // Make your changes to event.target's content

Keep in mind that the preview update fires many, many times, so be sure to cache the responses to your web service requests to avoid spamming the services or hanging the client.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .