☰

如何在 TextMate 2 的“HTML”包中嵌入其他语言？

tag-icon • tag-icon textmate textmate-2
如何在 TextMate 2 的“HTML”包中嵌入其他语言？

TextMate 2 的“HTML”包内置了对突出显示 HTML 标签、CSS<style>标签内容和 JavaScript 标签内容的支持<script>。不过，我想将其配置为同时嵌入哈巴狗支持以及，并从<template lang="pug">开始标签开始。我如何以与现有 CSS 和 JavaScript 荧光笔相同的方式嵌入 Pug 荧光笔？

答案1

Github 项目 pug-tmbundle 可能会解决问题。

作者 davidrios 给出了这样的描述：

Pug 模板语言的 TextMate 包。以 JSON-tmLanguage 实现，包含编译后的 tmLanguage 版本。我所知道的所有语言功能（包括一些未记录的功能和 Pug 解析器的怪癖）和一些缩进增加/减少模式都已实现。

还包含一个使用 Python 而不是 JavaScript 的荧光笔，用于 PyPug，您可以从语法列表中手动选择 Pug (Python)，也可以为文件添加扩展名 .py.pug 以自动选择（仅限 Sublime Text）。还包括一个 test.py.pug 文件，可以使用 pypug 进行编译以进行测试。

最新更新是2016年9月16日，但描述还说：

这是专门为 Sublime Text 2 制作的，但经过测试，与 Textmate 2 兼容和 Sublime Text 3

答案2

我终于成功了。我安装了 Pug tmBundle，然后编辑了内置 HTML 包以包含以下内容：

                {   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'; } );
                            }
                        );
                    },
                );
            },

将其添加到style图案上方，Pug 荧光笔就会突出显示<template lang="pug">块。在我的例子中，这是在.vue文件内部。

相关内容