Astro Code

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!