# Source Code Block in a blog post **URL:** \ **Category:** Blog, Website & Page Publishing\ **Tags:** content\ **Created:** [January 18, 2017, 2:12pm UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766 "2017-01-18T14:12:51Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![ColeMcdonald](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/colemcdonald/32/32521_2.png) [@ColeMcdonald](https://community.hubspot.com/u/ColeMcdonald)\ **Post date:** [January 18, 2017, 2:12pm UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/1 "2017-01-18T14:12:51Z")
I’m working on blogging for a technical audience for a marketing push we’re doing. It’s going well, but I’m having to hand align all of the source code blocks using I’m posting as part of the blog. I know other blogging and CMS software has builtin source code inline formatting with coloring and proper indentation controls and quick copy to clipboard buttons for the reader to use and test the code on their systems. Do I just not see that part, or is there a module that we can install on our blog to make this process easier / better looking? Examples: Ours - [http://blog.beyondimpactllc.com/blog/learn-powershell-in-5-painless-steps-storage](http://blog.beyondimpactllc.com/blog/learn-powershell-in-5-painless-steps-storage) Theirs - [Getting Monitor State Change Events via PowerShell | Microsoft Learn](https://blogs.technet.microsoft.com/kevinholman/2016/12/17/getting-monitor-state-change-events-via-powershell/) ---
**Author:** ![relabidin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/relabidin/32/10664_2.png) [@relabidin](https://community.hubspot.com/u/relabidin)\ **Post date:** [January 19, 2017, 2:20pm UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/2 "2017-01-19T14:20:42Z")
Hi @ColeMcdonald, HubSpot does not have a built-in tool or plug-in for formatting and highlighting code snippets in your content, but, you can edit the source of your content and use the HTML \ tag or HubL {% raw %} tag to display code. However, the syntax of this code will not be automatically highlighted. This article from our Designers’ Blog goes over using code snippets in your HubSpot Content: [How To Insert Source Code Into Your HubSpot Blog Post](http://designers.hubspot.com/blog/how-to-insert-source-code-into-your-hubspot-blog-post) The article also mentions using [Prism.js](http://prismjs.com/) in order to highlight specific syntax in your code. I do not have any experience with Prism.js but it appears to be a popular tool that should allow you to highlight the syntax of your code snippets in HubSpot. Rami ---
**Author:** ![ColeMcdonald](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/colemcdonald/32/32521_2.png) [@ColeMcdonald](https://community.hubspot.com/u/ColeMcdonald)\ **Post date:** [January 19, 2017, 2:41pm UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/3 "2017-01-19T14:41:10Z")
Awesome, thank you. ---
**Author:** ![ColeMcdonald](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/colemcdonald/32/32521_2.png) [@ColeMcdonald](https://community.hubspot.com/u/ColeMcdonald)\ **Post date:** [January 19, 2017, 3:49pm UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/4 "2017-01-19T15:49:55Z")
I’ve also come across this from github: [http://robertgreiner.com/2012/04/using-github-as-a-syntax-highlighter/](http://robertgreiner.com/2012/04/using-github-as-a-syntax-highlighter/) ---
**Author:** ![riseatlantic](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/riseatlantic/32/93181_2.png) [@riseatlantic](https://community.hubspot.com/u/riseatlantic)\ **Post date:** [August 16, 2017, 1:40am UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/5 "2017-08-16T01:40:10Z")
" HubSpot does not have a built-in tool or plug-in for formatting and highlighting code snippets in your content, but, you can edit the source of your content and use the HTML \ tag or HubL {% raw %} tag to display code. However, the syntax of this code will not be automatically highlighted. This article from our Designers’ Blog goes over using code snippets in your HubSpot Content: [How To Insert Source Code Into Your HubSpot Blog Post](http://designers.hubspot.com/blog/how-to-insert-source-code-into-your-hubspot-blog-post) The article also mentions using [Prism.js](http://prismjs.com/) in order to highlight specific syntax in your code. I do not have any experience with Prism.js but it appears to be a popular tool that should allow you to highlight the syntax of your code snippets in HubSpot. " thanks for this it help out alot .. saved us alot of running around to find a solution .. thanks again ---
**Author:** ![prgs](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/prgs/32/75413_2.png) [@prgs](https://community.hubspot.com/u/prgs)\ **Post date:** [October 16, 2018, 10:05am UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/6 "2018-10-16T10:05:18Z")
The solution in the blog post of editing the html and build yourself the code fence to insert some code snippet is good for one off article but not pratical at all for anyone who needs to write regularly blog posts with code snippets, like me and my colleagues. Plus syntax highligthing is not there, you still need to add it in your own. Please consider to have an editor that supports markdwon with code fences and syntax highligthing on the fly, like: ![Screenshot from 2018-10-15 10-17-32.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/7/87d40de2823445573d98c25c84a721cdab0b3fe5.png) code snippet Even t the editor in this forum is better suitable to insert a code snippet then the one we use in the HubSpot platform to wite our blog posts. Please add support for this feature, because anyone from IT wanting to use HubSopt will require this feature and may even be an excluding factor when deciding to go or not with HubSpot or may even contribute for current customers to make the decision in changing platform. Thanks ---
**Author:** ![chipzoller](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chipzoller/32/59606_2.png) [@chipzoller](https://community.hubspot.com/u/chipzoller)\ **Post date:** [September 19, 2019, 12:43pm UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/7 "2019-09-19T12:43:43Z")
+1,000 And in other cases, writers need to import their articles containing prose and code, yet HubSpot does not import those monospaced fonts. This is a severely limiting factor when using this CMS tool. ---
**Author:** ![jackcoldrick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jackcoldrick/32/5119_2.png) [@jackcoldrick](https://community.hubspot.com/u/jackcoldrick)\ **Post date:** [October 30, 2019, 7:58am UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/8 "2019-10-30T07:58:44Z")
I’ve also managed to get this working using [HighlightJS](https://highlightjs.org/). Here is a video showing how I implemented: [https://embed.vidyard.com/watch/EJ6eyoLXsVt7iA5NGmWfTb](https://embed.vidyard.com/watch/EJ6eyoLXsVt7iA5NGmWfTb). ---
**Author:** ![Shepazu](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/shepazu/32/87988_2.png) [@Shepazu](https://community.hubspot.com/u/Shepazu)\ **Post date:** [October 31, 2019, 7:33pm UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/9 "2019-10-31T19:33:53Z")
I watched [jackcoldrick’s](https://community.hubspot.com/t5/user/viewprofilepage/user-id/5724) video, and his solution with HighlightJS was much more straightforward and yeilded better results than the PrismJS solution posted above. Thanks for that! PrismJS seemed to require that ‘code’ elements include a class to identify the code language used, and the default didn’t work right for even HTML or JS. HighlightJS autodetects the code language, so you don’t need to add the cumbersome class attribute. However, there’s still a huge workflow problem with this solution, and it’s frustrating because it’s literally a fix Hubspot could deploy in less than a day: there is no “code” option in the markup dropdown. This means that adding code highlighting is still a very manual process. I have to open up the “Source code” view, find the text that needs to be marked up as code, and manually surround it with a ‘code’ tag before the section, and a closing ‘/code’ tag afterward. This is really tedious. All of this would be solved by simply duplicating the functionality in the ‘pre’ option in the markup dropdown, and adding a ‘code’ option. Note that I’m not asking to remove the ‘pre’ option; both ‘pre’ and ‘code’ are needed, for different things. (Not all code snippets are block-level, some are inline; we still need ‘pre’ to trigger block-level.) This would still require that we choose our own JS highlighting links and stylesheets to add to the blog template, but that’s a quick one-time change, not an ongoing problem every time we write a blog post. This is easily documented, too. Honestly, this should take about an hour for one of your developers to do (though more with testing, review, etc.), and it would save those of us with technical blogs an enormous amount of time and effort. It’s taken me several days of stumbling around to find these partial solutions. Please, please prioritize this. ---
**Author:** ![jmclaren](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jmclaren/32/38449_2.png) [@jmclaren](https://community.hubspot.com/u/jmclaren)\ **Post date:** [June 20, 2022, 2:03pm UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/10 "2022-06-20T14:03:08Z")
Similar to @jackcoldrick 's approach I’ve created a web component you can use, which basically just means you use some HTML and it syntax highlights. It’s usable in the blog, as well as it can power code blocks in custom modules, an example module is in the repo. ![code block.gif](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/e/5ef125455b1ce5936e30efcdd4675eb546f95b49.gif) animation showing different states of the code block web component Set up is basically 2 steps: 1. Add the web component script to your page/post or to the template so you never need to do it again. 2. Write the HTML for the code block. The benefits of web component - you get line numbers, you get a copy code button, and you can have multiple tabs of code shown at a time. The code blocks on the [developers.hubspot.com](http://developers.hubspot.com) website are actually powered by this web component, we just have some custom CSS styles under the hood to make it fit HubSpot branding. [GitHub - TheWebTech/hs-code-block-web-component: This is a code block web component and module designed to be used within HubSpot. · GitHub](https://github.com/TheWebTech/hs-code-block-web-component) If you’re using React.js, Svelte, Vue.js, jQuery, or another JavaScript library or framework, this web component should just-work with it because it’s built on foundational web technology. See your relevant library’s notes on working with web components ([react has one here.](https://reactjs.org/docs/web-components.html) [Vue.js has one here.](https://vuejs.org/guide/extras/web-components.html)). If you’re not working with a JS framework, don’t worry you can ignore this bit and just follow what’s in the GitHub ReadMe. ---
**Author:** ![jp91](https://avatars.discourse-cdn.com/v4/letter/j/da6949/32.png) [@jp91](https://community.hubspot.com/u/jp91)\ **Post date:** [December 16, 2021, 12:17am UTC](https://community.hubspot.com/t/source-code-block-in-a-blog-post/766/11 "2021-12-16T00:17:05Z")
The video from @jackcoldrick still works great! The updated \ markup (12/2021) ```lia-code-sample ```