├── .gitignore ├── .vscode └── launch.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs ├── logo.png └── logo.svg ├── package.json └── syntaxes ├── literally-html-string-injection.json └── literally-html.json /.gitignore: -------------------------------------------------------------------------------- 1 | out 2 | node_modules 3 | *.log 4 | .DS_Store 5 | *.vsix -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | { 3 | "version": "0.1.0", 4 | "configurations": [ 5 | { 6 | "name": "Launch Extension", 7 | "type": "extensionHost", 8 | "request": "launch", 9 | "runtimeExecutable": "${execPath}", 10 | "args": ["--extensionDevelopmentPath=${workspaceRoot}" ] 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 0.0.1 - February 15, 2018 4 | - Added adopt and wire to the list of known words. TODO: maybe just drop the list all-together? 5 | 6 | ## 0.0.0 - February 15, 2018 7 | - Yo I heard you like html so I added syntax highlighting for html templates 8 | 9 | ## 1.2.0 - January 29, 2018 10 | - Yo I heard you like html so I added syntax highlighting for lit html templates inside of html script blocks 11 | 12 | ## 1.1.0 - January 12, 2018 13 | - Pick up new plugin version that adds completion entry details and fixes some bugs. 14 | 15 | ## 1.0.0 - January 11, 2018 16 | - Highlight JS substitutions in html string attributes 17 | - Adds html language support: IntelliSense, hover, formatting. Requires VS Code 1.20 18 | 19 | ## 0.2.0 - December 13, 2017 20 | - Support spaces after html tag. Thanks @mhoyer! 21 | - Support `obj.html` style tags. Thanks @mhoyer! 22 | 23 | ## 0.1.0 - December 7, 2017 24 | - Support spaces before html tag. Thanks @simonwjackson! 25 | - Support for bel/choo `raw` tag. Thanks @simonwjackson! 26 | 27 | ## 0.0.4 - October 12, 2017 28 | - Fix syntax highlighting kicking in inside of strings 29 | 30 | ## 0.0.1 - October 10, 2017 31 | - Initial release -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) Microsoft Corporation 2 | 3 | All rights reserved. 4 | 5 | MIT License 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation 8 | files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, 9 | modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software 10 | is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 15 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS 16 | BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT 17 | OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # literally HTML 2 | 3 | - - - 4 | 5 | ## WARNING 6 | 7 | This project is inferior and not maintained as much as [htmx-literals](https://marketplace.visualstudio.com/items?itemName=lehwark.htmx-literals) is. 8 | 9 | There is also [leet-html](https://marketplace.visualstudio.com/items?itemName=EldarGerfanov.leet-html) as alternative or [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) so please consider using these instead as I am not planning to spend time on this any time soon. 10 | 11 | - - - 12 | 13 | A library agnostic fork of [vscode-lit-html](https://github.com/mjbvz/vscode-lit-html) 14 | which aim is to bring syntax highlighting and language support for HTML inside of 15 | any JavaScript and TypeScript tagged template strings. 16 | 17 | > **❗Important**: IntelliSense and language support requires VS Code 1.20+. 18 | 19 | ### Example 20 | 21 | ```js 22 | hyper(document.body)` 23 |
24 | ${model.greetings} !!! 25 |
`; 26 | 27 | render` 28 | `; 33 | ``` 34 | 35 | ## Usage 36 | 37 | If simply installing through VS Code is not enough, maybe the following could help. 38 | 39 | ```sh 40 | # within your project 41 | npm install --save-dev literally-html 42 | 43 | # create a jsconfig.json file with the following content 44 | echo '{ 45 | "compilerOptions": { 46 | "plugins": [ 47 | { 48 | "name": "typescript-lit-html-plugin" 49 | } 50 | ] 51 | } 52 | }' > jsconfig.json 53 | ``` 54 | -------------------------------------------------------------------------------- /docs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebReflection/vscode-literally-html/47b7498c19c8383160ccd5e5e8745cdb2716e0b5/docs/logo.png -------------------------------------------------------------------------------- /docs/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xmlliterally` <div> HTML!! </div>`; 152 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "publisher": "webreflection", 3 | "name": "literally-html", 4 | "displayName": "literally-html", 5 | "description": "Syntax highlighting for html inside of JavaScript and TypeScript tagged template strings", 6 | "version": "0.1.3", 7 | "icon": "docs/logo.png", 8 | "scripts": { 9 | "publish": "vsce publish" 10 | }, 11 | "galleryBanner": { 12 | "color": "#fcfcfc", 13 | "theme": "light" 14 | }, 15 | "repository": { 16 | "url": "https://github.com/WebReflection/vscode-literally-html.git" 17 | }, 18 | "bugs": { 19 | "url": "https://github.com/WebReflection/vscode-literally-html/issues" 20 | }, 21 | "engines": { 22 | "vscode": "^1.15.0" 23 | }, 24 | "categories": [ 25 | "Programming Languages" 26 | ], 27 | "keywords": [ 28 | "hyper", 29 | "lit", 30 | "html", 31 | "javascript", 32 | "template" 33 | ], 34 | "contributes": { 35 | "grammars": [ 36 | { 37 | "injectTo": [ 38 | "source.js", 39 | "source.js.jsx", 40 | "source.jsx", 41 | "source.ts", 42 | "source.tsx", 43 | "text.html.basic" 44 | ], 45 | "scopeName": "inline.lit-html", 46 | "path": "./syntaxes/literally-html.json", 47 | "embeddedLanguages": { 48 | "meta.embedded.block.html": "html" 49 | } 50 | }, 51 | { 52 | "injectTo": [ 53 | "source.js", 54 | "source.js.jsx", 55 | "source.jsx", 56 | "source.ts", 57 | "source.tsx", 58 | "text.html.basic" 59 | ], 60 | "scopeName": "inline.lit-html.string.injection", 61 | "path": "./syntaxes/literally-html-string-injection.json", 62 | "embeddedLanguages": { 63 | "meta.template.expression.ts": "typescript" 64 | } 65 | } 66 | ], 67 | "typescriptServerPlugins": [ 68 | { 69 | "name": "typescript-lit-html-plugin" 70 | } 71 | ] 72 | }, 73 | "dependencies": { 74 | "typescript-lit-html-plugin": "0.2.0" 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /syntaxes/literally-html-string-injection.json: -------------------------------------------------------------------------------- 1 | { 2 | "fileTypes": [], 3 | "injectionSelector": "L:meta.embedded.block.html meta.tag", 4 | "patterns": [ 5 | { 6 | "include": "source.ts#template-substitution-element" 7 | } 8 | ], 9 | "scopeName": "inline.lit-html.string.injection" 10 | } 11 | -------------------------------------------------------------------------------- /syntaxes/literally-html.json: -------------------------------------------------------------------------------- 1 | { 2 | "fileTypes": [], 3 | "injectionSelector": "L:source.js -comment -(string -meta.embedded), L:source.jsx -comment -(string -meta.embedded), L:source.js.jsx -comment -(string -meta.embedded), L:source.ts -comment -(string -meta.embedded), L:source.tsx -comment -(string -meta.embedded)", 4 | "injections": { 5 | "L:source": { 6 | "patterns": [ 7 | { 8 | "match": "<", 9 | "name": "invalid.illegal.bad-angle-bracket.html" 10 | } 11 | ] 12 | } 13 | }, 14 | "patterns": [ 15 | { 16 | "name": "string.js.taggedTemplate", 17 | "contentName": "meta.embedded.block.html", 18 | "begin": "(?x)\\.*(?:[a-zA-Z]+\\.)?\\b(adopt|bind|bound|for|hyper|hyperHTML|html|node|raw|render|svg|view|viper|viperHTML|wire)\\b(?:[\\(<][^\\)>]*?[\\)>])?(`)", 19 | "beginCaptures": { 20 | "1": { 21 | "name": "entity.name.function.tagged-template.js" 22 | }, 23 | "2": { 24 | "name": "punctuation.definition.string.template.begin.js" 25 | } 26 | }, 27 | "end": "(`)", 28 | "endCaptures": { 29 | "0": { 30 | "name": "string.js" 31 | }, 32 | "1": { 33 | "name": "punctuation.definition.string.template.end.js" 34 | } 35 | }, 36 | "patterns": [ 37 | { 38 | "include": "source.ts#template-substitution-element" 39 | }, 40 | { 41 | "include": "text.html.basic" 42 | } 43 | ] 44 | } 45 | ], 46 | "scopeName": "inline.lit-html" 47 | } 48 | --------------------------------------------------------------------------------