Feature - Syntax highlighting in the vscode extension

tools/vscode-extension/README.md

@@ -1,6 +1,6 @@
 # Datastar Extension for Visual Studio Code
 
-Adds autocomplete for [Datastar](https://data-star.dev/) to Visual Studio Code.
+Adds autocomplete and syntax highlighting for [Datastar](https://data-star.dev/) to Visual Studio Code.
 
 ![VSCode extension](https://data-star.dev/static/images/vscode-extension-120.png)
 
@@ -18,14 +18,35 @@ By default, Datastar snippets work in HTML and most common template languages. Y
 {
   "datastar.enabledLanguages": [
     "html",
-    "php", 
+    "php",
     "twig",
     ".edge",
     ".custom"
   ]
 }
 ```
 
+### Custom Attributes
+
+You can add syntax highlighting support for custom Datastar plugins using the `datastar.customAttributes` setting.
+
+**To configure:**
+1. Open VS Code Settings (Cmd/Ctrl + ,)
+2. Search for "datastar custom attributes"
+3. Add your custom plugin names (without the `data-` prefix)
+
+**Example:**
+```json
+{
+  "datastar.customAttributes": [
+    "my-plugin",
+    "custom-action"
+  ]
+}
+```
+
+After adding custom attributes, reload VS Code to apply the changes.
+
 ## License
 
 This plugin is licensed for free under the MIT License.

tools/vscode-extension/package.json

@@ -24,9 +24,50 @@
   ],
   "main": "src/extension.js",
   "contributes": {
+    "grammars": [
+      {
+        "scopeName": "datastar.injection",
+        "path": "./src/datastar.injection.tmLanguage.json",
+        "injectTo": [
+          "text.html.basic",
+          "text.html.derivative",
+          "text.html.php",
+          "text.html.twig",
+          "text.html.php.blade",
+          "text.html.edge",
+          "text.html.nunjucks",
+          "text.html.njk",
+          "source.templ",
+          "source.astro",
+          "source.gohtml",
+          "text.html.vue",
+          "source.vue",
+          "source.svelte",
+          "text.html.svelte",
+          "text.html.handlebars",
+          "source.mustache",
+          "source.liquid",
+          "text.html.erb",
+          "text.html.ejs",
+          "text.pug",
+          "text.aspnetcorerazor",
+          "text.html.django",
+          "text.html.jinja",
+          "text.html.jsp"
+        ]
+      }
+    ],
     "configuration": {
       "title": "Datastar",
       "properties": {
+        "datastar.customAttributes": {
+          "type": "array",
+          "default": [],
+          "items": {
+            "type": "string"
+          },
+          "description": "Custom Datastar plugin names (without 'data-' prefix). Example: ['my-plugin', 'custom-action']"
+        },
         "datastar.enabledLanguages": {
           "type": "array",
           "default": [