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?
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.
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.
Jun 20, 202210:03 AM - edited Jun 20, 202210:10 AM
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 component
Set up is basically 2 steps:
Add the web component script to your page/post or to the template so you never need to do it again.
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.
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.
I watched jackcoldrick's 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.
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.
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.
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 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.
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 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.
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