Correctly using PrismJS (Syntax Highlighter) for Hubspot Blog posts

[#1]

Hello,

I'm looking to improve the readability and aesthetics of out blog. 

Being able to use PrismJS would be a muuuch better alternative than hubspot's inline/table building:

https://prismjs.com/

Does anyone haver experience getting started and using this tool?

[#2]

Hey @harroldhino 

So on your blog layout, you should be able to call the prism.js CDN and then edit the source code for your blogs to correctly use their formatting structure.  This blog post talks about the usage of prism.js in HubSpot, so you should be able to!

[#3]

Thanks for the resposne. 

I sw that mention awhile back (it may be how I discovered the tool).

Ultimately I'm limited in my css skills so I was essentially looking for some sort of tuturoial on getting started. 

I'll add another question to the mix: given the above, is it worth the benefits to the user/reader experience to use prism?

A lot a of our content is 'interactive' in the sense there is loads of how-to and copy/pasting of code being done.

Thanks!

[#4]

Hey @harroldhino 

I couldn't find an A-Z tutorial on prism.js, but I do know that the copy-pasting of code is extremely valuable.  I would for sure look into getting it implemented!

[#5 · Accepted solution]

A quick followup to this as it could be useful for others wanting to add Prism.js to their blog or website. 

There are several ways to approach it, but to get you started here are the quick steps:

1) Either download prism js and install it in your files on HubSpot or link from a CDN here.  The basic files you'll need are:

• https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-core.min.js
• https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.min.css

You can pick a different stylesheet for different highlight colors.  You can view them here.

2) Include the following URLs (different CSS style if you choose) in either your page template or at the domain level.

Template Level:

Domain Level:  

3) Use the proper Prism classes when displaying code.  Prism supports a ton of languages, you just need to specify in the class on the <code> class:

<pre><code class="language-css">p { color: red }</code></pre>

And there you go!  You can check out a sample of Prism in action here.

[#6]

I'm quite surprised this hasn't come up before in the past, but @Bryantworks just provided very straightforward  options that both work perfectly.

I'll note that he went above and beyond to directly connect and ensure I got is squared away. He knows his stuff, kudos my friend.

[#7]

Thanks @harroldhino!  Glad to help out!