Hola! ¡Tenemos nuestra Comunidad en Español!

Correctly using PrismJS (Syntax Highlighter) for Hubspot Blog posts

SOLVE
Occasional Contributor

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?

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Advisor

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:

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:

Step 1.png

 

Domain Level:  

Step 2.png

 

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>

 

Step 3.png

 

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

 

Reply
0 Upvotes
6 Replies 6
Advisor

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!

 

Reply
0 Upvotes
Occasional Contributor

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!

 

 

Reply
0 Upvotes
Advisor

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!

Reply
0 Upvotes
Advisor

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:

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:

Step 1.png

 

Domain Level:  

Step 2.png

 

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>

 

Step 3.png

 

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

 

Reply
0 Upvotes
Highlighted
Occasional Contributor

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.

Advisor

Thanks @harroldhino!  Glad to help out!

Reply
0 Upvotes