I use an in house CMS to edit HTML and CSS inside of textarea elements. I use a custom user stylesheet to set a monospace font but that’s made me want some syntax highlighting.
I’m looking to be able to apply it in a similar method of applying user stylesheets, I.e. by URL and hopefully by ID or class. That way when I go to the page to edit the code it looks nice and I can tell if I’ve missed something like a quote easily.
Another idea is taking a look at editors like Codemirror or Brackets that are HTML/JS-based, and dissecting how they’re doing it. Typically, it’s a script to wrap elements/variables/declarations in spans with appropriate classes, then a stylesheet to colorize those spans accordingly.
Thanks for this interesting post. Did you finally manage to make it work? I am facing the same kind of challenge.
I am new to GreaseMonkey and CodeMirror and really love the potential of both frameworks. Now I don’t have that much experience and mostly don’t know how to debug it, so it’s pretty complicated to develop a working script.
What I want to achieve is the following:
- I have an existing website that features wiki pages edition in The code is not formatted and it is challenging to develop on for HTML newbies.
- The wiki page HTML code edition takes places in a specific textarea, that I know the ID of (using Firebug it was pretty easy to find).
- I started from Kaskus’ Userscript (http://userscripts.org/scripts/review/156308) to create a CodeMirror textarea from the HTML code text area, with no success.
I have been struggling with this for already 4 hours and would really appreciate any help. I can provide the code if needed, so if you can point me to what I am doing wrong, or tell me how I can troubleshoot/debug it, I would be very grateful.