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

0

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

answered Dec 30 '18 at 07:11

harrymc

455,459
31
526
924

davidrios' bundle adds Pug support to TextMate 2 (I even linked to it from the question), but critically, I need it to work within the context of a parent HTML bundle. I'm editing *.vue files that contain ` – Collin Allen Dec 30 '18 at 15:28
I didn't see that you already linked to it. So you mean that tmbundle does a partial job and you are looking for something better? – harrymc Dec 30 '18 at 19:54
I mean one that does all three. The built in HTML bundle does 2/3, and the aforelinked Pug bundle does 1/3, but I’m specifically interested in how to combine the two. The HTML bundle already embeds CSS and JavaScript, and I’d like to embed Pug as well :) – Collin Allen Dec 30 '18 at 19:57
Is that you are looking for a better development tool? For example Visual Code with [Vetur](https://flaviocopes.com/vue-vscode/)? Which operating system? – harrymc Dec 30 '18 at 21:07

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