Adding stylish code snippets to your HubSpot blog post

Recently I was faced with a problem of how can I use code snippets for our company's Technical blog, as we were moving from the old blog to our new one here in HubSpot. I was not able to find a straightforward step-by-step guide, so I ended up finding out how to do it myself and writing this blog post.

So what is Prism.js in the first place, according to www.prismjs.com it is "a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily."  Prism.js is highly configurable and you can actually choose the theme and even the languages you want your syntax highlighter to support. The latter feature is really neat, because you will be able to control what you need and what you don't and also make your bundle less heavy.

Adding Prims.js to a HubSpot blog

To be able to add Prims.js to your Hubspot blog, you first need to download the Prism.js files.

1. Head to Prism.js/Download and set up your bundle, selecting a theme, what languages you want to support, and what kind of plugins you want to use.
2. Once you are done, download the js and css files.
3. Once you are done with downloading and you have the files, head to your Hubspot's Design manager, which, at the time of this writing, you can find under Marketing/Files and Template/Design Tools
4. On the left sidebar, you should see the file structure of your blog. Copy the files to the following directories:
   1. Name your css file something like prism.css and copy it to website/assets/build/css 
   2. Name your js file something like prism.js and copy it to website/assets/build/js/dist
   3. Additionally, you will need to create a prismconfig.js file and copy it to the same folder that you have pasted your prism.js file, the contents of the file should be:

  
  
Prism?.plugins?.NormalizeWhitespace?.setDefaults({
  'remove-trailing': true,
  'remove-indent': true,
  'left-trim': true,
  'right-trim': true,
});
  
  

Once you are done with this, we will proceed with creating the Code Block Module. It is important that you have copied all the files because we will need to attach them to the Code Block Module.

Creating a custom Code block component

Now that we have all the needed files in all the needed folders, we can start creating the Code Block Module.

1. Navigate to the website/modules folder
2. Right-click on the modules folder and select the new file in "modules." 
3. Choose "Module" and click Next.
4. On the next page, define where you are going to use the module, and whether it is global or local, and give it a name, for example, code-block
5. Click on the newly created file; you should see the code editor in front of you, which has 3 sections: module.html, module.css, module.js
6. Paste the code below to the module.html section:
   
   

  
  
<section>
     <pre class="language-{ {module.lang} }">
            <code class="language-{ {module.lang} }">
                   { {module.code} }
            </code>
      </pre>
</section>
  
  

These are the input values of your Code Block Module, which we will configure next.

Now that you have created your file and saved the HTML code, head to the right pane and configure the Code Block Module setup fields:

1. You can give your Code Block Module a label
2. In the fields drop-down click Add field and select Choice:
   1. In the HubL Variable Name field, add text lang (this is what we have inside our HTML as a variable)
   2. Inside the choices section, add the label and values for your supported languages (you can search the values of languages inside the Prism website)
   3. Next, make the field required, and you can also give it a default value
3. Once done, go back to module settings and create another field, this time Rich Text for the code that we are going to paste in.
   1. The creation process is similar; just don't forget to give it a HubL Variable Name code
      
      

Now, we will need to link the Prism.js files that we have added:

1. In the right pane, scroll down to the Linked Files section
2. Under the StyledSheets section, click add and select the file prism.css
3. Do the same with prism.js and prismconfig.js for the Javascript section.

Once you are done with all the steps, you are good to go with your first usage of your Code Block Module

Using the code block

Now, when creating any blog post, you can select your code-block module from the Add to Page section by searching for the name of your module. You can then select the language you want to format and add the content.

Have fun using it!