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.

Local Storage Models in Blazor

Blazor is a new web framework by Microsoft which ships with .NET Core. In this post I explain how to use Local Storage in Blazor using the Blazored.LocalStorage package and how to improve on this by creating a custom service allowing you to use models (classes with properties) instead of string keys.

Blazored.LocalStorage First I explain how to use local storage in Blazor. I assume you already have a blazor project setup.

Install the Blazored.LocalStorage package with using NuGet. This can be done using the command in the Visual Studio package manager: Install-Package Blazored.LocalStorage
Then in the 'Startup.cs' file add the following line to 'ConfigureServices' to make the LocalStorage service available through dependency injection: services.AddBlazoredLocalStorage();
Now you are ready to use local storage on your pages. To import the namespace on all pages you can add the following line to '_Imports.razor': @using Blazored.LocalStorage
Now within…

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.