Skip to content

A lightweight Astro component for syntax highlighting and rendering beautifully formatted code blocks.

License

Notifications You must be signed in to change notification settings

astro-community/code

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Dec 12, 2024
88fa454 · Dec 12, 2024

History

8 Commits
Dec 12, 2024
Dec 5, 2024
Dec 5, 2024
Dec 5, 2024
Dec 9, 2024
Dec 5, 2024
Dec 12, 2024
Dec 12, 2024
Dec 5, 2024
Dec 5, 2024

Repository files navigation

Astro Code

Astro Code enables code syntax highlighting and rendering in Astro projects.

NPM Version NPM Downloads

  • 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!

About

A lightweight Astro component for syntax highlighting and rendering beautifully formatted code blocks.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published