Add Astro language support

components.json

@@ -175,6 +175,11 @@
 			"title": "Atmel AVR Assembly",
 			"owner": "cerkit"
 		},
+		"astro": {
+			"title": "Astro",
+			"require": "tsx",
+			"owner": "HynekS"
+		},
 		"autohotkey": {
 			"title": "AutoHotkey",
 			"owner": "aviaryan"

components/prism-astro.js

@@ -0,0 +1,24 @@
+(function (Prism) {
+	Prism.languages.astro = Prism.languages.extend('tsx', {
+		comment: Prism.languages.tsx.comment.concat([
+			{
+				pattern: /<!--(?:(?!<!--)[\s\S])*?-->/,
+				greedy: true,
+			},
+		]),
+	});
+	Prism.languages.insertBefore('astro', 'prolog', {
+		'component-script-block': {
+			pattern: /(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,
+			lookbehind: true,
+			greedy: true,
+			inside: {
+				punctuation: /^---|---$/,
+				'component-script': {
+					pattern: /\S+(?:\s+\S+)*/,
+					inside: Prism.languages.typescript,
+				},
+			},
+		},
+	});
+}(Prism));

examples/prism-astro.html

@@ -0,0 +1,33 @@
+<h2>Full example</h2>
+<pre><code>---
+import Widget from &quot;@astrojs/components/widget&quot;;
+
+// Define some TypeScript code
+const message: string = &quot;Welcome to Astro.js&quot;;
+---
+
+&lt;style&gt;
+  article {
+    background-color: #f2f2f2;
+    font-family: Arial, sans-serif;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  console.log(&quot;Hello from Astro&quot;);
+&lt;/script&gt;
+
+&lt;article&gt;
+  &lt;h1&gt;{message}&lt;/h1&gt;
+  &lt;p&gt;This is an example demonstrating Astro.js features.&lt;/p&gt;
+  &lt;!-- &quot;slot&quot; behaves similar to &quot;children&quot; in React --&gt;
+  &lt;slot /&gt;
+  &lt;Widget client:load /&gt;
+&lt;/article&gt;</pre></code>
+
+
+
+
+
+
+

plugins/autoloader/prism-autoloader.js

@@ -23,6 +23,7 @@
 			"markup",
 			"csharp"
 		],
+		"astro": "tsx",
 		"birb": "clike",
 		"bison": "c",
 		"c": "clike",

tests/languages/astro/comments_feature.test

@@ -0,0 +1,4 @@
+---
+---
+<!-- HTML comment syntax is valid in .astro files -->
+{/* JS comment syntax is also valid */}

tests/languages/astro/component_script_feature.test

@@ -0,0 +1,4 @@
+---
+const items = ["Dog", "Cat", "Platypus"];
+---
+<div>Scooby, Dexter, Plattie</div>

tests/languages/astro/script_tag_feature.test

@@ -0,0 +1,9 @@
+---
+---
+<button id="button">Click Me</button>
+<script>
+  function handleClick () {
+    console.log("button clicked!");
+  }
+  document.getElementById("button").addEventListener("click", handleClick);
+</script>

tests/languages/astro/style_tag_feature.test

@@ -0,0 +1,9 @@
+<style>
+  h1 { 
+    color: red; 
+  }
+
+  .text { 
+    color: blue; 
+  }
+</style>

tests/languages/astro/typescript_inclusion.test

@@ -0,0 +1,8 @@
+---
+interface Props {
+  name: string;
+  greeting?: string;
+}
+const { greeting = 'Hello', name } = Astro.props;
+---
+<h2>{greeting}, {name}!</h2>