Simple Syntax Highlighting

May 17, 2008

Have you ever wanted to embed syntax highlighted code in your app? In the above demo, I wanted to include the code that created the demo in order to help show how to “do-it-yourself”. Rather than switch from the demo to an IDE, I thought it was smoother and more focused to switch views within the actual application.

To get the syntax highlighted code, I used the open source jEdit Syntax Package. This package provides a JEditTextArea widget which handles all the details.

I like the componentized design of JEditTextArea – you can just drop the component right into your app, unlike trying to embed the NetBeans or Eclipse editor. You can tweak just about every aspect of the component, and you’ll probably need to because the default colors are a little wacky. I tweaked the text area in the app above like this:

        JEditTextArea textArea = new JEditTextArea();
        textArea.setTokenMarker(new JavaTokenMarker());
        textArea.setText(text);
        textArea.recalculateVisibleLines();
        textArea.setFirstLine(0);
        textArea.setElectricScroll(0);
        textArea.getPainter().setSelectionColor(
                UIManager.getColor("TextArea.selectionBackground"));

        SyntaxStyle[] styles = SyntaxUtilities.getDefaultSyntaxStyles();
        styles[Token.COMMENT1] = new SyntaxStyle(Color.GRAY,true,false);
        styles[Token.KEYWORD1] = new SyntaxStyle(new Color(0x000080),false,true);
        styles[Token.KEYWORD2] = new SyntaxStyle(new Color(0x000080),false,true);
        styles[Token.KEYWORD3] = new SyntaxStyle(new Color(0x000080),false,true);
        styles[Token.LITERAL1] = new SyntaxStyle(new Color(0x008000),false,true);
        styles[Token.LITERAL2] = new SyntaxStyle(new Color(0x000080),false,true);

        textArea.getPainter().setStyles(styles);

In the code above, I’ve set the text editor to render Java code, but there are a number of other languages available.

jEdit Syntax Package is a syntax highlighter – thats is, it doesn’t provide code completion, code folding or most of the other luxuries we’re used to. But when you need syntax highlighting, this package does the job.

About these ads

15 Responses to “Simple Syntax Highlighting”


  1. It’s too bad that jedit-syntax is a dead project. What would be really nice is if someone would port out the current version of the jEdit TextArea component (which is much nicer than the old one). Oh well, yet another thing on my ever-growing open source TODO list.

  2. Ken Says:

    I agree – and I’m not too crazy with the current implementation either. The widget isn’t actually a text component, and doesn’t even sit inside a JScrollpane (it manages the view with raw scroll bars!).

    I was thinking about re-writing this package – that is, taking the lexer and creating the necessary infrastructure around JEditorPane.

    If there’s enough interest, maybe it’d be worth starting a project to do this.

  3. David Walsh Says:

    I use jEdit for everything: PHP, CSS, Javascript, etc. Anything to keep this project moving forward would be great!


  4. +1 love to see that become a reality, need help?

  5. Ken Says:

    Sure…maybe I should setup a java.net? If anyone wants to set that up, feel free.

  6. Ken Says:

    Sure…maybe I should setup a java.net project? If anyone wants to set that up, feel free.

  7. mark Says:

    The JEdit text area is one of the solutions I found and my least favorite. You can use a swing text area and create an editor kit:

    http://java.sun.com/products/jfc/tsc/articles/text/editor_kit/

    My favorite solution is using the editor from the Netbeans package:

    http://www.antonioshome.net/kitchen/netbeans/nbms-standalone.php

  8. Yves Zoundi Says:

    It’s actually quite easy to use JEdit syntax highlighting code outside JEdit. I’ve done it with the 1.0.0RCXXXX of XPontus XML Editor(http://xpontus.sf.net). I’m now using Javacc. I could have used Antlr, JFlex or another lexer too. I used a JEditorPane instead of the component JEdit’s uses.

    A friend of mine have a simple syntax highlighting project called sdoc(http://sdoc.sf.net). It might be worth your time looking at it. It uses JFlex to parse the text.

    Yves Zoundi
    Blog: http://yveszoundi.blogspot.com
    XPontus XML Editor : http://xpontus.sf.net
    VFSJFileChooser : http://vfsjfilechooser.sf.net

  9. Ayman Says:

    I’d love to see and help with that. I have a Pet project that uses syntax highlighting and did not want to invent the wheel, but did. I have more of a square wheel though, with JEditorPane and very simple regex pattern matching for highlighting matches. I needed simple highlighting for various languages. Scripting as well as internal.
    Please let me know if you open a project or if you wanna look at my simplistic implementation.

  10. Ken Says:

    Your right…it is easy to use the jEdit Syntax Package (what the jEdit Text Editor is based on) as an independent component.

    What I’m referring to, though, is the actual architecture of the jEdit Syntax Package – it doesn’t map to the Swing text architecture very well. The Swing text API is based on EditorKits being installed on JEditorPanes. I’d like to port the guts of the jEdit Syntax Package into the Swing text model.

    I’ll check out SDoc…thanks for the link.

  11. Ken Says:

    @Mark (comment 54): Your first link ( http://java.sun.com/products/jfc/tsc/articles/text/editor_kit/ ) was the article that originally got me thinking about re-implementing jEdit. I tried emailing Tim Prinzing (the article’s author and master mind behind the Swing text API) in order to see if that approach was still the “recommended” for syntax highlighting – I’ve yet to hear back from him.

    I’m excited by your second link ( http://www.antonioshome.net/kitchen/netbeans/nbms-standalone.php ) – the NetBeans Editor is very powerful, and I’ve been looking for a way to use it in a stand-alone fashion.

  12. Ayman Says:

    You may be interested in JSyntaxPane. It’s my first Open Source project and should be very easy to use and embed. No external dependencies at all.

  13. Ken Says:

    I just stumbled across your project the other day, and was excited to see that it was exactly what I was looking for! It was very snappy, and followed Sun’s Swing text package architecture – nice!

    I’ll certainly be looking into your project more – good work Ayman!

  14. Carter Cole Says:

    i use the syntax hilighter from its really easy to implement, has a ton of styles and languages it supports and isn’t intrusive… easy way to install is here its also got wordpress plugin :)

  15. vikas sharma Says:

    i was looking exactly for this information.
    now i am using JEditTextArea in my java swing application.

    Thanks


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 27 other followers

%d bloggers like this: