When I started working on the last iteration of my site, I knew I was going to need to figure out how to display code snippets. I considered using Github Gists or Codepen, but they both seemed to be a bit overkill. Also, I wanted control over the appearance and formatting.
If I wasn’t going to be embedding the code, that meant I would need to add it directly to the post, wrap it in
Then, in the footer, I added a
Prism comes with the appropriate styles bundled with it, which I just copied and included in my main stylesheet, tweaking them slightly.
With Prism running on the page, all that’s needed to properly activate it is the appropriate class for the language of the code snippet. For the above snippet, I added
class="language-markup" to the
<code> element to add the appropriate highlighting. Now when making a new post, I just need to include the YAML front matter and add a class, and that’s it!
I'm a web developer at Washington University in St. Louis. I write about WordPress, CSS, JS, accessibility, and more.