If you spend enough time perusing technical blogs, one of the things that you will notice is that any code snippets that are included in the article seem to have an IDE or a very good editor embedded in their article since their snippets come with accurate syntax highlighting along with line numbers. Unfortunately, technical blog authors aren’t using some gold plated blog engine to accomplish this particular feat, though such blog engines exist. In most cases, they are using a client side plugin that is a combination of CSS and JavaScript called a Syntax Highlighter.
It is my personal opinion that use of a Syntax
Highlighter plugin is mandatory for any Software Engineering blog. Unfortunately, HubSpot does not seem to ship with any such plugin out of the box. I investigated the different options for doing this in HubSpot and implemented it for our Easy Dynamics blog. The client side plugin I chose to implement is SyntaxHighlighter. It comes with support for a number of languages (Brushes) out of the box, which you can find documented here: SyntaxHighlighter Bundled Brushes.
Since this was my fist time customizing HubSpot, I did a little research and found a blog article describing how to do exactly what I was attempting to do. SyntaxHighlighter offers some general instructions for how to do this. When you’re working with someone else’s blog engine, you cannot just pull up a html file for your blog article or layout and add a few style sheets and scripts. To accomplish the same thing inside HubSpot, you need to do the following:
Installation Steps
Step 1
Go to Content -> Content Settings -> Page Publishing
Step 2
Insert the following style sheet references in Site Header HTML:
<link href="shCore.css" rel="stylesheet" type="text/css" /> <link href="shThemeDefault.css" rel="stylesheet" type="text/css" />
Step 3
1. Using statically Loaded Language Brushes
Insert the following script tags into Site Footer HTML, if you will only be including snippets:
<script type="text/javascript" src="shCore.js"></script>
<!--
Include JS script for each Language Brush you are using.
i.e. the JavaScript Brush shBrushJScript.js
-->
<script type="text/javascript" src="shBrushJScript.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
2. Using dynamically Loaded Language Brushes
If you don’t know which language snippets you will be using or prefer to dynamically pull in the required brush script on demand, include the following script tags instead:
<script type="text/javascript" src="shCore.js"></script>
<!--
Autoload instructions http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html
-->
<script type="text/javascript" src="shAutoloader.js"></script>
<script type="text/javascript">
function path()
{
var args = arguments,
result = []
;
for(var i = 0; i > args.length; i++)
result.push(args[i].replace('@', '/scripts/'));
return result
};
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'f# f-sharp fsharp @shBrushFSharp.js ',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
));
SyntaxHighlighter.all();
</script>
Usage
The instructions for utilizing SyntaxHighlighter after integrating it into your blog can be found here. SyntaxHighlighter has two mechanisms for detecting code snippets and applying Syntax Highlighting.
<pre/> Method
<pre class="brush: js">
function foo()
{
}
</pre>
This particular method is the easiest to use in HubSpot.{{cta(‘209aad85-272d-4e83-8cdc-4f30262bc921′,’justifyright’)}} HubSpot does make it easy for you to insert a Pre block within their editor, but because you need to add a class attribute to the pre tag, you will be better off adding the pre tag directly from the source code view of the editor. One gotcha with this particular method is including html/xml snippets. Since your snippet will end up being rendered in a browser, the only way to make sure the tags are correctly rendered with this method is to manually encode the angle brackets with (< and > respectively).
<script/> Method
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
]]></script>
This method is not as easy to use in HubSpot. The HubSpot editor does not allow you to insert a script block directly, so you have to open the source code view and manually add a script block from there. In addition, once you have specified your snippet in a script block, you will not see it displayed when you return to the WYSIWYG view of the HubSpot Editor. On the other hand, this method removes the need to encode angle brackets when your snippet includes html/xml.
What other Syntax Highlighter plugin have you found useful when integrated into your blog? Share your wisdom with us in a comment below!
Found this blog post useful? Make yourself comfortable and check out our blog home page to explore other technologies we use on a daily basis and the fixes we’ve solved in our day to day work. To make your life easier, subscribe to our blog to get instant updates sent straight to your inbox:
{{cta(‘33985992-7ced-4ebd-b7c8-4fcb88ae3da4′,’justifycenter’)}}