{"action":"created","issue":{"url":"https://api.github.com/repos/atom/language-javascript/issues/282","labels_url":"https://api.github.com/repos/atom/language-javascript/issues/282/labels{/name}","comments_url":"https://api.github.com/repos/atom/language-javascript/issues/282/comments","events_url":"https://api.github.com/repos/atom/language-javascript/issues/282/events","html_url":"https://github.com/atom/language-javascript/pull/282","id":122148323,"number":282,"title":"Support HTML and CSS syntax in template strings suggesting those formats","user":{"login":"jrburke","id":73359,"avatar_url":"https://avatars.githubusercontent.com/u/73359?v=3","gravatar_id":"","url":"https://api.github.com/users/jrburke","html_url":"https://github.com/jrburke","followers_url":"https://api.github.com/users/jrburke/followers","following_url":"https://api.github.com/users/jrburke/following{/other_user}","gists_url":"https://api.github.com/users/jrburke/gists{/gist_id}","starred_url":"https://api.github.com/users/jrburke/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jrburke/subscriptions","organizations_url":"https://api.github.com/users/jrburke/orgs","repos_url":"https://api.github.com/users/jrburke/repos","events_url":"https://api.github.com/users/jrburke/events{/privacy}","received_events_url":"https://api.github.com/users/jrburke/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/atom/language-javascript/labels/needs-review","name":"needs-review","color":"bfe5bf"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-12-14T22:39:43Z","updated_at":"2015-12-27T04:18:37Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/atom/language-javascript/pulls/282","html_url":"https://github.com/atom/language-javascript/pull/282","diff_url":"https://github.com/atom/language-javascript/pull/282.diff","patch_url":"https://github.com/atom/language-javascript/pull/282.patch"},"body":"[Tagged template strings](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings#Tagged_template_strings) allow embedding HTML and CSS in a JavaScript file, but allow a safe way to escape the values provided by the JavaScript context, and allows a [tool to statically verify the use of this pattern](https://github.com/mozfreddyb/eslint-plugin-no-unsafe-innerhtml).\r\n\r\nSince tagged template strings provide a name for the function used to process the template string, that name can be used to target using HTML or CSS syntax highlighting within a template string.\r\n\r\nThis pull request enables tagged string use whose tag function name ends in `html` to specify HTML syntax highlighting inside the string. Same with `css`.\r\n\r\nThere are cases where the interpolated_js loses out to the HTML or CSS highlighting, like if `${x}` is used in an HTML attribute, but I believe that is just a limit of regexp-based parsers. If HTML/CSS is in the string, it still seems better to favor the larger format in the string to allow the most gain for visually parsing the contents.\r\n\r\nI am new to this syntax highlighting format, so I am not sure if I followed best practice for it. For instance, perhaps it is better to extract the constant.character.escape.js as a separate thing and just refer to it in each of the template string-related blocks. The constant.character.escape.js used for \" and ' strings are slightly different between them though, so not sure if that was intentional or if both ' \" and the template string sections could use the same constant.character.escape.js, as specified for the original template string definition.\r\n\r\nThis works for me locally, and a couple of very simple tests were added."},"comment":{"url":"https://api.github.com/repos/atom/language-javascript/issues/comments/167378705","html_url":"https://github.com/atom/language-javascript/pull/282#issuecomment-167378705","issue_url":"https://api.github.com/repos/atom/language-javascript/issues/282","id":167378705,"user":{"login":"50Wliu","id":2766036,"avatar_url":"https://avatars.githubusercontent.com/u/2766036?v=3","gravatar_id":"","url":"https://api.github.com/users/50Wliu","html_url":"https://github.com/50Wliu","followers_url":"https://api.github.com/users/50Wliu/followers","following_url":"https://api.github.com/users/50Wliu/following{/other_user}","gists_url":"https://api.github.com/users/50Wliu/gists{/gist_id}","starred_url":"https://api.github.com/users/50Wliu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/50Wliu/subscriptions","organizations_url":"https://api.github.com/users/50Wliu/orgs","repos_url":"https://api.github.com/users/50Wliu/repos","events_url":"https://api.github.com/users/50Wliu/events{/privacy}","received_events_url":"https://api.github.com/users/50Wliu/received_events","type":"User","site_admin":false},"created_at":"2015-12-27T04:18:37Z","updated_at":"2015-12-27T04:18:37Z","body":"Hey @jrburke, sorry for the delayed review of this.\r\n\r\nI have a couple of issues with this - you mentioned that the interpolation will sometimes lose out to the HTML/CSS styling: will that break the rest of the formatting, or will it gracefully recover?\r\nAlso, it's not *necessary* for HTML/CSS templates to begin with `html` or `css` - maybe it could be called `htmlify` or `style` - who knows?  I think that it might be annoying for only those specific patterns to receive highlighting, but again this seems like a limitation of regex.  What do you think should be done about those cases?"}}