Skip to content
angelozerr edited this page Apr 25, 2017 · 5 revisions

Eclipse

You can find samples inside the org.eclipse.tm4e.samples project.

Extension Point

grammars

Support XML TextMate language grammar (*.plist and *.tmLanguage files) and JSON TextMate language grammar (VSCode like).

<extension
      point="org.eclipse.tm4e.registry.grammars">
   <grammar
   		scopeName="source.json"
        path="./syntaxes/JSON.tmLanguage" >
   </grammar>      
   <scopeNameContentTypeBinding
         contentTypeId="org.eclipse.languageserver.languages.json"
         scopeName="source.json">
   </scopeNameContentTypeBinding>
</extension>

External grammar injection

You can inject external grammar injection with the org.eclipse.tm4e.registry.grammars extension point. Take a sample with TypeScript and Angular which defines:

  • HTML content inside @Component/template
  • CSS content inside @Component/styles

A plugin A can provide TypeScript grammar like this:

<extension
      point="org.eclipse.tm4e.registry.grammars">
  <grammar
  		scopeName="source.ts"
        path="./syntaxes/TypeScript.tmLanguage.json" >
  </grammar>
</extension>

And colorization is like this:

Angular Editor Without Injection

A plugin B can inject grammar to existing TypeScript grammar to support HTML & CSS syntax coloration for @Component/template/@Component/styles with injection extension point:

<extension
      point="org.eclipse.tm4e.registry.grammars">
  	<injection scopeName="template.ng" injectTo="source.ts"/>
  	<injection scopeName="styles.ng" injectTo="source.ts"/>
</extension>

And colorization is like this:

Angular Editor With Injection

themes

TM4E provides several default themes (Light, Dark) which is linked to the Eclipse Appearance

But you can define your own theme like this:

<extension
      point="org.eclipse.tm4e.ui.themes">
   <theme
         id="org.eclipse.tm4e.ui.themes.MyTheme"
   		 name="MyTheme"
         path="./themes/MyTheme.css" >
   </theme>
</extension>

TMPresentationReconclier

TM4E provides the TMPresentationReconclier.

Here a quick recipe to consume a textMate grammar with your editor. The following sample is for a Freemarker editor:

  • defines a content type for your file:
<extension
     point="org.eclipse.core.contenttype.contentTypes">
  <content-type
        base-type="org.eclipse.core.runtime.text"
        file-extensions="ftl"
        id="org.eclipse.tm4e.samples.freemarker"
        name="Freemarker"
        priority="normal">
  </content-type>
</extension>  
  • register your TextMate grammar and bind it with your content type:
<extension
     point="org.eclipse.tm4e.core.grammars">
  <grammar
      scopeName="text.html.ftl"
      path="./syntaxes/ftl.tmLanguage" >
  </grammar>      
  <scopeNameContentTypeBinding
        contentTypeId="org.eclipse.tm4e.samples.freemarker"
        scopeName="text.html.ftl">
  </scopeNameContentTypeBinding>
</extension>

With TextEditor

package org.eclipse.tm4e.samples.freemarker;

import org.eclipse.jface.text.presentation.IPresentationReconciler;
import org.eclipse.jface.text.source.ISourceViewer;
import org.eclipse.jface.text.source.SourceViewerConfiguration;
import org.eclipse.tm4e.ui.text.TMPresentationReconciler;

public class FreemarkerViewerConfiguration extends SourceViewerConfiguration {

	@Override
	public IPresentationReconciler getPresentationReconciler(ISourceViewer viewer) {
		// Defines a TextMate Presentation reconcilier
		return new TMPresentationReconciler();
	}

}
package org.eclipse.tm4e.samples.freemarker;

import org.eclipse.ui.editors.text.TextEditor;

public class FreemarkerEditor extends TextEditor {

	public FreemarkerEditor() {
		setSourceViewerConfiguration(new FreemarkerViewerConfiguration());
	}
}
  • define your editor and bind it with your content type:
<extension
     point="org.eclipse.ui.editors">
  <editor
        name="Freemarker Editor"
        icon="icons/freemarker.png"
        class="org.eclipse.tm4e.samples.freemarker.FreemarkerEditor"
        id="org.eclipse.tm4e.samples.freemarker.FreemarkerEditor">
        <contentTypeBinding
              contentTypeId="org.eclipse.tm4e.samples.freemarker">
        </contentTypeBinding>
  </editor>
</extension> 

With GenericEditor

<extension
      point="org.eclipse.ui.genericeditor.presentationReconcilers">
   <presentationReconciler
         class="org.eclipse.tm4e.ui.text.TMPresentationReconciler"
         contentType="org.eclipse.tm4e.samples.freemarker">
   </presentationReconciler>
</extension>

Advanced features

You can force the theme (ex: Monokai or custom theme) for your editor with TMPresentationReconciler#setThemeId(String themeId) like this:

package org.eclipse.tm4e.samples.typescript;

import org.eclipse.jface.text.presentation.IPresentationReconciler;
import org.eclipse.jface.text.source.ISourceViewer;
import org.eclipse.jface.text.source.SourceViewerConfiguration;
import org.eclipse.tm4e.ui.text.TMPresentationReconciler;
import org.eclipse.tm4e.ui.themes.ThemeIdConstants;

public class FreemarkertViewerConfiguration extends SourceViewerConfiguration {

	@Override
	public IPresentationReconciler getPresentationReconciler(ISourceViewer viewer) {
		TMPresentationReconciler reconciler = new TMPresentationReconciler();
		reconciler.setThemeId(ThemeIdConstants.Monokai);
		return reconciler;
	}
	
}