Highlighting within code blocks in Astro

Putting a code block into a post using Astro is very easy. You simply have to enclose the code in triple backticks, aka grave accents.

Here, I enclose the backticks in pre and code tags, in order to show them but not have them processed as a code block:

```javascript
const fizz = "buzz";
```

But how do you highlight part of the code?

const fizz = "buzz"; 
const foo = "baz";

I did a little digging to learn that Astro uses Shiki to highlight code blocks. And it turns out that Shiki offers some transformers. But, from their documentation, “Transformers only applies classes and does not come with styles; you can provide your own CSS rules to style them properly.”

So what you need to do is a 4-step process:

1. install the Shiki transformers
2. modify your Astro config
3. add styling for a “highlighted” CSS class
4. indicate which lines you want highlighted

Here are the steps with a few more details for you:

1. Install the Shiki transformers

npm i -D @shikijs/transformers

2. Modify your Astro config

import { transformerNotationHighlight } from "@shikijs/transformers";

    shikiConfig: {
      transformers: [transformerNotationHighlight()],
    },

3. Add some CSS styling

Here are styles I added at the end of my tailwind.css file:

.astro-code code {
  @apply block w-fit px-4;
}

.astro-code code .highlighted {
  @apply -mx-4 inline-block bg-yellow-800 px-4;
}

4. Indicate lines you want highlighted by adding a comment for the Shiki transformer

Add // [!code highlight] at the end of a line you wanted highlighted.

The comment at the end of the line(s) will be stripped out and CSS classes will be added, and boom! That’s how you do it!

```javascript
const fizz = "buzz";
const foo = 'baz'; // [!code highlight]
```

const fizz = "buzz";
const foo = "baz"; 

For more info, including instructions on how to highlight many lines with just one comment, see the Shiki site.