Latest COS Design Blogs

Designers Blog

How To Insert Source Code Into Your HubSpot Blog Post

Written By Jeffrey Vocell on Jun 28, 2016 10:00:00 AM

Easily Share Code within Your HubSpot Blog PostsFor anyone that needs to share code, you know how important it is to communicate it in the right way. Just copying and pasting code into a blog post just won't do. Today we'll walkthrough how you can insert code into your blog posts to share with readers, and make it easy for them to read.

There are two distinct ways of sharing your code within a blog post. Let's dive in to each separately:

Sharing Code Method 1: HTML, CSS, JavaScript, Etc.

  1. Go to your blog post and select the Source Code icon (Source-code.png). Note: You need to utilize encoded characters (< and gt;) in this method. 
  2. Find a place within the post where you want to insert code, and write <code> into the editor, such as in the image below. After inserting <code> a closing tag (</code> will automatically be added. Insert your source code between these tags.
    Source-Code-in-Blog-Post.png
  3. When done adding code, simply click the blue "Save" button in the lower left, and your post will be updated to include the code you added.

Sharing Code Method 2: HubL

If the code you are sharing includes HubL, HubSpot's Markup Language, then the editors by default will look to run that code. To prevent this from happening (and accurately display the code within the post) we need to add: to the beginning of the post and to the end of the post. 

Using the above source code example, it would look something like this:
Source-Code-2.png

By adding these values to the top and bottom of your post, it escapes any HubL within the post and does not try to execute it.

You can also style code inserted into a blog post. If you have a really long code snippet, but don't want it to take over the entire post, similar to the blog post about How to Implement a Mega Menu on the COS, you can separate the code into blocks by adding:

<pre style="max-height:500px;"><code>Paste in code block here</code></pre>

This will limit the size of the code block and help your visitor read through the post.

If you are looking to highlight a specific syntax, you can also use a syntax highlighter such as Prism.js that will allow you to add a class to the <pre> and will automatically wrap your code in sample markup so you can style the highlighted version.

If you have any questions, or any other ways you've done this, let us know in the comments.

Developer Day 2016

Topics: web development, CMS

Jeffrey Vocell

Jeffrey Vocell is a Product Marketing Manager at HubSpot. Jeffrey is passionate about aviation, tech, and inbound marketing. Connect with him on Twitter @JVocell.

Search HubSpot Designers Site