Blog, Website & Page Publishing

ColeMcdonald
Participant

Source Code Block in a blog post

SOLVE

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

Theirs - https://blogs.technet.microsoft.com/kevinholman/2016/12/17/getting-monitor-state-change-events-via-p...

1 Accepted solution
relabidin
Solution
HubSpot Alumni
HubSpot Alumni

Source Code Block in a blog post

SOLVE

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 <code> 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: http://designers.hubspot.com/blog/how-to-insert-source-code-into-your-hubspot-blog-post

 

The article also mentions using Prism.js 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 

 

 

 

View solution in original post

10 Replies 10
jp91
Participant

Source Code Block in a blog post

SOLVE

The video from @jackcoldrick still works great!
The updated <head> markup (12/2021)

 

<!-- Highlight JS Code -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- End of Highlight JS Code -->

 

 

0 Upvotes
jackcoldrick
HubSpot Employee
HubSpot Employee

Source Code Block in a blog post

SOLVE

I've also managed to get this working using HighlightJS. Here is a video showing how I implemented: https://embed.vidyard.com/watch/EJ6eyoLXsVt7iA5NGmWfTb.

Jack Coldrick
Solutions Engineer @ HubSpot
Add me on LinkedIn
jmclaren
HubSpot Employee
HubSpot Employee

Source Code Block in a blog post

SOLVE

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.

 

animation showing different states of the code block web componentanimation 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 website are actually powered by this web component, we just have some custom CSS styles under the hood to make it fit HubSpot branding.

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. Vue.js has one here.). 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.

Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

0 Upvotes
Shepazu
Participant

Source Code Block in a blog post

SOLVE

I watched  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.

relabidin
Solution
HubSpot Alumni
HubSpot Alumni

Source Code Block in a blog post

SOLVE

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 <code> 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: http://designers.hubspot.com/blog/how-to-insert-source-code-into-your-hubspot-blog-post

 

The article also mentions using Prism.js 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 

 

 

 

prgs
Participant

Source Code Block in a blog post

SOLVE

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:

 

code snippetcode 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

 

 

chipzoller
Participant

Source Code Block in a blog post

SOLVE

+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.

ColeMcdonald
Participant

Source Code Block in a blog post

SOLVE

Awesome, thank you.

0 Upvotes
ColeMcdonald
Participant

Source Code Block in a blog post

SOLVE
0 Upvotes
riseatlantic
Participant

Source Code Block in a blog post

SOLVE

"

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 <code> 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: http://designers.hubspot.com/blog/how-to-insert-source-code-into-your-hubspot-blog-post

 

The article also mentions using Prism.js 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

0 Upvotes