Skip to main content

Add Code to Google Blogger

This blog is built using Google Blogger. In my previous post I indcluded code snippets. Here I'll explain how I got those working.


We'll be using highlight.js, so first head over to their website and select your language and theme (just click on the language and theme displayed to cycle through them). For the purposes of my previous blog post I used language 'xml' and theme 'monokai-sublime'.

Add your theme choice to the following line of code, replacing 'monokai-sublime' with your theme name:
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css' rel='stylesheet'/>

Then add your language code (e.g. 'xml' for XML, 'cs' for C#, etc) to the following line of code (replacing 'xml').
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/xml.min.js'/>
Add this line multiple times if you have multiple languages you want to add.

Now add the following lines to your code:
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>

So in total you should have something like this:
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/xml.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>

We are going to add this code to our Google Blogger template. Login to Google Blogger and select 'Theme' from the sidebar.
 

Then select 'Edit HTML'
 

On around line 4 of the code you'll see a <head> tag. Just after this insert the lines of code we created above. And press 'Save Theme'.

Adding Code to a Blog Post

Now create a blog post or edit an old one. Select the 'HTML' view and find the location where you want to insert the code snippet.

Use the following to add the code snippet to your page where you change the class name to the language you are using:
<pre><code class="xml" style="line-height: normal;">
   ENTER CODE HERE
</code></pre>
If you look at a preview of the page you should at least see a box where the code would appear.

My Code isn't Displaying Correctly?

You have entered your code directly into HTML, and HTML might not support all characters you are using. It is also likely that any indentation in your code is broken.

To fix this first correct all characters which are not being displayed correctly. The most important characters here are '<' and '>' symbols which should be replaced by '&lt;' and '&gt;' repectively. Some other characters like '&' might also be displayed wrong. You can use a HTML Escaping tool like this one to help you fix them.

To fix indentation, replace any whitespace character which should be at the start of a line with the text '&nbsp;'.

As an example, to create the following code:
<ParentTag>
  <ChildTag property="value">
    <GrandchildTag>
    </GrandchildTag>
  </ChildTag>
</ParentTag>

I actually had to enter the following:
&lt;ParentTag&gt;
&nbsp;&nbsp;&lt;ChildTag property="value"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;GrandchildTag&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/GrandchildTag&gt;
&nbsp;&nbsp;&lt;/ChildTag&gt;
&lt;/ParentTag&gt;

My Code isn't selectable? I want users to be able to copy it.

Some Google Blogger templates include an invisible 'clicktrap' which sits ontop of the whole blog and handles all user interaction events. This means events like a user clicking are being blocked and not reaching your blog post content. This is why text cannot be selected, and scrollbars on you code don't work.

Again there is a fix for this. Go back to your Google Blogger theme and edit the HTML. Use Ctrl+F to search for the line:
]]></b:skin>
For me this was on line 2898, but it will vary depending on the template you are using.

Just before this line, add the following lines of code:
.blogger-clickTrap {
  display: none!important;
}

Now save the theme, and go back to your blog post. Users should now be able to select the code to copy it, and use the scrollbars which appear on larger code snippets.

All done!

Thanks for reading, I hope this was useful to you. Please leave questions or comments below.

Comments

Popular posts from this blog

Best Packages for Sublime Text 3 (Excluding Themes)

Sublime Text 3 is pretty good out-of-the-box but reaches a whole new level when you install some of the great packages on offer.

Below I'll list my favourite packages for Sublime Text. These are all packages which will enhance your productivity across all languages, so no themes or language-specific packages will be listed here.

Terminals in Sublime Text 3

TL;DR - Need a quick answer on how to create terminals in Sublime Text 3? Scroll down and watch the video or read the instructions below it.

A while ago I started a series on YouTube of 'Sublime Text Tips'.

Sublime Text 3 is one the best code editors currently in existence (fact), but most people just install it an use it without realising how it can be customized and extended to meet your needs.

My aim was to release a series of videos explaining some of these widely unknown capabilities. I got as far as the third video and then got distracted with other things 😅

But recently I noticed the 3rd video I made has been increasing in popularity. For at least 6 months it sat at less than 200 views, and over the course of the last 2 months it has shot up to 850 (at the time of writing). Perhaps it's coincidence, or perhaps YouTube's algorithms have changed. Either way, there seem to be people who want this information.

The video explains how to set up terminals in Sublime…

Generating a MSI Installer for a WPF Application

This post serves as a tutorial for creating a MSI installer for your WPF Applications in Visual Studio. For this we use WiX (recommended by Microsoft).

Prerequisites I assume you already have a Visual Studio solution containing a WPF Project. And I assume you have some experience with Visual Studio and XML. You do not need any prior knowledge of WiX.
Step 1: Install Wix We are going to need WiX to generate our MSI.

If you don't already have Wix installed, go ahead and download it from here. You'll be redirected to the relevant GitHub releases page where you can download the .exe file to install WiX.