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
console.log(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:
- Saving the code JS and CSS on public folder / not load it via CDN
- Load it normally like in HTML file
Here is the detail load external script in Astro
