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:
Then add your language code (e.g. 'xml' for XML, 'cs' for C#, etc) to the following line of code (replacing 'xml').
Now add the following lines to your code:
So in total you should have something like this:
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'.
Use the following to add the code snippet to your page where you change the class name to the language you are using:
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 '<' and '>' 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 ' '.
As an example, to create the following code:
I actually had to enter the following:
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:
Just before this line, add the following lines of code:
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.
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'/>
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>
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 '<' and '>' 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 ' '.
As an example, to create the following code:
<ParentTag>
<ChildTag property="value">
<GrandchildTag>
</GrandchildTag>
</ChildTag>
</ParentTag>
I actually had to enter the following:
<ParentTag>
<ChildTag property="value">
<GrandchildTag>
</GrandchildTag>
</ChildTag>
</ParentTag>
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>
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.
Comments
Post a Comment