Brackets syntax coloring for AngularJS inline-templates

README.md

Brackets syntax coloring for AngularJS inline-templates

In the Brackets editor, have you noticed that the HTML within <SCRIPT type="text/ng-template"> is not syntax-colored? Here is how to fix it.

Background

AngularJS has support for inline HTML templates. I am going to explain here only how to get the syntax coloring working, not what inline-templates actually are. To create an inline-template, you put the template's HTML into a SCRIPT tag like this:

    <SCRIPT type="text/ng-template" id="/path/to/your/template.html">template: {{HTML}} here</SCRIPT>

Unfortunately, Brackets does not syntax-color the HTML within this SCRIPT tag, because it does not know that it is HTML. But, it can be taught to do so rather easily. Please note that I have only tested this approach with Brackets up to Sprint 42 on OS-X.

What did I change to enable the syntax coloring?

htmlmixed.js is the file that contains definitions for HTML syntax coloring, amongst other things. We will need to modify this file to tell Brackets to display the new MIME type "text/ng-template" as a block of HTML. On OS-X this file is found here:

/Applications/Brackets.app/Contents/www/thirdparty/CodeMirror2/mode/htmlmixed/htmlmixed.js

Sorry, I don't know where this file is located on Windows or Linux versions of Brackets. However, I suspect it is in some similar directory/folder structure as on OS-X.

Open this file in your favorite text editor, then do this:

1. Locate the code that looks like that shown below - should be on lines 22 and 23 in the file. These lines basically say that "text/javascript" and "text/ecmascript" should be treated as JavaScript and syntax colored accordingly.

    scriptTypes.push({matches: /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^$/i,
                      mode: CodeMirror.getMode(config, "javascript")});
``

2) Insert the code below just after the lines you found in step 1 - that would be on line 24. This code defines "text/ng-template" as an HTML block (`mode:null`), so it will be syntax colored accordingly.

    scriptTypes.push({matches: "text/ng-template", mode: null});

3) Save the file

4) Restart (or reload) Brackets

Your AngularJS inline-templates should now be syntax colored, just like all the other HTML in your file.

### How did I know how to do this?

In the same directory as htmlmixed.js you will find index.html, which basically tells you to do the above.