Adding SyntaxHighlighter to Blogger Dynamic Views

This blog uses Blogger Dynamic Views and since I write a lot about software development I wanted a way to add nice formatting to the source code snippets.  I have used SyntaxHighlighter before and really liked the results. But I was having trouble getting it to work in Dynamic Views. So I did some research and came up with a decent solution.  It is a conglomeration of different approaches taken by different people that I found to be the simplest method for using SyntaxHighlighter with Dynamic Views.

To get started open up Blogger and select Templates.  Then select the Edit HTML button as shown in the following illustration.


In the dialog that opens find the closing head tag and insert this code just before it and save your changes.

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"/>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
Note: This code is being formatted by SyntaxHighlighter.

So far this is no different from how you would add SyntaxHighlighter to any Blogger blog. The next steps are what varies. First we need to add the style sheets for SyntaxHighlighter. I found how to do this from this blog.  Follow their instructions for adding the style sheets.  To get to the CSS editor press the Customize button as shown in the previous illustration.  Then click Advanced in the left navigation pane and then Add CSS.

My approach differs from the one mentioned in the referenced blog because I have added links to the SyntaxHighlighter JavaScript whereas they include compiled JavaScript that includes all of these references at the end of the page. I could not use this compiled JavaScript because it did not include some of the brushes I wanted to use, and I was too lazy to try to figure out how they were compiled so I could recompile them. So I found with the reference I added in the first steps and one line of JavaScript in each post it worked just fine.  Here is the JavaScript that need to be at the end of every post that uses SyntaxHighlighter.

<script type="text/javascript">
 SyntaxHighlighter.highlight();
</script>

This fixes an issue with the order in which Dynamic Views loads the JavaScript. Now you just use the pre tags around your source code whenever you use SyntaxHighlighter. For more information on SyntaxHighlighter go here.

Comments

Post a Comment

Popular posts from this blog

Using Claims in ASP.NET Identity

Claims can simplify and increase the performance of authentication and authorization processes. I wrote about how you can use the roles stored as claims to eliminate back-end queries every time authorization takes place .  ASP.NET Identity has good support for claims-based identity and it creates several claims for you automatically when you create a new identity.  Here is how we create the identity for a new user during the log-in process UserManager<applicationuser> userManager = new UserManager<applicationuser>(new UserStore<applicationuser>(new SecurityContext())); ClaimsIdentity identity = userManager.CreateIdentity(user, DefaultAuthenticationTypes.ApplicationCookie); If you inspect the Claims property of ClaimsIdentity after calling CreateIdentity you will see that there are there are three or more claims. There is a claim for the user ID, user name, identity provider and one for each role assigned. So what if you want to add some more claims? Here is an ex
Keep reading

Customizing Claims for Authorization in ASP.NET Core 2.0

Image
There have been some major changes to ASP.NET Identity with the release of Core 2.0, which you can read about here .  One of the major changes is that it does not rely on using middleware anymore to customize it.  Instead dependency injection is used by configuring via services in the ConfigureServices method of StartUp.cs .   There is not much documentation or examples on how to do this so I am going to explore how to customize ASP.NET Identity and publish some examples in this blog.  First I wanted to look at how you would add custom claims to the identity and then use those claims for authorization. To begin create a new ASP.NET Core Web Application  project in Visual Studio 2017.  Be sure to select . NET Core and ASP.NET Core 2.0 in the two drop downs at the top.  Select the template for Web Application (Model-View-Controller) and Change the Authentication to Individual User Accounts .  When the project is created you are ready to add some code. For this example we are s
Keep reading

Seeding & Customizing ASP.NET MVC SimpleMembership

Image
In ASP.NET MVC 4 Microsoft introduced a new membership provider that is referred to as SimpleMembership.  SimpleMembership makes it easier to customize user profiles and incorporates  OAuth support.  I have seen a lot of questions on StackOverflow on how to customize SimpleMembership and seed it with data and in this post I will discuss some methods for achieving both . SimpleMembership uses Entity Framework (EF) 5 and the code-first model. To initialize the database that contains the users and roles a filter is used called  InitializeSimpleMembershipAttribute.   This attribute is decorated on the AccountController as shown here: [Authorize] [InitializeSimpleMembership] public class AccountController : Controller { ... } This is setup this way so that the initialization code is only called when accessing the actions on the AccountController .  If you look at the code for  InitializeSimpleMembershipAttribute you will see a lot of code to setup initialization which is basically
Keep reading