A few weeks ago, I posted 10 Easy Code Snippets for Mobile Development and, in the process of writing that blog, I discovered displaying actual code was quite difficult in a Hubspot blog. Different blogging platforms handle this common yet slightly complicated task in different ways, such as with [html][/html] brackets or adding a script, plugin, etc. So naturally when I ran into this problem on Hubspot (an admittedly obscure one) I went searching for some solution or add-on to simply let me display code in my blog.
Unfortunately, I didn’t find any mention of the issue on HubSpot’s forums and there didn’t seem to be any native or add-on solution; I had to create my own. So I thought I would share what I did with you in case any HubSpot bloggers run into the same issue.
Start with some in-line styling to create a nice rounded box the code can sit inside of:
Now that you have your styled box to the put the code in, we need to enter the actual code, which can be the tricky part. One of the main things you need to use is the less-than (<) and greater-than (>) symbols to open and close your divs and other elements. But you cannot just enter them on the keyboard or the actual blog will take your code as (surprise!) code instead of simply displaying it in its raw form. To avoid this, we use the actual HTML character set to create the desired keyboard symbol. For instance:
You should only need the greater-than and less-than symbols to type in your code because using the characters instead of the symbols from the keyboard will break the browsers ability to read the rest of the line as code. Therefore it’ll read everything else in the line as normal type without trying to turn it into code (i.e. you can just use quotations on the keyboard without needing the actual symbol). However, just in case, here is a list of a lot of symbols if you need more options.
Jesse is a Web Developer at Kuno Creative who regularly contributes his technical expertise to Kuno's blog. He carries a Master of Science in Mass Communcations and has more than three years of experience in web development and design.
| Follow @Jesseworldwide |
| Follow @Kuno |
photo credit: Tomas Caspers
