0x00000001A / es6-string-html

Highlight code in ES6 multiline strings
https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html
MIT License
132 stars 79 forks source link

Template language syntax highlighting #31

Open gavinmcfarland opened 5 years ago

gavinmcfarland commented 5 years ago

Would you consider adding support for templating languages like Nunjucks, Handlebars, Liquid etc?

It would be very useful to be able to see template variables like {{variable}} more clearly.

Here's an example from one of my projects which uses Nunjucks.

export default ['template', 'font-style', ({ theme }) => {

    let data = {
        rules: [{
            name: 'font-style',
            abbr: 'font',
            ...structure(theme.font.style, ['modifiers', 'props', 'value'])
        }]
    }

    return render(`{% for rule in rules -%}
    {%- if rule.props -%}
    .{{rule.abbr}} {
        {%- for prop in rule.props %}
        {{prop.name | kebabcase}}: {{prop.value}};
        {%- endfor %}
    }
    {%- endif -%}
    {% for modifier in rule.modifiers %}
    {% if modifier.name === 'default' %}
    .{{rule.abbr}} {
    {%- else -%}
    .{{rule.abbr}}-{{modifier.name}} {
    {%- endif -%}
        {%- for prop in modifier.props %}
        {{prop.name | kebabcase}}: {{prop.value}};
        {%- endfor %}
    }
    {%- endfor -%}
    {%- endfor -%}`, data)
}]