Monday, February 23, 2015

SyntaxHighlighter Fix for Blogger Dynamic View

After moving from old theme to the new Blogger Dynamic View theme, I hade my biggest issue: How to enable my SyntaxHighlighter again? I'd prefer find a solution that reformat ALL my blog posts throughout the years.

One solution I found was adding a Javascript snippet to all my posts (http://kevin-junghans.blogspot.com/2013/01/adding-syntaxhighlighter-to-blogger.html). But this will require A LOT of work too! So what I did was a bit of nasty yet effective solution:

In the head code I already have this code:

<!--SYNTAX HIGHLIGHTER BEGINS-->
<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/shBrushJava.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/shBrushSql.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/shBrushJScript.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/shBrushPhp.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/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

So I added this interval code after the last javascript line:

setInterval(function(){
  SyntaxHighlighter.highlight(); 
}, 5000);

This way I will ensure that syntax highlighting is always enforced, and that it will work with infinite scrolling too.

Now I can enjoy my syntax highlighting with the new dynamic view theme.

Friday, December 26, 2014

Hijri Date Widget and JSON API

Here is a mini project I've been using for myself and thought it can be useful for someone out there. A simple SVG based date widget + a JSON API for Hijri date.

http://thaghra.com/hijri_date/

It has two interfaces: widget.php and api.php. With some features to make them a bit customizable.
  • Responsive widget to fit in different sizes.
  • Customizable color for widget.
  • A JSON API for services.
  • Ability to choose computer calculations or official date by Egyptian Dar-Aliftaa.
  • An offset for fine tuning errors.
  • Choise of month name or number.
To read more about the the Hijri widget and API, please refer to the docs: ---- (no longer hosted, please refer to the GitHub repository) ----

Thursday, July 31, 2014

PalMap - Get Palestine Back on Google Maps

If you are a user of Google Maps, and you care about Palestine, and you get disgusted by the word "Israel" appearing on the map, here is a solution.



PalMap is a javascript library to get Palestine back on Google Maps. It does not require much. Just copy palmap.js file and img/palmap folder, add two lines in your html file, and Palestine is back on Google Maps!


PalMap is still in an early stage, aiming to reshape this part of the map and get all the names back to their original ones.

For more info about the library, please go to PalMap repository on GitHub: https://github.com/MahmoudAdly/palmap