@thewebforge/astro-code-blocks v0.2.0
astro-code-blocks
Beautiful code blocks for your Astro site This is a custom version of the integration from Astro Docs
Quick Install
The astro add command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren’t sure which package manager you’re using, run the first command.) Then, follow the prompts, and type “y” in the terminal (meaning “yes”) for each one.
# Using NPM
npx astro add @thewebforge/astro-code-blocks
# Using Yarn
yarn astro add @thewebforge/astro-code-blocks
# Using PNPM
pnpm astro add @thewebforge/astro-code-blocks
If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.
Manual Install
First, install the @thewebforge/astro-code-blocks package using your package manager. If you’re using npm or aren’t sure, run this in the terminal:
npm install @thewebforge/astro-code-blocks
If you’re using Yarn or PNPM, run this instead:
# Using Yarn
yarn add @thewebforge/astro-code-blocks
# Using PNPM
pnpm add @thewebforge/astro-code-blocks
Next, open your project’s astro.config.mjs file and add the following to the plugins array:
astro.config.mjs
import codeblocks from "@thewebforge/astro-code-blocks";
export default defineConfig({
integrations: [
codeblocks(),
],
});
Warning If you alreday installed Astro MDX integration. Or another integration that uses MDX, you need to make sure that the codeblocks integration comes before MDX in the integrations array. Otherwise, it will not work.
Config
You can configure the code blocks integration by passing an object to the codeblocks function.
astro.config.mjs
integrations: [
codeblocks({
// Copy Button Options
copyButtonTitle: 'Copy',
copyButtonTooltip: 'Copied to clipboard',
}),
],
Usage
With the integration installed, the component will automatically be imported and applied ot the code blocks you create in your .mdx
files.
Add a title to your code block
You can add a title to your code block by adding a title
prop to the code block
```js title="myscript.js"
console.log('Hello World')
```
Note The title prop is optional. If you don't add it, the code block will not have a title.
Highlight lines
You can highlight lines in your code block by adding a prop to the code blocks as a list of comma separated numbers in curly brackets. For example:
{1}
will highlight line 1{1,3}
will highlight lines 1 and 3{2-5, 7}
will highlight lines 1 to 5(not included) and 7
```js {1,3,5}
console.log('Hello World')
console.log('Hello World')
console.log('Hello World')
console.log('Hello World')
console.log('Hello World')
```
Highlight strings
You can highlight strings in your code block by adding a prop to the code blocks as a regular expression. The following example will highlight all occurences of "astro":
/astro/
will highlight all occurences of "astro"/\w*$/
will highlight the last word of each line
```bash /astro/
# Using NPM
npx astro add @thewebforge/astro-code-blocks
# Using Yarn
yarn astro add @thewebforge/astro-code-blocks
# Using PNPM
pnpm astro add @thewebforge/astro-code-blocks
```
Insertions and Deletions
You can highlight insertions and deletions in your code block by adding ins
and/or del
props to the code blocks as a list of lines in curly brackets. For example:
```bash ins={3,4} del={5,6}
# Using NPM
npx astro add @thewebforge/astro-code-blocks
# Using Yarn
yarn astro add @thewebforge/astro-code-blocks
# Using PNPM
pnpm astro add @thewebforge/astro-code-blocks
```
Custom CSS
Override the default Astro styles
crazy-code-props.css
:root {
--astro-code-color-text: white;
--astro-code-color-background: black;
--astro-code-token-constant: plum;
--astro-code-token-string: purple;
--astro-code-token-comment: tomato;
--astro-code-token-keyword: darkslategrey;
--astro-code-token-parameter: coral;
--astro-code-token-function: green;
--astro-code-token-string-expression: chartreuse;
--astro-code-token-punctuation: gray;
--astro-code-token-link: firebrick;
}