Source Code Block in a blog post

SOLVE
Occasional Contributor

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

Accepted Solutions
HubSpot Employee

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 

 

 

 

8 Replies 8
HubSpot Employee

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 

 

 

 

Highlighted
Occasional Contributor

Awesome, thank you.

Reply
0 Upvotes
Occasional Contributor
Reply
0 Upvotes
New Contributor

"

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

Reply
0 Upvotes
Visitor

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

 

 

New Member

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

HubSpot Employee

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

New Contributor

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.