@astrojs/prism

What is @astrojs/prism?

@astrojs/prism is an npm package that provides syntax highlighting for code blocks in Astro projects using the Prism.js library. It allows developers to easily integrate Prism.js into their Astro sites to highlight code in various programming languages.

What are @astrojs/prism's main functionalities?

Syntax Highlighting

This feature allows you to highlight code syntax for a specified language. In this example, JavaScript code is highlighted.

```astro
---
import { Prism } from '@astrojs/prism';
---

<Prism language="javascript">
  {`const hello = 'world';
console.log(hello);`}
</Prism>
```

Custom Themes

This feature allows you to apply custom themes to your code blocks. In this example, the 'prism-tomorrow' theme is applied to a CSS code block.

```astro
---
import { Prism } from '@astrojs/prism';
import 'prismjs/themes/prism-tomorrow.css';
---

<Prism language="css">
  {`body { background-color: #333; color: #fff; }`}
</Prism>
```

Line Numbers

This feature allows you to add line numbers to your code blocks. In this example, line numbers are added to a Python code block.

```astro
---
import { Prism } from '@astrojs/prism';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
---

<Prism language="python" class="line-numbers">
  {`def hello_world():
    print('Hello, world!')`}
</Prism>
```

Other packages similar to @astrojs/prism

react-syntax-highlighter

react-syntax-highlighter is a React component for syntax highlighting using highlight.js or Prism.js. It offers a wide range of themes and supports many languages. Compared to @astrojs/prism, it is specifically designed for React applications.

prism-react-renderer

prism-react-renderer is another React component for rendering Prism.js highlighted code. It is highly customizable and provides a more flexible API for rendering code blocks. It is similar to @astrojs/prism but tailored for React environments.

highlight.js

highlight.js is a popular syntax highlighting library that works in various environments, including browsers and Node.js. It supports a wide range of languages and themes. Unlike @astrojs/prism, it is not specifically designed for Astro but can be integrated with it.

README

@astrojs/prism

Supports Prism highlighting in Astro projects

Component

This package exports a component to support highlighting inside an Astro file. Example:

---
import { Prism } from '@astrojs/prism';
---

<Prism lang="js" code={`const foo = 'bar';`} />

Internal

This package exports a runHighlighterWithAstro function to highlight while making sure the Astro language is loaded beforehand

import { runHighlighterWithAstro } from '@astrojs/prism';

runHighlighterWithAstro(
  `
  ---
    const helloAstro = 'Hello, Astro!';
  ---

  <div>{helloAstro}</div>
`,
  'astro',
);