--- title: How To Insert Source Code Into Your HubSpot Blog Post description: Find out more about easily inserting source code into your HubSpot blog posts and sharing it with readers. image: https://designers.hubspot.com/hubfs/photo-1429051883746-afd9d56fbdaf.jpeg --- # [![Hubspot](https://www.hubspot.com/hubfs/HubSpot_Logos/HSLogo_color.svg "Hubspot") Designers](https://designers.hubspot.com) # Latest CMS Developer Posts # HubSpot CMS Blog ## How To Insert Source Code Into Your HubSpot Blog Post Written By [Jeffrey Vocell](https://designers.hubspot.com/blog/author/jeffrey-vocell) on Jun 28, 2016 10:00:00 AM - [Tweet](https://twitter.com/share) ![Easily Share Code within Your HubSpot Blog Posts](https://designers.hubspot.com/hs-fs/hubfs/photo-1429051883746-afd9d56fbdaf.jpeg?width=320&name=photo-1429051883746-afd9d56fbdaf.jpeg "Easily Share Code within Your HubSpot Blog Posts")For 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](https://designers.hubspot.com/hs-fs/hubfs/Source-code.png?width=25&height=24&name=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 into the editor, such as in the image below. After inserting a closing tag ( will automatically be added. Insert your source code between these tags. ![Source-Code-in-Blog-Post.png](https://designers.hubspot.com/hs-fs/hubfs/Source-Code-in-Blog-Post.png?width=704&height=236&name=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](https://designers.hubspot.com/hs-fs/hubfs/Source-Code-2.png?width=732&height=243&name=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](https://designers.hubspot.com/blog/how-to-implement-a-hubspot-cos-mega-menu), you can separate the code into blocks by adding: 
Paste in code block here
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](http://prismjs.com/) that will allow you to add a class to the 
 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.

[![HubSpot ](https://no-cache.hubspot.com/cta/default/327485/cb877bc1-c80b-47f6-80db-d68a9b61e346.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/cb877bc1-c80b-47f6-80db-d68a9b61e346)

 Topics: [web development](https://designers.hubspot.com/blog/topic/web-development), [CMS](https://designers.hubspot.com/blog/topic/cms)

![](https://designers.hubspot.com/hubfs/Designers-Hubspot-v2/Blog_Images/2015/author-photos/jeffrey-vocell.jpg)

### [Jeffrey Vocell](https://designers.hubspot.com/blog/author/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.

[LinkedIn](http://www.linkedin.com/in/jvocell) [Twitter ](http://www.twitter.com/jvocell)

### Stay Up To Date 👇

[![Learn how to code on HubSpot CMS](https://no-cache.hubspot.com/cta/default/327485/48f45cc1-54a9-4ef7-a5a0-7d5dd9d1125b.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/48f45cc1-54a9-4ef7-a5a0-7d5dd9d1125b)

This is a search field with an auto-suggest feature attached.

- There are no suggestions because the search field is empty.

 

[![Join the HubSpot CMS Developer Slack](https://no-cache.hubspot.com/cta/default/327485/cdc804dc-ef60-407e-be85-eae710c82187.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/cdc804dc-ef60-407e-be85-eae710c82187)

[![Ask questions in the CMS Developer Forum](https://no-cache.hubspot.com/cta/default/327485/c010e1d7-342f-49bf-90f3-b7a0ec528d8f.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/c010e1d7-342f-49bf-90f3-b7a0ec528d8f)

[![Join the free CMS for Developers Course](https://no-cache.hubspot.com/cta/default/327485/d2de59e8-c568-4db8-b61e-d091317736ed.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/d2de59e8-c568-4db8-b61e-d091317736ed)

[![View the HubSpot API Documentation](https://no-cache.hubspot.com/cta/default/327485/29dd2781-ed8c-40a1-bd07-7ff1137a16eb.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/29dd2781-ed8c-40a1-bd07-7ff1137a16eb)

### Designers Blog Topics

- [Website Design (55)](https://designers.hubspot.com/blog/topic/website-design)
- [Design (33)](https://designers.hubspot.com/blog/topic/design)
- [Website Development (27)](https://designers.hubspot.com/blog/topic/website-development)
- [Tutorial (22)](https://designers.hubspot.com/blog/topic/tutorial)
- [Product Updates (21)](https://designers.hubspot.com/blog/topic/product-updates)
- [Best Practices (16)](https://designers.hubspot.com/blog/topic/best-practices)
- [CMS (16)](https://designers.hubspot.com/blog/topic/cms)
- [Inspiration (15)](https://designers.hubspot.com/blog/topic/inspiration)
- [Free Resources (12)](https://designers.hubspot.com/blog/topic/free-resources)
- [Customer Story (7)](https://designers.hubspot.com/blog/topic/customer-story)
- [COS (5)](https://designers.hubspot.com/blog/topic/cos)
- [Examples (4)](https://designers.hubspot.com/blog/topic/examples)
- [web development (4)](https://designers.hubspot.com/blog/topic/web-development)
- [SEO (3)](https://designers.hubspot.com/blog/topic/seo)
- [UX Research (3)](https://designers.hubspot.com/blog/topic/ux-research)
- [Productivity (2)](https://designers.hubspot.com/blog/topic/productivity)
- [Conversion Rate Optimization (1)](https://designers.hubspot.com/blog/topic/conversion-rate-optimization)
- [HubDB (1)](https://designers.hubspot.com/blog/topic/hubdb)
- [Infographic (1)](https://designers.hubspot.com/blog/topic/infographic)

[see all](https://designers.hubspot.com/blog/how-to-insert-source-code-into-your-hubspot-blog-post#)

### Recommended Posts

### Subscribe to the Designers Blog

[### Learn how to work with our API

](https://developers.hubspot.com/)

[### Chat with Designers in the CMS Forum

](http://inbound.org/group/hubspot-designer-forum)

[### Get the HubSpot CMS for Developers Certification

](https://academy.hubspot.com/certification)

[### Try HubSpot's Website Platform for Free

](https://app.hubspot.com/l/products?pql-source=website-designers-portal-side-cta)

### Designers Blog Topics

- [Website Design (55)](https://designers.hubspot.com/blog/topic/website-design)
- [Design (33)](https://designers.hubspot.com/blog/topic/design)
- [Website Development (27)](https://designers.hubspot.com/blog/topic/website-development)
- [Tutorial (22)](https://designers.hubspot.com/blog/topic/tutorial)
- [Product Updates (21)](https://designers.hubspot.com/blog/topic/product-updates)

### Recommended Posts

### About

- [What is HubSpot?](https://www.hubspot.com/what-is-hubspot)
- [Our Story](https://www.hubspot.com/internet-marketing-company/)
- [Executive Team](https://www.hubspot.com/company/management)
- [Press Room](https://www.hubspot.com/internet-marketing-company/press-room)
- [Partners](https://www.hubspot.com/partners/)
- [Deutsche Website](https://www.hubspot.de)
- [FAQs](https://www.hubspot.com/faq)

### Jobs

- [Cambridge](https://www.hubspot.com/jobs/)
- [International](https://international.hubspot.com)

### Learn Inbound

- [Marketing Resources](https://www.hubspot.com/free-marketing-resources)
- [Inbound Marketing Blog](http://blog.hubspot.com)
- [Deutscher Inbound Blog](http://blog.hubspot.de/marketing)
- [HubSpot Academy](https://academy.hubspot.com/)
- [INBOUND Conference](http://inbound.com/)

### Support

- [Open a support ticket](https://help.hubspot.com/support)
- [Submit a feature request](http://ideas.hubspot.com/)
- [Join a local user group](https://academy.hubspot.com/local-hubspot-user-groups/)
- [Help & support home](http://knowledge.hubspot.com/)

### Contact Sales

- [Request a call](http://offers.hubspot.com/contact-sales)
- North America
- [888.482.7768](tel:8884827768)
- United Kingdom
- [+44.20.36847648](tel:+442036847648)
- Ireland
- [+353.1.5187500](tel:+35315187500)
- Germany
- [+49.69.299571918](tel:+4969299571918)
- Australia
- [+61.28.22.81902](tel:+61282281902)

### Locations

HubSpot, Inc.  
 25 First Street, 2nd Floor  
 Cambridge, MA 02141

European Headquarters  
 One Dockland Central,  
 Dublin 1, Ireland

Asia/Pacific Office  
 60 Anson Road, Mapletree Anson, #10-03, Singapore 079914

- Copyright © 2017 HubSpot, Inc.
- [Legal Stuff](https://www.hubspot.com/legal-stuff)
- [Privacy Policy](https://www.hubspot.com/privacy-policy/)
- [Site Map](https://www.hubspot.com/sitemap/)