How to create an editor with syntax highlighting for Java


I see many people at stackoverflow who ask for an editor who does syntax highlighting in their JavaFX applications. As e(fx)clipse runtime has such a control available and the Eclipse Text Framework has all the tokenizing and reconcoling infrastructure I thought it might be a good idea to write up how you can get an application like this which is plain old Java application (NO OSGi required!)

bright

drak

To get this going you need to:

You can now start studying the code in the CodeEditor project. Most of the hard work is done by the libraries for you so in general doing syntax highlighting with the help of e(fx)clipse runtime components involve the following (custom) code:

  • Implementation of IPresentationDamager and IPresentationRepairer
  • Implementation of an ITokenScanner
  • Implementation of an IDocumentPartitioner
  • A CSS-File to style the tokens

This sounds hard than it really is because 95% of the code already available e.g. in Eclipse JDT can be reused (notice the copyright header in all the text-package classes!), I won’t go into the details about the Eclipse Text framework in this post as I’m not an expert myself on it.

The only thing I’d like you to show is how you connect all the text parsing with the JavaFX control coming from e(fx)clipse.

public SourceViewer createViewer(Path p) {
  SourceViewer viewer = new SourceViewer();
  SourceViewerConfiguration configuration = createConfig();
  Document document = createDocument(p);
  IDocumentPartitioner partitioner = createPartitioner();

  document.setDocumentPartitioner(configuration.getConfiguredDocumentPartitioning(viewer), partitioner);

  document.setDocumentPartitioner(partitioner);
  partitioner.connect(document);

  viewer.configure(configuration);
  viewer.setDocument(document);
  return viewer;
}

private SourceViewerConfiguration createConfig() {
  return new JavaSourceConfiguration();
}

private IDocumentPartitioner createPartitioner() {
  return new FastPartitioner(new FastJavaPartitionScanner(), new String[] { 
    IJavaPartitions.JAVA_DOC,
    IJavaPartitions.JAVA_MULTI_LINE_COMMENT, 
    IJavaPartitions.JAVA_SINGLE_LINE_COMMENT,
    IJavaPartitions.JAVA_STRING, IJavaPartitions.JAVA_CHARACTER });
}

private Document createDocument(Path p) {
  return new Document(getFile(p));
}

private String getFile(Path p) {
  try (BufferedReader reader = Files.newBufferedReader(p)) {
    StringBuilder b = new StringBuilder();
    String line;
    while ((line = reader.readLine()) != null) {
      b.append(line + "\n");
    }
    reader.close();
    return b.toString();
  } catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
  }
  return "";
}

if you’ve ever written an styled-text editor for Eclipse the above code should look fairly familiar to you.

and to do the highlighting you need to attach a CSS-Stylesheet like this:

.java.styled-text-area .selection-marker {
	-fx-background-color: #2b5696;
}

.java.styled-text-area .java_string {
	-styled-text-color: #7c986c;
}

.java.styled-text-area .java_default {
	-styled-text-color: #b8c4d1;
}

.java.styled-text-area .java_annotation {
	-styled-text-color: rgb(200, 200, 200);
}

.java.styled-text-area .java_keyword {
	-styled-text-color: #d78b40;
	-fx-font-weight: bold;
}

.java.styled-text-area .java_operator {
	-styled-text-color: #b8c4d1;
}

.java.styled-text-area .java_bracket {
	-styled-text-color: #b8c4d1;
}

.java.styled-text-area .java_keyword_return {
	-styled-text-color: #d78b40;
	-fx-font-weight: bold;
}

.java.styled-text-area .java_comment_task_tag {
	-styled-text-color: rgb(127, 159, 191);
}

.java.styled-text-area .java_doc_link {
	-styled-text-color: #74a567;
	-fx-font-weight: bold;
}

.java.styled-text-area .java_doc_default {
	-styled-text-color: #74a567;
}

.java.styled-text-area .java_multi_line_comment {
	-styled-text-color: #929292;
}

.java.styled-text-area .java_single_line_comment {
	-styled-text-color: #929292;
}

.java.styled-text-area .java_doc_tag {
	-fx-fill: #74a567;
	-fx-font-weight: bold;
}
This entry was posted in e(fx)clipse. Bookmark the permalink.

8 Responses to How to create an editor with syntax highlighting for Java

  1. I thank you very much for writing this tutorial, to implement the tutorial should we start with a simple JavaFX Application or an E4 JavaFX application, I am confused, I never writing editor for eclipse it’s my first steps

  2. Pingback: JavaFX links of the week, February 16 // JavaFX News, Demos and Insight // FX Experience

  3. Jamal Hussian says:

    it isnt javafx 😦 its maven ! can you please do it in javafx and share with me source code?

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.