Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@astrojs/prism
Advanced tools
@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.
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>
```
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 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 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.
Supports Prism highlighting in Astro projects
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';`} />
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');
FAQs
Add Prism syntax highlighting support to your Astro site
The npm package @astrojs/prism receives a total of 252,601 weekly downloads. As such, @astrojs/prism popularity was classified as popular.
We found that @astrojs/prism demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.