OneBite.Dev - Coding blog in a bite size

Using highlightJS for code syntax in Astro

Today I faced a problem, where Laravel shows empty results when query a relation with eager loading. Found the solution, it was I forgot to select the id as well, so the relation didn't know what connects the second table with.

On my journey migrating my static site to Astro, I found out that Astro automatically using Shiki or Prism to highlight a code syntax.

Read syntax higlighting in Astro

Which is nice, for starting new site where we can put the code language after triple backticks to highlight the code.

For example

- ``` js

TLDR: Here is the detail load external script in Astro

But for an existing blog posts where I have bunch of codes that doesn’t have a specific code language on it’s code block, is too much work to define each language for each code block, since the code block in Markdown looks like this:

- ```
console.log('no code lang after triple backtick')

Using highlight.js in Astro Site

Previously, I’m using highlightJS, since it has a default / auto detect, when a code block doesn’t have a specfied language after triple backtick. So I’d like to use it again for this project.

Unfortunately, it’s not very straightforward to do so, I’m struggling to include it myself. After several tries, here’s how I solve it:

Here is the detail load external script in Astro