Grow your CSS skills. Land your dream job.

Syntax highlighting for textarea via greasemonkey or similar

  • # May 16, 2013 at 1:20 am

    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.

    Anybody know of anything?

    Cheers!

    # May 17, 2013 at 1:36 pm

    This looks promising: http://userscripts.org/scripts/show/7982

    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.

    # May 17, 2013 at 4:11 pm

    You can’t show formatted/rendered HTML elements inside of a textarea.

    As @JoshBlackwood mentioned two good editors, I would like to include another named [Aloha Editor](http://aloha-editor.org/). It also has a plugin for [editing HTML source](https://github.com/pahen/aloha-plugin-htmlsource).

    # December 11, 2013 at 4:35 am

    Hi everyone.

    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.

    Thanks a lot in advance!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".