Created VSCode Extension, some updates from LinkedLives in the field

README.md

@@ -0,0 +1 @@
+PAT for MS Azure: o3tl54vtwzuvahiyu7j6qnkc2fc24dpixr4htycb3dgwwxrijamq

VSCode/.editorconfig

@@ -0,0 +1,5 @@
+root = true
+
+[*.{js,json}]
+indent_size = 2
+indent_style = space

VSCode/.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: 0x00000001A
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

VSCode/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+key

VSCode/.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.1.0",
+  "configurations": [
+      {
+          "name": "Debug extension",
+          "type": "extensionHost",
+          "request": "launch",
+          "runtimeExecutable": "${execPath}",
+          "args": ["--extensionDevelopmentPath=${workspaceRoot}" ]
+      }
+  ]
+}

VSCode/.vscodeignore

@@ -0,0 +1,3 @@
+.vscode/**
+.vscode-test/**
+.gitignore

VSCode/CHANGELOG.md

@@ -0,0 +1,119 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog] (http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.0] - 2018-02-02
+### Added
+- Syntax highlighting for html in es6 multiline strings
+
+## [1.1.0] - 2018-03-08
+### Fixed
+- Compatibility with Prettier
+
+## [1.2.0] - 2018-03-12
+### Added
+- Commands and keybindings
+
+## [1.3.0] - 2018-03-17
+### Added
+- Syntax highlight without a comment
+- Follow semver
+
+### [1.4.0] - 2018-03-22
+### Added
+- JS Syntax highlight
+- Single-line comment support
+
+### [1.5.0] - 2018-03-22
+### Fixed
+- Compatibility with Prettier
+
+### [1.6.0] - 2018-08-13
+### Added
+- SQL support. Beta
+
+### [1.7.0] - 2018-08-14
+### Fixed
+- Improve html function support
+
+### [1.7.1] - 2018-08-15
+### Fixed
+- Improve single-line comments support
+- Disable hotkeys
+
+### [1.8.1] - 2018-08-18
+### Added
+- Unquoted attributes support
+### Fixed
+- Js-in-attributes support
+
+### [1.8.2] - 2018-08-19
+### Fixed
+- Fix missing `${}` syntax support in sql
+
+### [1.8.3] - 2018-08-25
+### Fixed
+- Fix broken multiline support for jquery
+
+### [1.8.4] - 2019-01-11
+### Fixed
+- Add html text as parameter argument support
+
+### [1.8.5] - 2019-01-29
+## Fixed
+- Highlight html passed directly into a function
+- Highlight html inside html script
+- Support for html passed as an argument
+
+### [1.8.6] - 2019-01-31
+## Fixed
+- Improve multiline strings support
+
+### [1.8.7] - 2019-02-14
+## Fixed
+- Fix bug with syntax coloring after keyword, placed inside html template
+
+### [1.8.8] - 2019-04-12
+## Improved
+- Match all caps for SQL (by @thebrodmann)
+
+### [2.3.0] - 2021-04-23
+## Improved
+- Support uppercase /* HTML */
+
+### [2.4.0] - 2021-04-23
+## Improved
+- Support XML
+
+### [2.5.0] - 2021-04-23
+## Fixed
+- Ignore casing
+
+### [2.6.0] - 2021-04-23
+## Fixed
+- Syntax highlighting breaks with multiple placeholders in the same attribute
+## Improved
+- Support SVG
+
+### [2.7.0] - 2021-04-23
+## Fixed
+- SQL highlight stops after encountering an identifier delimiter `
+
+### [2.8.0] - 2021-04-23
+## Fixed
+- SQL support for vue files
+
+### [2.9.0] - 2021-05-18
+## Improved
+- CSS support
+
+### [2.10.0] - 2021-06-03
+## Improved
+- GLSL support
+
+### [2.11.0] - 2021-10-05
+## Improved
+- PHP file support

VSCode/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Tobimori (Victor Novikov)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

VSCode/README.md

@@ -0,0 +1,94 @@
+# Quill
+For syntax highlighting Quill functions, as well as css and html strings.
+
+Forked from the below repo. Currently supports everything it does, as well as ```addStyle(``)``` and ```html(``)```.
+
+|
+## ES6 String HTML 
+> [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html)
+
+> [Open VSX Registry](https://open-vsx.org/extension/Tobermory/es6-string-html)
+
+Adds syntax highlight support for code, placed in es6 multiline strings:
+- HTML (incl. html quoted and unquoted attrs)
+- SQL
+- XML
+- SVG
+- CSS
+- GLSL
+
+## Community
+- [python-string-sql](https://github.com/ptweir/python-string-sql) - Highlight SQL code in python multiline strings
+- [es6-string-javascript](https://github.com/Zjcompt/es6-string-javascript) - Highlight JS in multiline strings
+
+## Contributors
+[![guicook](https://img.shields.io/badge/gucook-❤-brightgreen)](https://github.com/guycook)
+[![RobertSasak](https://img.shields.io/badge/RobertSasak-❤-brightgreen)](https://github.com/RobertSasak)
+[![the-dr-lazy](https://img.shields.io/badge/the--dr--lazy-❤-brightgreen)](https://github.com/the-dr-lazy)
+[![yozman](https://img.shields.io/badge/yozman-❤-brightgreen)](https://github.com/yozman)
+[![JohnnyLufa](https://img.shields.io/badge/JohnnyLufa-❤-brighten)](https://github.com/JohnnyLufa)
+
+## Installation
+
+- Install `es6-string-html` from extensions (`ctrl + shift + x`)
+- Or download it from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html)
+- Or download it from the [Open VSX Registry](https://open-vsx.org/extension/Tobermory/es6-string-html)
+
+## Donation
+
+If you've found this extension useful, you can give me a cup of coffee :)
+
+[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/nonholy)       
+
+## Example
+
+![Example](docs/demo.png)
+
+## Usage
+
+Simply insert the comment /\*html\*/ or `html` (also works with SQL, SVG, XML, just use the appropriate word) before the string
+(see Requirements "section" for possible values) or select
+`Insert es6-string-html comment/template` from the commands menu
+(`ctrl+shift+p` or `f1`)
+
+> Tip: Comment in the beginning of es6 string is required
+
+## Requirements
+
+- Visual Studio Code v1.19.0 and higher
+- Comment `/*html*/` before the string. (also works with CSS, SQL, SVG, XML, just use the appropriate word) Possible values:
+- - `/*css*/`
+- - `/*html*/`
+- - `/*inline-html*/`
+- - `/*template*/`
+- - `/*inline-template*/`
+- Or
+- - `html` before the string
+
+## Release Notes
+
+### [...]
+- See changelog for previous notes
+
+### [2.7.0] - 2021-04-23
+## Fixed
+- SQL highlight stops after encountering an identifier delimiter `
+
+### [2.8.0] - 2021-04-23
+## Fixed
+- SQL support for vue files
+
+### [2.9.0] - 2021-05-18
+## Improved
+- CSS support
+
+### [2.10.0] - 2021-06-03
+## Improved
+- GLSL support
+
+### [2.11.0] - 2021-10-05
+## Improved
+- PHP files support
+-----------------------------------------------------------------------------------------------------------
+
+**Enjoy!**

VSCode/package-lock.json

@@ -0,0 +1,5 @@
+{
+  "name": "es6-string-html",
+  "version": "1.0",
+  "lockfileVersion": 1
+}

VSCode/package.json

@@ -0,0 +1,168 @@
+{
+	"name": "quill",
+	"displayName": "Quill",
+	"description": "HTML/CSS Syntax highlighting, best used with the Quill framework",
+	"version": "1.0.0",
+	"publisher": "capturedsun",
+	"icon": "docs/Quill.png",
+	"engines": {
+		"vscode": "^1.19.0"
+	},
+	"galleryBanner": {
+		"color": "#dedede",
+		"theme": "light"
+	},
+	"repository": {
+		"url": "https://github.com/capturedsun/Quill"
+	},
+	"bugs": {
+		"url": "https://github.com/capturedsun/Quill/issues"
+	},
+	"main": "./scripts/main",
+	"categories": [
+		"Programming Languages"
+	],
+	"keywords": [
+		"javascript",
+		"es6",
+		"es6-string-html",
+		"html",
+		"sql",
+		"xml",
+		"svg"
+	],
+	"activationEvents": [
+		"onCommand:quill.insertComment",
+		"onCommand:quill.insertTemplate"
+	],
+	"contributes": {
+		"commands": [
+			{
+				"command": "quill.insertComment",
+				"title": "Insert es6-string-html comment",
+				"category": "HTML"
+			},
+			{
+				"command": "quill.insertTemplate",
+				"title": "Insert es6-string-html template",
+				"category": "HTML"
+			}
+		],
+		"grammars": [
+			{
+				"injectTo": [
+					"source.html",
+					"source.js",
+					"source.js.jsx",
+					"source.jsx",
+					"source.ts",
+					"source.tsx",
+					"source.vue",
+					"source.svelte",
+					"source.sql",
+					"source.css",
+					"text.html"
+				],
+				"scopeName": "inline.es6-css",
+				"path": "./syntaxes/es6-inline-css.json",
+				"embeddedLanguages": {
+					"meta.embedded.block.html": "html"
+				}
+			},
+			{
+				"injectTo": [
+					"source.html",
+					"source.js",
+					"source.js.jsx",
+					"source.jsx",
+					"source.ts",
+					"source.tsx",
+					"source.vue",
+					"source.svelte",
+					"source.sql",
+					"text.html"
+				],
+				"scopeName": "inline.es6-glsl",
+				"path": "./syntaxes/es6-inline-glsl.json",
+				"embeddedLanguages": {
+					"meta.embedded.glsl": "glsl"
+				}
+			},
+			{
+				"injectTo": [
+					"source.html",
+					"source.js",
+					"source.js.jsx",
+					"source.jsx",
+					"source.ts",
+					"source.tsx",
+					"source.vue",
+					"source.svelte",
+					"source.sql",
+					"text.html"
+				],
+				"scopeName": "inline.es6-xml",
+				"path": "./syntaxes/es6-inline-xml.json",
+				"embeddedLanguages": {
+					"meta.embedded.xml": "xml"
+				}
+			},
+			{
+				"injectTo": [
+					"source.html",
+					"source.js",
+					"source.js.jsx",
+					"source.jsx",
+					"source.ts",
+					"source.tsx",
+					"source.vue",
+					"source.svelte",
+					"source.sql",
+					"text.html"
+				],
+				"scopeName": "inline.es6-js-injection",
+				"path": "./syntaxes/es6-js-injection.json"
+			},
+			{
+				"injectTo": [
+					"source.html",
+					"source.js",
+					"source.js.jsx",
+					"source.jsx",
+					"source.ts",
+					"source.tsx",
+					"source.vue",
+					"source.svelte",
+					"source.sql",
+					"text.html"
+				],
+				"scopeName": "inline.es6-html",
+				"path": "./syntaxes/es6-inline-html.json"
+			},
+			{
+				"injectTo": [
+					"source.html",
+					"source.js",
+					"source.js.jsx",
+					"source.jsx",
+					"source.ts",
+					"source.tsx",
+					"source.vue",
+					"source.svelte",
+					"source.sql",
+					"text.html"
+				],
+				"scopeName": "inline.es6-sql",
+				"path": "./syntaxes/es6-inline-sql.json",
+				"embeddedLanguages": {
+					"meta.embedded.block.sql": "sql"
+				}
+			}
+		]
+	},
+	"__metadata": {
+		"id": "quill.capturedsun",
+		"publisherId": "capturedsun",
+		"publisherDisplayName": "Captured Sun"
+	}
+}

VSCode/scripts/main.js

@@ -0,0 +1,69 @@
+import * as vscode from 'vscode';
+
+const typeScriptExtensionId = 'vscode.typescript-language-features';
+const pluginId = 'typescript-lit-html-plugin';
+const configurationSection = 'lit-html';
+
+export async function activate(context) {
+  const extension = vscode.extensions.getExtension(typeScriptExtensionId);
+
+  if (!extension) {
+    return;
+  }
+
+  await extension.activate();
+
+  if (!extension.exports || !extension.exports.getAPI) {
+    return;
+  }
+
+  const api = extension.exports.getAPI(0);
+
+  if (!api) {
+    return;
+  }
+
+  vscode.workspace.onDidChangeConfiguration(e => {
+    if (e.affectsConfiguration(configurationSection)) {
+      synchronizeConfiguration(api);
+    }
+  }, undefined, context.subscriptions);
+
+  synchronizeConfiguration(api);
+}
+
+function synchronizeConfiguration(api) {
+  api.configurePlugin(pluginId, getConfiguration());
+}
+
+function getConfiguration() {
+  const config = vscode.workspace.getConfiguration(configurationSection);
+  const outConfig = {
+    format: {}
+  };
+
+  withConfigValue(config, 'tags', tags => { outConfig.tags = tags; });
+  withConfigValue(config, 'format.enabled', enabled => { outConfig.format.enabled = enabled; });
+
+  return outConfig;
+}
+
+function withConfigValue(config, key, withValue) {
+  const configSetting = config.inspect(key);
+  
+  if (!configSetting) {
+    return;
+  }
+
+  // Make sure the user has actually set the value.
+  // VS Code will return the default values instead of `undefined`, even if user has not don't set anything.
+  if (typeof configSetting.globalValue === 'undefined' && typeof configSetting.workspaceFolderValue === 'undefined' && typeof configSetting.workspaceValue === 'undefined') {
+    return;
+  }
+
+  const value = config.get(key, undefined);
+
+  if (typeof value !== 'undefined') {
+    withValue(value);
+  }
+}

VSCode/syntaxes/es6-inline-css.json

@@ -0,0 +1,135 @@
+{
+  "fileTypes": [
+    "js",
+    "jsx",
+    "ts",
+    "tsx",
+    "html",
+    "vue",
+    "svelte",
+    "php"
+  ],
+  "injectionSelector": "L:source.js -comment -string, L:source.js -comment -string, L:source.jsx -comment -string,  L:source.js.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
+  "injections": {
+    "L:source": {
+      "patterns": [
+        {
+          "match": "<",
+          "name": "invalid.illegal.bad-angle-bracket.html"
+        }
+      ]
+    }
+  },
+  "patterns": [
+    {
+      "begin": "(?i)(\\s*(addStyle\\())(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "entity.name.tag.html"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "source.css"
+        },
+        {
+          "include": "inline.es6-htmlx#template"
+        },
+        {
+          "include": "string.quoted.other.template.js"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(\\s?\\/\\*\\s?(css|inline-css)\\s?\\*\\/\\s?)(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.block"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "source.css"
+        },
+        {
+          "include": "inline.es6-htmlx#template"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(\\s*(css|inline-css))(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.block"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "source.css"
+        },
+        {
+          "include": "inline.es6-htmlx#template"
+        },
+        {
+          "include": "string.quoted.other.template.js"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(?<=\\s|\\,|\\=|\\:|\\(|\\$\\()\\s{0,}(((\\/\\*)|(\\/\\/))\\s?(css|inline-css)[ ]{0,1000}\\*?\\/?)[ ]{0,1000}$",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.line"
+        }
+      },
+      "end": "(`).*",
+      "patterns": [
+        {
+          "begin": "(\\G)",
+          "end": "(`)"
+        },
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "source.css"
+        }
+      ]
+    },
+    {
+      "begin": "(\\${)",
+      "end": "(})",
+      "beginCaptures": {
+        "1": {
+          "name": "entity.name.tag"
+        }
+      },
+      "endCaptures": {
+        "1": {
+          "name": "entity.name.tag"
+        }
+      },
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "source.js"
+        }
+      ]
+    }
+  ],
+  "scopeName": "inline.es6-css"
+}

VSCode/syntaxes/es6-inline-glsl.json

@@ -0,0 +1,112 @@
+{
+  "fileTypes": [
+    "js",
+    "jsx",
+    "ts",
+    "tsx",
+    "html",
+    "vue",
+    "svelte",
+    "php"
+  ],
+  "injectionSelector": "L:source.js -comment -string, L:source.js -comment -string, L:source.jsx -comment -string,  L:source.js.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
+  "injections": {
+    "L:source": {
+      "patterns": [
+        {
+          "match": "<",
+          "name": "invalid.illegal.bad-angle-bracket.html"
+        }
+      ]
+    }
+  },
+  "patterns": [
+    {
+      "begin": "(?i)(\\s?\\/\\*\\s?(glsl|inline-glsl)\\s?\\*\\/\\s?)(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.block"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "source.glsl"
+        },
+        {
+          "include": "inline.es6-htmlx#template"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(\\s*(glsl|inline-glsl))(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.block"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "source.glsl"
+        },
+        {
+          "include": "inline.es6-htmlx#template"
+        },
+        {
+          "include": "string.quoted.other.template.js"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(?<=\\s|\\,|\\=|\\:|\\(|\\$\\()\\s{0,}(((\\/\\*)|(\\/\\/))\\s?(glsl|inline-glsl)[ ]{0,1000}\\*?\\/?)[ ]{0,1000}$",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.line"
+        }
+      },
+      "end": "(`).*",
+      "patterns": [
+        {
+          "begin": "(\\G)",
+          "end": "(`)"
+        },
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "source.glsl"
+        }
+      ]
+    },
+    {
+      "begin": "(\\${)",
+      "end": "(})",
+      "beginCaptures": {
+        "1": {
+          "name": "entity.name.tag"
+        }
+      },
+      "endCaptures": {
+        "1": {
+          "name": "entity.name.tag"
+        }
+      },
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "source.js"
+        }
+      ]
+    }
+  ],
+  "scopeName": "inline.es6-glsl"
+}

VSCode/syntaxes/es6-inline-html.json

@@ -0,0 +1,135 @@
+{
+  "fileTypes": [
+    "js",
+    "jsx",
+    "ts",
+    "tsx",
+    "html",
+    "vue",
+    "svelte",
+    "php"
+  ],
+  "injectionSelector": "L:source.js -comment -string, L:source.js -comment -string, L:source.jsx -comment -string,  L:source.js.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
+  "injections": {
+    "L:source": {
+      "patterns": [
+        {
+          "match": "<",
+          "name": "invalid.illegal.bad-angle-bracket.html"
+        }
+      ]
+    }
+  },
+  "patterns": [
+    {
+      "begin": "(?i)(\\s*(html\\())(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "entity.name.tag.html"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "text.html.basic"
+        },
+        {
+          "include": "inline.es6-htmlx#template"
+        },
+        {
+          "include": "string.quoted.other.template.js"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(\\s?\\/\\*\\s?(html|template|inline-html|inline-template)\\s?\\*\\/\\s?)(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.block"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "text.html.basic"
+        },
+        {
+          "include": "inline.es6-htmlx#template"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(\\s*(html|template|inline-html|inline-template))(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.block"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "text.html.basic"
+        },
+        {
+          "include": "inline.es6-htmlx#template"
+        },
+        {
+          "include": "string.quoted.other.template.js"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(?<=\\s|\\,|\\=|\\:|\\(|\\$\\()\\s{0,}(((\\/\\*)|(\\/\\/))\\s?(html|template|inline-html|inline-template)[ ]{0,1000}\\*?\\/?)[ ]{0,1000}$",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.line"
+        }
+      },
+      "end": "(`).*",
+      "patterns": [
+        {
+          "begin": "(\\G)",
+          "end": "(`)"
+        },
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "text.html.basic"
+        }
+      ]
+    },
+    {
+      "begin": "(\\${)",
+      "end": "(})",
+      "beginCaptures": {
+        "1": {
+          "name": "entity.name.tag"
+        }
+      },
+      "endCaptures": {
+        "1": {
+          "name": "entity.name.tag"
+        }
+      },
+      "patterns": [
+        {
+          "include": "source.ts#template-substitution-element"
+        },
+        {
+          "include": "source.js"
+        }
+      ]
+    }
+  ],
+  "scopeName": "inline.es6-html"
+}

VSCode/syntaxes/es6-inline-sql.json

@@ -0,0 +1,78 @@
+{
+  "fileTypes": [
+    "js",
+    "jsx",
+    "ts",
+    "tsx",
+    "html",
+    "vue",
+    "svelte",
+    "php"
+  ],
+  "injectionSelector": "L:source.js -comment -string, L:source.jsx -comment -string,  L:source.js.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
+  "injections": {
+    "L:source": {
+      "patterns": [
+        {
+          "match": "<",
+          "name": "invalid.illegal.bad-angle-bracket.html"
+        }
+      ]
+    }
+  },
+  "patterns": [
+    {
+      "begin": "(?i)(\\s*(sql))(`)",
+      "end": "(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "variable.parameter"
+        }
+      },
+      "patterns": [
+        { "include": "source.ts#template-substitution-element" },
+        { "include": "source.ts#string-character-escape" },
+        { "include": "source.sql" },
+        { "include": "source.plpgsql.postgres" },
+        { "match": "." }
+      ]
+    },
+    {
+      "begin": "(?i)(\\s?\\/?\\*?\\s?(sql|inline-sql)\\s?\\*?\\/?\\s?)(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.block"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        { "include": "source.ts#template-substitution-element" },
+        { "include": "source.ts#string-character-escape" },
+        { "include": "source.sql" },
+        { "include": "source.plpgsql.postgres" },
+        { "match": "." }
+      ]
+    },
+    {
+      "begin": "(?i)(?<=\\s|\\,|\\=|\\:|\\(|\\$\\()\\s{0,}(((\\/\\*)|(\\/\\/))\\s?(sql|inline-sql)[ ]{0,1000}\\*?\\/?)[ ]{0,1000}$",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.line"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "begin": "(\\G)",
+          "end": "(`)"
+        },
+        { "include": "source.ts#template-substitution-element" },
+        { "include": "source.ts#string-character-escape" },
+        { "include": "source.sql" },
+        { "include": "source.plpgsql.postgres" },
+        { "match": "." }
+      ]
+    }
+  ],
+  "scopeName": "inline.es6-sql"
+}

VSCode/syntaxes/es6-inline-xml.json

@@ -0,0 +1,72 @@
+{
+  "fileTypes": [
+    "js",
+    "jsx",
+    "ts",
+    "tsx",
+    "html",
+    "vue",
+    "svelte",
+    "php"
+  ],
+  "injectionSelector": "L:source.js -comment -string, L:source.js -comment -string, L:source.jsx -comment -string,  L:source.js.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
+  "injections": {
+    "L:source": {
+      "patterns": [
+        {
+          "match": "<",
+          "name": "invalid.illegal.bad-angle-bracket.html"
+        }
+      ]
+    }
+  },
+  "patterns": [
+    {
+      "begin": "(?i)(\\s?\\/\\*\\s?(xml|svg|inline-svg|inline-xml)\\s?\\*\\/\\s?)(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.block"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "include": "text.xml"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(\\s*(xml|inline-xml))(`)",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.block"
+        }
+      },
+      "end": "(`)",
+      "patterns": [
+        {
+          "include": "text.xml"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(?<=\\s|\\,|\\=|\\:|\\(|\\$\\()\\s{0,}(((\\/\\*)|(\\/\\/))\\s?(xml|svg|inline-svg|inline-xml)[ ]{0,1000}\\*?\\/?)[ ]{0,1000}$",
+      "beginCaptures": {
+        "1": {
+          "name": "comment.line"
+        }
+      },
+      "end": "(`).*",
+      "patterns": [
+        {
+          "begin": "(\\G)",
+          "end": "(`)"
+        },
+        {
+          "include": "text.xml"
+        }
+      ]
+    }
+  ],
+  "scopeName": "inline.es6-xml"
+}

VSCode/syntaxes/es6-js-injection.json

@@ -0,0 +1,19 @@
+{
+	"fileTypes": [
+		"js",
+		"jsx",
+		"ts",
+		"tsx",
+		"html",
+		"vue",
+		"svelte",
+		"php"
+	],
+	"injectionSelector": "L:source.js (string.quoted.double.html, string.quoted.single.html), L:source.jsx (string.quoted.double.html, string.quoted.single.html), L:source.js.jsx (string.quoted.double.html, string.quoted.single.html), L:source.ts (string.quoted.double.html, string.quoted.single.html), L:source.tsx (string.quoted.double.html, string.quoted.single.html)",
+	"patterns": [
+		{
+			"include": "source.ts#template-substitution-element"
+		}
+	],
+	"scopeName": "inline.es6-js-injection"
+}

VSCode/tests/test.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <style>
+        .className {
+            color: red;
+        }
+    </style>
+</head>
+<body>
+    <script>
+        /**
+            source.css
+            meta.embedded.block.html
+            text.html.derivative
+        */
+        let variable = /*html*/ `
+            <div attr="${test}asd${test}">Test</div>${Window}
+        `
+
+        variable = /*css*/`
+        .className {
+            color: red;
+        }
+        `
+
+        variable = /*html*/`<div attr="asdasd">Test</div>${window}`
+
+        variable = //html
+        `
+        <div>Test</div>${Window}
+        `
+
+        variable = /*html*/ 
+        `
+        <div>Test</div>${Window}
+        `
+
+        const fn = (param) => param;
+        const html = (param) => html`<div>Something</div>`
+        fn(//html
+        `<div>Something</div>${window}`
+        )
+        fn(html`<div>OK</div>`)
+
+        variable = /*svg*/`<text x="${test}0" y="0">${elmnt.txt}</text>`
+
+        variable = /*SVG*/`
+        <svg viewBox="0 0 100 100">
+            ${myArray.reduce((html, elmnt) => html + /*svg*/`<text x="${test}0" y="0">${elmnt.txt}</text>`, '')}
+        </svg>`
+
+        variable = /*sql*/`SELECT * FROM \`table\` WHERE 1=1`
+
+        variable = /*sql*/
+        `
+        SELECT -- must have whitespace [\s ] after --
+            *,
+            --123, -- double negative is positive!
+        FROM table--syntax error in mysql
+        `
+
+        variable = /*sql*/
+        `
+        SELECT * FROM ${table}
+        WHERE \`test\` NOT BETWEEN 'Carnarvon Tigers' AND 'Mozzarella di Giovanni'
+        ORDER BY ProductName;
+        `
+        
+        variable = /*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> 
+        `
+    </script>
+</body>
+</html>

VSCode/tests/test.svelte

@@ -0,0 +1,34 @@
+<script>
+    let tests = [
+        /*html*/`<div>OK</div>`,
+        /* INLINE-HTML */ `<div>Test</div>$`,
+        /*css*/`
+        .className {
+            color: red;
+        }
+        `,
+        // html 
+        `
+        <div>Test</div>
+        `,
+        /* html */ 
+        `
+        <div>Test</div>
+        `,
+        /*sql*/
+        `
+        SELECT * FROM test
+        WHERE ProductName NOT BETWEEN 'Carnarvon Tigers' AND 'Mozzarella di Giovanni'
+        ORDER BY ProductName;
+        `,
+        /*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> 
+        `
+    ]
+</script>

VSCode/tests/test.vue

@@ -0,0 +1,57 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+    test: /*html*/`<div>OK</div>`,
+    test2() {
+        let variable = /* INLINE-HTML */ `<div>Test</div>${Window}`
+        
+        variable = /*css*/`
+        .className {
+            color: red;
+        }
+        `
+        variable = /* html */ `<div>Test</div>${window}`
+
+        variable = // html 
+        `
+        <div>Test</div>${Window}
+        `
+
+        variable = /* html */ 
+        `
+        <div>Test</div>${Window}
+        `
+
+        const fn = (param) => param;
+        const html = (param) => html`<div>Something</div>`
+        fn(//html
+        `<div>Something</div>${window}`
+        )
+        fn(html`<div>OK</div>`)
+        variable = /*sql*/
+        `
+        SELECT * FROM ${table}\`_postfix\`
+        WHERE ProductName NOT BETWEEN 'Carnarvon Tigers' AND 'Mozzarella di Giovanni'
+        ORDER BY ProductName;
+        `
+
+        variable = /*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> 
+        `
+    },
+    test: 'asdas'
+}
+</script>
+
+<style>
+
+</style>

index.html

@@ -2,6 +2,11 @@
 <html lang="en">
   <head>
     <title>Index</title>
+    <script type="module">
+      import * as quill from 'quill.js';
+      window.quill = {};
+      Object.entries(quill).forEach(([name, exported]) => window.quill[name] = exported);
+    </script>
   </head>
   <body>
 

index.js

@@ -1,7 +1,3 @@
-import * as dom from './dom.js';
-window.dom = {};
-Object.entries(dom).forEach(([name, exported]) => window.dom[name] = exported);
-
 class Index extends HTMLElement {
 
     css = /*css*/ `
@@ -15,7 +11,7 @@ class Index extends HTMLElement {
     constructor() {
         super();
         
-        dom.addStyle(this.css);
+        addStyle(this.css);
         this.innerHTML = this.html;
     }
 

navtemplate.js

@@ -0,0 +1,60 @@
+class NavigationIndex extends HTMLElement {
+    urlBeforeChange;
+
+    css = /*css*/ `
+        navigation-index {
+            
+        }
+    `
+
+    html = /*html*/ `
+
+    `
+
+    constructor() {
+        super();
+        quill.addStyle(this.css);
+        this.innerHTML = this.html;
+    }
+
+    connectedCallback() {
+        this.listenForNavigation();
+    }
+
+    listenForNavigation() {
+        let oldPushState = history.pushState;
+        history.pushState = function pushState() {
+            let ret = oldPushState.apply(this, arguments);
+            window.dispatchEvent(new Event('pushstate'));
+            window.dispatchEvent(new Event('locationchange'));
+            return ret;
+        };
+
+        window.addEventListener('popstate', () => {
+            window.dispatchEvent(new Event('locationchange'));
+        });
+        
+        window.addEventListener('locationchange', this.locationChange);
+
+        this.urlBeforeChange = window.location.href;
+    }
+
+    locationChange = async () => {
+        let splitURL = window.location.pathname.split("/");
+        let urlPrefix = splitURL.slice(0, -1).join('/');
+        let urlEnding = splitURL[splitURL.length-1];
+        if(urlEnding === '') {
+            this.innerHTML = this.html;
+        } else {
+            let pascalizedEnding = urlEnding.replace(/(^\w|-\w)/g, (urlEnding) => urlEnding.replace(/-/, "").toUpperCase());
+            import(`.${urlPrefix}/${pascalizedEnding}/${pascalizedEnding}.js`)
+            let htmlTag = urlEnding.includes("-") ? urlEnding : urlEnding + "-wrapper";
+            this.innerHTML = `<${htmlTag}></${htmlTag}>`
+        }
+        this.urlBeforeChange = window.location.href;
+    }
+
+}
+
+customElements.define('navigation-index', NavigationIndex);
+export default NavigationIndex;

quill.js

@@ -4,7 +4,7 @@ export function addStyle(cssString) {
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
   }
   
-export function create(elementString) {
+export function html(elementString) {
     let parser = new DOMParser();
     let doc = parser.parseFromString(elementString, 'text/html');
     return doc.body.firstChild;