Ben Borgers

How to get syntax highlighting in HTML generated by GitHub

January 24, 2021

GitHub has its own markdown renderer. Maybe you're using a package like Caleb Porzio's GitDown, which internally uses the GitHub API to parse markdown. Or maybe you're using the GitHub API to get the contents of an issue.

In any case, you're letting GitHub render the markdown.

GitHub's markdown renderer adds classes inside code blocks, which are used for syntax highlighting (making some parts of the code a different color than others). However, you need the right CSS file to make those different classes different colors.

Per the github-syntax-theme-generator repository, you've got two options. Pick one of these two CSS files, copy and paste the line into your HTML's <head>, and it'll syntax highlight the markdown outputted by GitHub's API.

<!-- for light background -->
<link rel="stylesheet" href="https://unpkg.com/github-syntax-light@latest/lib/github-light.css" />

<!-- for dark background -->
<link rel="stylesheet" href="https://unpkg.com/github-syntax-dark@latest/lib/github-dark.css" />

More blog posts

Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iā€™m working on!

Twitter ↗ RSS feed ↗