Astro Code enables code syntax highlighting and rendering in Astro projects.
- Syntax Highlighting: Beautifully highlight code blocks in various programming languages.
- Syntax highlighting for popular languages like JavaScript, TypeScript, HTML, CSS, and more.
- Lightweight: Minimal dependency footprint for faster builds.
- A fully optimized ESM version of Prism for modern web apps.
- Customizable: Easily adapt the component to your project's needs.
- Customize styles and themes using your own CSS.
Installation
Install the component via npm:
npm install @astropub/code
Import and use the component in your Astro files:
--- import Code from "@astropub/code" --- <Code lang="js" code="const str = 'string'">
Usage
To display a syntax-highlighted code block:
--- import Code from "@astropub/code" --- <Code lang="html" code="<h1>Hello, Astro!</h1>"></Code>
Multi-Line Code
Pass an array of strings to the code prop:
--- import Code from "@astropub/code" --- <Code lang="css" code={[ "body {", " margin: 0;", "}" ]}></Code>
Supported Languages
Out of the box, Astro Code supports these languages via Prism.js:
| Language | Type Value |
|---|---|
| Scripting | js jsx ts tsx |
| Content | html json svg xml |
| Styling | css |
| Shell | sh |
API Reference
| Atttribute | Type | Description |
|---|---|---|
code |
string string[] |
Code to render. |
lang |
string |
Language of highlighting. |
Utility Usage
The highlightText method can be used to highlight a given plain text string with a language.
import { highlightText } from "@astropub/code/highlight" export const usage = () => { highlightText("const a = true", "js) }
The highlightTextNode method can be used to highlight a Text node with a language.
import { highlightTextNode } from "@astropub/code/highlight" export const usage = (node: Text) => { highlightText(node, "js) }
License
Licensed under the MIT-0 License.
Enjoy!