├── .gitignore ├── assets └── alpine_logo.png ├── CHANGELOG.md ├── .vscodeignore ├── .vscode ├── extensions.json └── launch.json ├── README.md ├── package.json ├── LICENSE └── syntaxes └── injection.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /assets/alpine_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sperovita/alpinejs-syntax-highlight/HEAD/assets/alpine_logo.png -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.0.0] 4 | 5 | - Initial release 6 | 7 | ## [1.0.1] 8 | 9 | - added numeric attribute support (i.e. @keyup.debounce.2000ms=) 10 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | test/** 4 | .gitignore 5 | .yarnrc 6 | vsc-extension-quickstart.md 7 | **/jsconfig.json 8 | **/*.map 9 | **/.eslintrc.json 10 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the extensions.json format 4 | "recommendations": [ 5 | "dbaeumer.vscode-eslint" 6 | ] 7 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # alpine-syntax-highlight 2 | 3 | Javascript syntax highlighting for x- attribute values in html for [Alpine JS](https://alpinejs.dev/) 4 | 5 | ## Supported Files 6 | 7 | html 8 | php 9 | twig 10 | 11 | ## Credit 12 | 13 | Based off of textmate syntaxes from [Vetur](https://github.com/vuejs/vetur) 14 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Run Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "args": [ 13 | "--extensionDevelopmentPath=${workspaceFolder}" 14 | ] 15 | }, 16 | { 17 | "name": "Extension Tests", 18 | "type": "extensionHost", 19 | "request": "launch", 20 | "args": [ 21 | "--extensionDevelopmentPath=${workspaceFolder}", 22 | "--extensionTestsPath=${workspaceFolder}/test/suite/index" 23 | ] 24 | } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alpinejs-syntax-highlight", 3 | "displayName": "Alpine.js Syntax Highlight", 4 | "description": "Javascript syntax highlighting for Alpine.js x- attributes", 5 | "author": "Greg Ransons", 6 | "license": "MIT", 7 | "version": "1.0.1", 8 | "icon": "assets/alpine_logo.png", 9 | "publisher": "sperovita", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/Sperovita/alpinejs-syntax-highlight.git" 13 | }, 14 | "keywords": [ 15 | "alpine", 16 | "alpinejs", 17 | "alpine.js" 18 | ], 19 | "engines": { 20 | "vscode": "^1.63.0" 21 | }, 22 | "categories": [ 23 | "Programming Languages" 24 | ], 25 | "contributes": { 26 | "languages": [ 27 | { 28 | "id": "inline-alpinejs" 29 | } 30 | ], 31 | "grammars": [ 32 | { 33 | "language": "inline-alpinejs", 34 | "path": "./syntaxes/injection.json", 35 | "scopeName": "html.alpinejs.attribute", 36 | "injectTo": [ 37 | "text.html.derivative", 38 | "text.html.php", 39 | "text.html.twig" 40 | ], 41 | "embeddedLanguages": { 42 | "meta.embedded.inline.alpinejs": "javascript" 43 | } 44 | } 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Portions Copyright (c) 2021 Greg Ransons 4 | Portions Copyright (c) 2017 Pine Wu 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /syntaxes/injection.json: -------------------------------------------------------------------------------- 1 | { 2 | "scopeName": "html.alpinejs.attribute", 3 | "injectionSelector": ["L:text.html.derivative", "L:text.html.php", "L:text.html.twig"], 4 | "patterns": [ 5 | { 6 | "include": "#alpine-directives" 7 | } 8 | ], 9 | "repository": { 10 | "alpine-directives": { 11 | "name": "meta.attribute.alpine", 12 | "begin": "(?:\\b(x-)|(:|@|#))([a-zA-Z0-9\\-_]+)(?:\\:([a-zA-Z\\-_]+))?(?:\\.([a-zA-Z0-9\\-_]+))*\\s*(=)", 13 | "end": "(?<='|\")|(?=[\\s<>`])", 14 | "captures": { 15 | "1": { 16 | "name": "entity.other.attribute-name.html" 17 | }, 18 | "2": { 19 | "name": "punctuation.separator.key-value.html" 20 | }, 21 | "3": { 22 | "name": "entity.other.attribute-name.html" 23 | }, 24 | "4": { 25 | "name": "entity.other.attribute-name.html" 26 | }, 27 | "5": { 28 | "name": "entity.other.attribute-name.html" 29 | }, 30 | "6": { 31 | "name": "punctuation.separator.key-value.html" 32 | } 33 | }, 34 | "patterns": [ 35 | { 36 | "contentName": "meta.embedded.inline.alpinejs", 37 | "begin": "`", 38 | "beginCaptures": { 39 | "0": { 40 | "name": "punctuation.definition.string.begin.html" 41 | } 42 | }, 43 | "end": "`", 44 | "endCaptures": { 45 | "0": { 46 | "name": "punctuation.definition.string.end.html" 47 | } 48 | }, 49 | "patterns": [ 50 | { 51 | "include": "source.js#expression" 52 | } 53 | ] 54 | }, 55 | { 56 | "contentName": "meta.embedded.inline.alpinejs", 57 | "begin": "\"", 58 | "beginCaptures": { 59 | "0": { 60 | "name": "punctuation.definition.string.begin.html" 61 | } 62 | }, 63 | "end": "\"", 64 | "endCaptures": { 65 | "0": { 66 | "name": "punctuation.definition.string.end.html" 67 | } 68 | }, 69 | "patterns": [ 70 | { 71 | "include": "source.js#expression" 72 | } 73 | ] 74 | }, 75 | { 76 | "contentName": "meta.embedded.inline.alpinejs", 77 | "begin": "'", 78 | "beginCaptures": { 79 | "0": { 80 | "name": "punctuation.definition.string.begin.html" 81 | } 82 | }, 83 | "end": "'", 84 | "endCaptures": { 85 | "0": { 86 | "name": "punctuation.definition.string.end.html" 87 | } 88 | }, 89 | "patterns": [ 90 | { 91 | "include": "source.js#expression" 92 | } 93 | ] 94 | } 95 | ] 96 | } 97 | } 98 | } 99 | --------------------------------------------------------------------------------