1

I'm migrating from VuePress to Astro. In VuePress, I was able to highlight code lines with syntax like this:

```csharp {1}
public override int GetHashCode()
{
    return prop1.GetHashCode() ^ prop2.GetHashCode()
}
```

The first line would be highlighted in the resulting HTML.

In Astro, I am not getting any highlight. How do I enable that?

Btw, on the official docs I see some more nice features regarding code blocks:

  • diffs
  • highlighting just some specific text, not entire lines.

https://docs.astro.build/en/guides/assets/

For now, line highlighting is enough for me.

mnj
  • 2,539
  • 3
  • 29
  • 58

1 Answers1

0

Astro's limitations

the default Astro is a development framework for developpers, in that regard it only has preliminary code highlighting functions by default, without support of line number highlight. This allows flexibility to program or use any library you want.

Astro's doc CodeSnippet

The astro documentation project is also open source, so you can see and reuse the function you see there.

In short, the lines range will extract that text and get it an own style. The license is MIT and you could reuse the CodeSnippet component

reference https://github.com/withastro/docs/blob/97848f891afc067f1c32b3c3187b13b2090a5371/src/components/CodeSnippet/CodeSnippet.astro#L49

update - Astro starlight components

Astro now do have a ready theme with code highlighting that can be used in starlight (the theme name) or even extracted and used outside

reference

https://starlight.astro.build/guides/authoring-content/#code-blocks

wassfila
  • 1,173
  • 8
  • 18