Craft CMS Project Specific Syntax Highlighting for HTML (Twig)

craft-specific-syntax.md

Craft CMS Project Specific Syntax Highlighting for HTML (Twig)

This small step-by-step guide assumes you already have Package Control installed in ST3.

If not please see Package Control Installation to install Package Control and then Usage: Install Package to learn how to install packages.

---

1. First install Craft-Twig from Package Control.
2. Then install Sublime Project Specific Syntax from Package Control.
3. Open any file and change it's syntax to HTML (Twig) by clicking on the current syntax (bottom right.)
4. Next Right-Click anywhere in the writing area > Project Specific Syntax > Copy syntax setting to clipboard.
5. If you haven't already, open your project in ST and Project > Save Project As. Give your project a name and save the file. Probably above root along with the craft folder.
6. Then Project > Edit Project which opens the {yourprojectname}.sublime-project file (the file you just saved in the previous step.)
7. Add in syntax_override from the Sublime Project Specific Syntax instructions and paste in your syntax which you copied from step 4 (see code examples below.)
8. Save the project file.
9. Done!

Now with every .html file you create the syntax should be set to HTML (Twig)!

Code Examples:

syntax_override should look something like the following:

"syntax_override":
{
	"\\.html$": ["Craft-Twig", "Syntaxes", "HTML (Twig)"]
}

My *.sublime-project file now looks like this (yours may differ depending on your setup):

{
	"folders":
	[
		{
			"follow_symlinks": true,
			"path": "."
		}
	],

	"syntax_override":
	{
		"\\.html$": ["Craft-Twig", "Syntaxes", "HTML (Twig)"]
	}
}

Notes:

• As far as I know you have to manually set existing HTML files to HTML (Twig) syntax yourself. This only works when you create a new .html file.
• This would work for other ST2/3 Syntaxes. Just change step 1 to your package of choice if not already installed
• This seems to work fine for ST3 (not tested on ST2)
• Watch out for commas!
• Other details
• If anyone has a better option than this do let me know over @natetronn

Credits:

• BarrelStrength
• reywood
• Anomareh

You can also use the .twig file extension and Sublime Text will automatically assign HTML (Twig) syntax highlighting to your files.

Great suggestion! Didn't even think to see if Craft processed .twig files.

Come to find out (and thanks to stubear for pointing out Craft handles .twig) defaultTemplateExtensions allows one to add more extensions for Craft to process. The default is .html and .twig in fact. With that said, if you're okay using the .twig extension just do step 1. If you want to keep the .html extension but, with Craft Twig highlighting then, yes, do all the steps.

Let's hope Craft keeps processing .twig files.