How can I embed additional languages in TextMate 2's “HTML” bundle?

Question

TextMate 2's "HTML" bundle ships with built-in support for highlighting HTML tags, the contents of CSS <style> tags, and the contents of JavaScript <script> tags. However, I'd like to configure it to also embed Pug support as well, and key off of the <template lang="pug"> opening tag. How can I embed that Pug highlighter in the same way the existing CSS and JavaScript highlighters are embedded?

score 0 · Answer 1 · answered Dec 30 '18 at 07:11

The github project pug-tmbundle might solve the problem.

The author, davidrios, gives this description:

A TextMate Bundle for the Pug templating language. Implemented in JSON-tmLanguage, a compiled tmLanguage version is included. All language features that I know of (including some undocumented ones and quircks of the Pug parser) and some indent increase/decrease patterns are implemented.

A highlighter using Python instead of JavaScript is also included for use with PyPug, you can either manually select Pug (Python) from the syntaxes list or give your file the extension .py.pug to select automatically (only on Sublime Text). Also included is a test.py.pug file that can be compiled with pypug to test it.

The latest update is from Sep 16, 2016, but the description also says:

This was made specifically for Sublime Text 2, but was tested and works with Textmate 2 and Sublime Text 3

score 0 · Accepted Answer · answered Oct 24 '20 at 02:42

I finally got this going. I installed the Pug tmBundle, then edited the built-in HTML bundle to include the following:

                {   begin = '(^[ \t]+)?(?=<(?i:template lang="pug")(?!-))';
                end = '(?!\G)([ \t]*$\n?)?';
                beginCaptures = { 1 = { name = 'punctuation.whitespace.embedded.leading.html'; }; };
                endCaptures = { 1 = { name = 'punctuation.whitespace.embedded.trailing.html'; }; };
                patterns = (
                    {   name = 'meta.embedded.block.html';
                        begin = '(?i)(<)(template)(?=\s|/?>)';
                        end = '(?i)((<)/)(template)\s*(>)';
                        beginCaptures = {
                            0 = { name = 'meta.tag.metadata.pug.start.html'; };
                            1 = { name = 'punctuation.definition.tag.begin.html'; };
                            2 = { name = 'entity.name.tag.html'; };
                        };
                        endCaptures = {
                            0 = { name = 'meta.tag.metadata.pug.end.html'; };
                            1 = { name = 'punctuation.definition.tag.begin.html'; };
                            2 = { name = 'source.pug'; };
                            3 = { name = 'entity.name.tag.html'; };
                            4 = { name = 'punctuation.definition.tag.end.html'; };
                        };
                        patterns = (
                            {   name = 'meta.tag.metadata.pug.start.html';
                                begin = '\G';
                                end = '(>)';
                                captures = { 1 = { name = 'punctuation.definition.tag.end.html'; }; };
                                patterns = ( { include = '#attribute'; } );
                            },
                            {   name = 'source.pug';
                                begin = '(?!\G)';
                                end = '(?=</(?i:template))';
                                patterns = ( { include = 'source.pug'; } );
                            }
                        );
                    },
                );
            },

Add that above the style pattern, and the Pug highlighter will highlight <template lang="pug"> blocks. In my case, this was inside .vue files.

How can I embed additional languages in TextMate 2's “HTML” bundle?

2 Answers2