Support style tags

.changeset/grumpy-timers-warn.md

@@ -0,0 +1,5 @@
+---
+'highlightjs-glimmer': minor
+---
+
+Support <style> tags

highlightjs-glimmer/dist/glimmer.cjs.cjs

@@ -235,7 +235,61 @@ function glimmer(hljs) {
     }
   ];
   STRING.variants.forEach((variant) => variant.contains.push(...MUSTACHE_EXPRESSION));
+  const XML_IDENT_RE = /[\p{L}0-9._:-]+/u;
+  const TAG_INTERNALS = {
+    endsWithParent: true,
+    illegal: /</,
+    relevance: 0,
+    contains: [
+      {
+        className: "attr",
+        begin: XML_IDENT_RE,
+        relevance: 0
+      },
+      {
+        begin: /=\s*/,
+        relevance: 0,
+        contains: [
+          {
+            className: "string",
+            endsParent: true,
+            variants: [
+              {
+                begin: /"/,
+                end: /"/,
+                contains: [XML_ENTITIES]
+              },
+              {
+                begin: /'/,
+                end: /'/,
+                contains: [XML_ENTITIES]
+              },
+              { begin: /[^\s"'=<>`]+/ }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+  const STYLE_TAG = {
+    className: "tag",
+    /*
+        The lookahead pattern (?=...) ensures that 'begin' only matches
+        '<style' as a single word, followed by a whitespace or an
+        ending bracket.
+        */
+    begin: /<style(?=\s|>)/,
+    end: />/,
+    keywords: { name: "style" },
+    contains: [TAG_INTERNALS],
+    starts: {
+      end: /<\/style>/,
+      returnEnd: true,
+      subLanguage: ["css", "xml"]
+    }
+  };
   const ANGLE_BRACKET_BLOCK = [
+    STYLE_TAG,
     {
       className: "tag",
       begin: regex.concat(

highlightjs-glimmer/src/glimmer.js

@@ -251,7 +251,63 @@ export default function glimmer(hljs) {
 
   STRING.variants.forEach((variant) => variant.contains.push(...MUSTACHE_EXPRESSION));
 
+  const XML_IDENT_RE = /[\p{L}0-9._:-]+/u;
+  const TAG_INTERNALS = {
+    endsWithParent: true,
+    illegal: /</,
+    relevance: 0,
+    contains: [
+      {
+        className: 'attr',
+        begin: XML_IDENT_RE,
+        relevance: 0,
+      },
+      {
+        begin: /=\s*/,
+        relevance: 0,
+        contains: [
+          {
+            className: 'string',
+            endsParent: true,
+            variants: [
+              {
+                begin: /"/,
+                end: /"/,
+                contains: [XML_ENTITIES],
+              },
+              {
+                begin: /'/,
+                end: /'/,
+                contains: [XML_ENTITIES],
+              },
+              { begin: /[^\s"'=<>`]+/ },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+
+  const STYLE_TAG = {
+    className: 'tag',
+    /*
+        The lookahead pattern (?=...) ensures that 'begin' only matches
+        '<style' as a single word, followed by a whitespace or an
+        ending bracket.
+        */
+    begin: /<style(?=\s|>)/,
+    end: />/,
+    keywords: { name: 'style' },
+    contains: [TAG_INTERNALS],
+    starts: {
+      end: /<\/style>/,
+      returnEnd: true,
+      subLanguage: ['css', 'xml'],
+    },
+  };
+
   const ANGLE_BRACKET_BLOCK = [
+    STYLE_TAG,
     {
       className: 'tag',
       begin: regex.concat(

index.html

@@ -9,6 +9,7 @@
     <!-- Highlight.JS does not ship ES Modules to CDNs... yet! -->
     <script src="https://cdn.jsdelivr.net/npm/@highlightjs/[email protected]/highlight.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@highlightjs/[email protected]/languages/javascript.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@highlightjs/[email protected]/languages/css.min.js"></script>
 
     <!-- Hybrid Theme! -->
     <link