Categories: WordPress

How to use SytaxHighlighter code with Blogger

# Add Sytax Highlighter to your Blogger Code Samples After trying many solutions to implement syntax highlighting on Blogger, I came across [Alex Gorbatchev’s](http://alexgorbatchev.com/SyntaxHighlighter/) Javascript plugin. Implementing it is very easy, however, I couldn’t get it to work on secure (https) URLs. Add the below code in your head  tag.

<!-- BEGIN SyntaxHighlighter BEGIN -->
<link href="https://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css" rel="stylesheet" type="text/css">
<link href="https://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">
 
<!-- Add below links in <script> tags also -->
http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js
 
<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
 </script>
 
<!-- END SyntaxHighlighter END -->

Sample code for the implement.

<pre class="brush: js">  <script type="text/javascript">
  console.log('First Code Block');
 </script>
</pre>You might be wondering why I have given the "pre" tag "brush: js" as classes. You need to mention the syntax highlighting that needs to be used to highlight your code. You can find the full list of supported syntax declarations [here](http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/).
Developer Diary

Share
Published by
Developer Diary

Recent Posts

Git Tag Cheat Sheet

Introduction Git tags are an essential feature of version control systems, offering a simple way…

3 months ago

Understanding Web Storage: Cookies, Local Storage

Introduction The methods that browsers employ to store data on a user's device are referred…

4 months ago

Setting up OpenVPN Access Server in Amazon VPC – AWS

Introduction A well-known open-source VPN technology, OpenVPN provides strong protection for both people and businesses.…

4 months ago

Enhance Error Tracking & Monitoring: Integrate Sentry with Node.js & Express.js

Introduction Integrating Sentry into a Node.js, Express.js, and MongoDB backend project significantly enhances error tracking…

4 months ago

Comparing Callbacks, Promises, and Async/Await in JavaScript

Introduction In the world of JavaScript development, efficiently managing asynchronous operations is essential. Asynchronous programming…

6 months ago

How To Secure Nginx with Let’s Encrypt on Ubuntu EC2 Instance

Introduction Let's Encrypt is a Certificate Authority (CA) that makes it simple to obtain and…

8 months ago