The name of the language
Astro
Astro components use the .astro file extension.
The syntax combines a component script section between --- fences with an HTML-like template section.
Official syntax documentation:
Example:
---
const title = "Hello Astro";
const items = ["a", "b", "c"];
---
<h1>{title}</h1>
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>
Implementation in other libraries
Astro syntax highlighting is supported in other syntax highlighting tools/libraries.
I could not find an existing Astro lexer request in Rouge issues or pull requests.
Additional context
Supporting Astro in Rouge would help downstream platforms that use Rouge for syntax highlighting, such as Forem / DEV.to.
Currently, Markdown code fences like this are not highlighted as Astro on DEV.to:
---
const title = "Hello Astro";
---
<h1>{title}</h1>
A first implementation could support:
- tag:
astro
- filenames:
*.astro
- the
--- ... --- component script section as JavaScript/TypeScript-like code
- the template section as HTML-like markup
{...} template expressions as JavaScript-like expressions
I’m opening this as a lexer request because Astro code blocks are becoming common in technical articles and documentation.
I hope this helps anyone interested in adding support for Astro in Rouge.
The name of the language
Astro
Astrocomponents use the.astrofile extension.The syntax combines a component script section between
---fences with an HTML-like template section.Official syntax documentation:
Astrotemplate expressions reference: https://docs.astro.build/en/reference/astro-syntax/Astrocomponents overview: https://docs.astro.build/en/basics/astro-components/Example:
Implementation in other libraries
Astrosyntax highlighting is supported in other syntax highlighting tools/libraries.Astrodocs mention thatlang="astro"can be used withAstro’s Prism component: https://docs.astro.build/en/guides/syntax-highlighting/Astrofor syntax highlighting and supportsAstrocode highlighting inAstroprojects: https://docs.astro.build/en/guides/syntax-highlighting/I could not find an existing Astro lexer request in Rouge issues or pull requests.
Additional context
Supporting
Astroin Rouge would help downstream platforms that use Rouge for syntax highlighting, such as Forem / DEV.to.Currently, Markdown code fences like this are not highlighted as
Astroon DEV.to:A first implementation could support:
astro*.astro--- ... ---component script section as JavaScript/TypeScript-like code{...}template expressions as JavaScript-like expressionsI’m opening this as a lexer request because
Astrocode blocks are becoming common in technical articles and documentation.I hope this helps anyone interested in adding support for
AstroinRouge.