One option to syntax-highlight some code in a web page is prism.js. I use it in some posts on this blog.
It's fairly simple to set up - but there's a trick to getting it to work from a CDN. When you download prism.js from the project website, a configuration tool lets you choose the languages you want included, then gives you a prism.js with only those languages included.
Importing support for the language you need
The version on cdnjs doesn't have a configuration tool - but rather than making a big file with all languages included, the base version includes a small set of languages, and other languages can be imported by including additional components.
The base version includes support for javascript, css, 'markup' (which works on HTML, XML, and XML-based things like SVG) and 'c-like'.
Languages that you haven't imported support for will be left unstyled - as if prism.js wasn't working at all. You have to explicitly import the language support files you need. As an example, here's how to style a bash script with prism.js from cdnjs:
Getting it to work with Jekyll
Follow this stackoverflow answer to adjust your post template to support extra_css, then include the required stylesheet in the YAML frontmatter:
Then just indicate any code blocks with triple-backticks:
and the results should look like this:
Congratulations! You (probably) now have prism.js syntax highlighting.