0x00000001a / es6-string-html

Highlight code in ES6 multiline strings

I miss the home that I don't have.

es6-string-html's Issues

Compatibility with JetBrains IDEs?

Hi,

Just wanted to mention that other IDEs like JetBrains Intellij/WebStorm etc are doing this natively (no plugin required) with the following syntax: /* language=jsx */

That would be nice if you also supported this exact syntax: this way we could commit those annotations and it would work for all/most IDEs at once, instead of favoring one IDE in particular.

SQL highlight stops after encountering an identifier delimiter `

SQL highlight stops after encountering a token delimited with the identifier delimiter `

For example

/*sql*/`
    SELECT
         *
    FROM \`table\`
    WHERE
        1=1
`;

Here's a test SQL for your future tests.

SELECT
	*
FROM
(
	SELECT
		-- One line comment with /* stream comment inside of it */ and another right after -- I want my independence
		DISTINCT unique_random_numbers_anyway,
		(
			SELECT  
				COUNT(*),
				*
			FROM whatever
			FORCE INDEX (bigger_than_the_table_itself)
		),
		@var_Name := CONCAT('''', "'abc'", "/*' -- Hello'*/", '\r\n\t -- line comment inside string? It can''t be. /* block comment */ '''' '),
		'"/*''\r\n\t*/"', -- Confusing start of block comment: /*
		-3 + (-9) - - 3 + ( -    99 + 2 % -5 | 333 ~999&111111111 * -0.00  *  +   33 >> +123 << ++321.22) ^ 0xAFe0 AS `Computer error 123`
	FROM users /* Why do we have stream comments? */
	LEFT JOIN something ON something.user_id = users.user_id
	WHERE
		-- We joined you to kill you. TROJAN JOIN
		something.user_id IS NULL

		AND	-1=-+-+-++-1
		AND -1=-+-+-++1
		
		AND	`quoted_name`='2019-12-12'
		OR`quoted_name` >= '2019-12-12T12:34:56Z'

		-- NOT IN and IN may vary in number of elements dynamically for the same query, usually when they don't contain any subqueries.
		OR xxx NOT IN ( - 999, 'AAA', -59)
		AND zzz not in ('a', -12.99e-30, 0xAFED13, (select name from cache limit 1), 0, column_name)
		
		AND	-user_id = -123 -- That minus sign must be gone. Only questions must remain. Except for the name which must keep the minus sign.
		AND	wage > 0.1
		
		AND	name LIKE '%I will become a question mark% start of block comment: /*'
	ORDER BY
		user_date_created DESC /* 
		Multi-line comment means importance!
		ortance...
		tance...
		sss...
	*/
	LIMIT 1460 /* LIMIT HERE? */ -- Noooo!

	UNION -- ALL

	SELECT
		`database name with spaces`./*What am I?*/`012345799`
	FROM xxxx
)
ORDER BY FIELD(user_phone_call_uniqueid, 'abc', 'def', 'xxx', 1, -1)

SQL line comment must include white space after --

SELECT -- must have whitespace [\s ] after --
    *,
    --123, -- double negative is positive!
FROM table--syntax error in mysql

Currently, es6-string identifies --something as a line comment, although its not (it is a syntax error)

Can't get extension to work - showing as 'Not yet activated.' in RUNTIME STATUS.

Hi,
After restarting VSCODE and even after rebooting my machine I still can't get the extension to start. I've installed the extension locally and in WSL2 and uninstalled / reinstalled several times but no joy. My VSCODE is:
Version: 1.86.2 (user setup)
Commit: 903b1e9d8990623e3d7da1df3d33db3e42d80eda
Date: 2024-02-13T19:40:56.878Z
Electron: 27.2.3
ElectronBuildId: 26908389
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Windows_NT x64 10.0.22621

When I Ctl + Shift + p and try to insert a string I get and error in VSCODE: command 'es6stringhtml.insertComment' not found.

Any ideas?
Ian

would be nice to support more languages other than just es6

It'd be nice to add support for more popular languages, e.g. Pyton, Java, Golang, etc.

I know there is https://github.com/ptweir/python-string-sql for Python and probably forks for other languages. But installing many extensions for same logic, i.e. /*language*/"(literal)" is kind of redundant.

Supporting more language would definitely make this extension even more popular.

Thanks!

Configurable tag function names

Is it possible to make the tag function name configurable? To enable syntax highlighting for lets say html… and htm…

prettier not formatting things correctly

I am using https://github.com/prettier/prettier with the default settings

For example, let's say I have this:

render() {
    return html`<div><h1>Hello</h1><p>I love coding.</p></div>`
}

Prettier correctly formats it to this:

render() {
    return html`<div>
        <h1>Hello</h1>
        <p>I love coding.</p>
    </div>`;
}

Now let's say I have this:

render() {
    return /*html*/`<div><h1>Hello</h1><p>I love coding.</p></div>`
}

Prettier does not format it whatsoever. Notice how instead of html I am using /*html*/ because I am not using lit-html, but I still want to have syntax highlighting and formatting for html string literals.

How can I get prettier to format it correctly?

Template language syntax highlighting

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)
}]

Question: Using this repo as a starting place for an equivalent feature for Python

Hi, Thank you for what looks like a great plugin! I'm looking for a way to add SQL- or HTML-highlighting to strings in Python scripts (.py files) and I'm wondering if branching off your work would be a good way to start. Any tips would be appreciated!

Add support to configure triggers

Currently we can use these options before template literals to highlight it's content as html:

1. /*html*/`<html></html>`
2. /*inline-html*/`<html></html>`
3. /*template*/`<html></html>`
4. /*inline-template*/`<html></html>`
5. html`<html></html>`

This can be generalised as: highlight html if before the template literal a certain pattern/string is found. So it should be possible to add configuration option to support any arbitrary pattern before template literals to trigger highlighting.

For example in our projects we already have a convention that everything after "html: " needs highlighting. It looks like this:

MyHelper.init({
  html: `
    <div>Hello, world!</div>
  `
});

Of course we can add a comment everywhere, but it seems like there is a more elegant solution to support such conventions automatically.

Also we can think of other similar cases like assignment expression to an html variable or a property with a name "html".

const html = `<div>Hello, world!</div>`;
myObj.html = `<div>Hello, world!</div>`;

So in this case a string before a template triggering the highlighting is "html = ".

Taking all mentioned cases I see this configuration option in VSCode settings as smth like:

{
  "es6StringHtml.triggerPatterns": ["html: ", "html = "]
}

RegExps could be also possible here.

I didn't check the current implementation of triggers and if any JS parsing and AST are involved, but even if yes, I don't see any objections to not provide such a configuration option on top of whatever is currently already working, if VSCode is flexible enough, of course. I can help with the implementation.

prettier formatter will add space in the end

maybe the regexp need add \s in the begin match.

incorrect comment blocks in html script blocks

if I have a html string like this;

let str = /*html*/`
<div> This is a div </div>
<script> console.log("This is script")</script>
`

I want to use the comment shortcuts in vs code to comment out the js within the script tags.
I would expect the comment command to add // to the line.
Instead it adds <!-- --> to the line.

Syntax Highlighting in Attribute Values

Thanks for the work you've put into this plugin. It's been super useful.

I noticed that syntax highlighting and autocompletion don't work with placeholders in attribute values. The example below shows this.

Example snippet:

const data = 'Andrew'
const example = html`
    <div class="${data}">${data}</div>
`;

Output:

The placeholder for data in the attribute value isn't highlighted. The placeholder for data in the element content is highlighted.

Is there anyway I can fix this so highlighting and autocompletion can be used everywhere?

emmet supported?

.innerHTML = ``

Thanks for publishing this helpful package 😄

Please add support for

template.innerHTML = `<output>Hi</output>`;

Compare with Atom:

Thanks for considering this issue

Customizable highlighting for generic text

Is it possible to add a textmate scope for general text that appears in a tagged string? For example, in this:

I would like to customize *, id, test, etc. However, there is no scope (except general JavaScript) for text that is not something in particular like a keyword or a quoted string, so any general kind of text cannot be highlighted. This is similar for HTML strings, where I may want to make plain text in an element a different color:

Doesn't work when passed directly into a function

When passing into a function directly, the syntax highlighting and IntelliSense doesn't activate.

ex:

render(html`
   <div>
      ...
   </div>
`)

Syntax highlighting breaks with multiple placeholders in the same attribute

The highlighting works when you only have one placeholder in an attribute :

But it breaks if there is more than one (the second $ & the last " are not correctly colored):

Sort changelog to show newest version first

Sort changelog in "newest to oldest version" order.

Having to scroll down to find what's changed in the last version is very inconvenient.

css intellisense

when a style tag is in the HTML the css doesn't get intellisense. This is a key feature for custom elements.

VS code - Version 1.34.0 (1.34.0)
component version - 1.8.8

Getting error: Command not found

I am trying to use Strg+Shift+P to insert the /* html */ to avoid typing. Yet setting the entry I am getting this error:

xml support

it would be great if we could do

/*xml*/
`
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>http://www.example.com/</loc>
   </url>
</urlset> 
'

Code folding possible?

Hi, this extension is exactly what I was looking for! I wonnder if it would be possible to allow code folding inside es6 multiline strings... Thanks!

Please add SQL support

You are a life saver.
Would it be difficult to add SQL support in the same way (the same SQL support VS code comes prepacked with)?

fake copy ?

it's me or its have a fake copy of you plugin on the market ? v1.1.0 !?
https://marketplace.visualstudio.com/items?itemName=hjb2012.vscode-es6-string-html

Add Extension to Open VSX registry

Can you also add this extension to open vsx registry?

Add Autocomplete?

I like the highlighting of this extension. But there's no autocomplete which is annoying.

I haven't made a vscode extension so I don't know how this works but would it be possible to enable HTML autocomplete for the text within the string? If it works in JSX (There is autocomplete in JSX) then why can't this extension do it too?

Wrapped Multi-line support appears to have broken

We'll often use this in a jQuery wrapper like so:

$( //html
`<div>
     <div>Test</div>
 </div>
`);

Previously this has worked great. However, in the latest update the above format doesn't work. It does still work fine if it is not wrapped in parentheses like so:

const content = //html
`<div>
     <div>Test</div>
 </div>`;

I have noticed that if I put the opening back-tick on the same line as the html comment, it will work in the jQuery wrapper:

$( //html`
<div>
  <div>Test</div>
</div>` );

`/* css */` breaks all syntax highlighting after it

Without /* css */:

With /* css */:

This seems to be a problem with both this repo & bashmish/es6-string-css as well, as found from my testing & bashmish#6.

sql tagged templates mess up all the following syntax highlighting

Issue Type: Bug

Put this code into a JavaScript file:

const abc = await db.query(sql`SELECT 1`)
if (!dbLine) {
  console.warn(`Blah`)
}

const foobar = await xyz()

You will see this messed-up syntax highlighting below the first line:

When disabling your extension, it looks OK:

---

Extension version: 2.12.0
VS Code version: Code 1.67.2 (c3511e6c69bb39013c4a4b7b9566ec1ca73fc4d5, 2022-05-17T18:15:52.058Z)
OS version: Windows_NT x64 10.0.19043
Restricted Mode: No
Remote OS version: Linux x64 4.4.0-19041-Microsoft
Remote OS version: Linux x64 4.4.0-19041-Microsoft
Connection to 'wsl+Ubuntu-20.04' could not be established

System Info

Item	Value
CPUs	AMD Ryzen 7 PRO 4750U with Radeon Graphics (16 x 1697)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on oop_rasterization: enabled opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	31.23GB (9.56GB free)
Process Argv	--crash-reporter-id 86814b6d-9362-4292-9bc7-43662930765a
Screen Reader	no
VM	0%

Item	Value
Remote	WSL: Ubuntu-20.04
OS	Linux x64 4.4.0-19041-Microsoft
CPUs	AMD Ryzen 7 PRO 4750U with Radeon Graphics (16 x 1700)
Memory (System)	31.23GB (9.63GB free)
VM	0%

Item	Value
Remote	WSL: Ubuntu-20.04
OS	Linux x64 4.4.0-19041-Microsoft
CPUs	AMD Ryzen 7 PRO 4750U with Radeon Graphics (16 x 1700)
Memory (System)	31.23GB (9.63GB free)
VM	0%

Connection to 'wsl+Ubuntu-20.04' could not be established

feature request

could u plz add a feature for customize highlight RegEx?

Syntax coloring inside html attribute templates

Hello

I'm using a html-generating template function, however the HTML attributes don't get syntax colored:

Ideally, they would look like this:

When I place event listeners inline, my library requires that they are surrounded by quotes ( onclick="${myFunc}" ), just like other attributes, however other libraries may use the template literal directly ( onclick=${myFunc} ), like they do in React.

ctrl+shift+h is a decades old keyboard shortcut for standard classic Visual Studio users

ctrl+shift+h is a decades old keyboard shortcut for classic Visual Studio users.

It activates the search and replace in all files dialog.

It is overriden by this library to insert a very short string /*html*/.

Please consider using a non-conflicting keyboard shortcut, or removing a keyboard shortcut for such a short string.

/*js|ts*/ support

It would be nice to also support javascript or typescript syntax highlighting as you may have sometime template strings containing only js code.

shortkey

If you like the idea, it can be cool to add a quick shortkey.
maybe something like.
CTRL+ALT+H

Thank you plugin work very well.

HTML comment highlight

Could you please add syntax highlighting with /* HTML */ comment in uppercase? Because of Prettier works only with this comment https://prettier.io/blog/2018/11/07/1.15.0.html#html-template-literal-in-javascript

Support for this.constructor.html

Hello,

I'm having an use case in which I have a tagged template literal function statically defined on multiple classes. This means that I have to use it like this:
const generatedHTML = this.constructor.html`<div>content</div>`

I've seen that the extension already applies syntax highlighting if the tagged template function is html, but it doesn't for this.constructor.html. I think that the best solution would be to apply syntax highlighting if the template string is preceded by .html or html.

Otherwise the library is great and it's more powerful in practice than the alternatives. Thank you for developing it.

Backslash escape not detected

I'm trying to use backtick inside of a template string, but it seems like the plug in is not correctly detecting the escaped backtick. Here's a sample of the code.

template: html`
    <div
      class="classname"
      :style="background-image: url(\`${cardImage ??
        imgPlaceholder}');background-size: cover; cursor: pointer;\`
    >
      <div class="classname">
        <span class="classname" style=""
          >{{ title }}</span
        >
      </div>
    </div>
  `,

Could this be a bug?

add support for // comments

Hello, Please allow using //html {NewLine} for plugin.
Example:
var a = //html

`
STARTtag ENDtag

`

Thank You

Syntax coloring breaks after template or html word in tsx files

I'm using the template word a lot around my project as you can see on the screenshot.
The coloring of the code after the keyword looks like a raw text
Currently I observe this only in .tsx files

VS Code info
Version: 1.31.1
Commit: 1b8e8302e405050205e69b59abb3559592bb9e60
Date: 2019-02-12T02:19:29.629Z
Electron: 3.1.2
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Linux x64 4.18.0-15-generic

es-string-html version: 1.8.6

.vue file type support

its equivalent to an html file

Highlight when string contains valid html

It would be nice if we had the option to format all template strings that contain valid html (or match ^<\w+.*>) to remove the need for distracting comments

js syntaxe color? `${code()};`

Hi, i just notice javascript not get syntaxe color?
It is not urgent, but it will help for the eyes.
It would be great if you could make JS syntax highlighting compatible.

thank for your awesome plugin.

in the prinscreen you can look
${type==='spinesheets' && appendSpineData()};

the original color should look like thats.

Plugin doesn't work in html files

When i write templates i must change language mode to javascript with wrong highlight thousands of errors....
Can it work in html script tags?

add html text as parameter argument support

Hello,

Currently, the extension supports string html only scope level but not at parameter level.
e.g.

function foo(){   }
foo(//html
    `<div>
    <p>
    </p>
    </div>`)

will not work.

Thank You,

SVG tag

@mydesireiscoma Could you please make it possible to write /*svg*/ instead of /*html*/ to indicate being inside a <svg> tag and activate svg syntax highlighting (already part of the current html syntax highlighting, so hopefully not that difficult).

Intended use case:

myDiv.innerHTML = /*html*/`
<svg viewBox="0 0 100 100">
    ${myArray.reduce((html, elmnt) => html + /*svg*/`<text x="0" y="0">${elmnt.txt}</text>`, '')}
</svg>

/*css*/ support

It would be awesome if we could do /css/ and have it highlight correctly.

Line comment without following string literal breaks syntax hightlighting

A line comment that starts with html but is not followed by a temlate literal breaks syntax highlighting for the rest of the file.

Minimal example:

const foo = 'html'; // html is awesome
console.log(foo);

The part before the comment is displayed correctly, but the comment and the next line are default text color and VS code shows JS completion when typing inside the comment.

ignore required comment case and spaces

Motivation

Some other tools require another case or spacing.

Reproduction

Prettier requires /* HTML */. When using it instead of /*html*/, syntax highlighting stop working.

See:

• https://prettier.io/blog/2018/11/07/1.15.0.html#html-template-literal-in-javascript
• prettier/prettier#3548