@astropub/code

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!