Similar to @jackcoldrick 's approach I’ve created a web component you can use, which basically just means you use some HTML and it syntax highlights. It’s usable in the blog, as well as it can power code blocks in custom modules, an example module is in the repo.
animation showing different states of the code block web component
Set up is basically 2 steps:
- Add the web component script to your page/post or to the template so you never need to do it again.
- Write the HTML for the code block.
The benefits of web component - you get line numbers, you get a copy code button, and you can have multiple tabs of code shown at a time.
The code blocks on the developers.hubspot.com website are actually powered by this web component, we just have some custom CSS styles under the hood to make it fit HubSpot branding.
GitHub - TheWebTech/hs-code-block-web-component: This is a code block web component and module designed to be used within HubSpot. · GitHub
If you’re using React.js, Svelte, Vue.js, jQuery, or another JavaScript library or framework, this web component should just-work with it because it’s built on foundational web technology. See your relevant library’s notes on working with web components (react has one here. Vue.js has one here.). If you’re not working with a JS framework, don’t worry you can ignore this bit and just follow what’s in the GitHub ReadMe.