If you write programming related posts in your blog, you are most probably using Google Syntax Highlighter to highlight your code snippets. In case if you don’t, it’s a set of javascripts that allows you to add syntax highlighting for source code that you post on your blog. It supports a large number of programming languages. After installing “Google Syntax Highlighter for WordPress” plugin (If you are using WordPress of course), all you got to do is to enclose your code inside “pre” tags, add a name attribute with value ‘code’ and then set the language of programming code in class attribute.
Ex:-
<pre name="code" class="java"> .... </pre>
But there is a slight problem. When you use it with WordPress WYSIWYG post editor all the name attributes get removed. Therefore every time you change the post using WYSIWYG editor you have to go back to HTML view and add name attributes again. Which is really a pain if your post is a large one with lots of text and code snippets.
However there is an easy solution for this. You can edit the plugin to use a small piece of JavaScript code to automatically add name attribute. Following is the script that I am using. It simply take all the “pre” tags in the page and search for tags that has “code/xxxx” pattern inside “class” attribute, where xxxx is the language. For those tags it sets a valid name attribute and also change “class” attribute to remove “code/” part and leave only the part that is recognized by Google Syntax Highlighter.
For example, above code snippet can be used with the script once you change it to look like following…
<pre class="code/java"> .... </pre>
Following is the java script code. I hope I have added enough comments to explain its workings.
//RaKasUniverse-Begin
//We need to add this prefix to class attribute of each pre tag
//that we need to process through this script.
var prefix = 'code/';
//Take the list of pre tags
var elements = document.getElementsByTagName('pre');
//Just to be in the save side lets check if the elements list is valid
if (elements && elements.length)
{
//Loop through each element and check if the element having a class name that we support
for(var i=0; i < elements.length; i++)
{
if (elements[i].className &&
elements[i].className.indexOf(prefix)==0)
{
//For the elements with supported class name, lets set the name attribute
//only if there is no name tag set
if (elements[i].getAttribute('name') == null ||
elements[i].getAttribute('name') == '')
{
elements[i].setAttribute('name','code');
//Now we heed to remove 'code/' part of class name
//And leave only the part of class name that is supported by
//Syntax highlighter plugin
elements[i].className = elements[i].className.substring(prefix.length);
}
}
}
}
//RaKasUniverse-End
You need to add above code to your page just before the line of code which invoke Google Syntax Highlighter. It looks like following…
dp.SyntaxHighlighter.ClipboardSwf = 'php echo $current_path; ?>Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
If you are using “Google Syntax Highlighter for WordPress” plugin to add Google Syntax Highlighter to your blog. All you got to do is to go to installed plugin list, scroll down to Google Syntax Highlighter for WordPress” plugin. Click on edit link, and that will open plugin JavaScript code for editing. Inside that you will find above two lines of code which invoke Google Syntax Highlighter. Just before that code segment, include above script for adding name attribute. If you want to see a working example of this, just view source code of this web page and search for “//RaKasUniverse-Begin” .
In this blog I have directly added the script to plugin code so that it ends up directly in HTML page. If you don’t like that, you can always save the code block in a separate js file as a function, and invoke it from above mentioned place.
Inside “SyntaxHighlighter.HighlightAll” function of Google Syntax Highlighter, it goes through each supported tag and check for “name” attribute using element.getAttribute(‘name’)==’code’ condition to find tags to apply syntax highlighting. As long as that logic is not changed above script will work.
I tested this on IE, Chrome, Firefox and Opera browsers. Also I have written the code in a way so that if a browser do no support, it will most likely ignore the script. I have not used any js functions/attributes that are not used in Google Syntax Highlighter itself. Therefore if this code is not supported in a browser, most likely Google Syntax Highlighter will not be supported in it any way. Feel free to use the script and do more tests. And most importantly, let me know your feedback.
/Rakhitha
Tags: Computer Programming, Google Syntax Highlighter, Google Syntax Highlighter for WordPress, JavaScript, oogle Syntax Highlighter for WordPress, Programming, Programming Language, Source Code, WordPress, WYSIWYG
7 comments on “Automatically Add Name Attribute for Google Syntax Highlighter”
You must log in to post a comment.
And the script work in my mobile phone too. Just tested 🙂
Hi Rakitha,
Consider using [sourcecode language=”foo”] [/sourcecode] tags as well. Its a built in plugin for WordPress hosted blogs.
It worked for me and I’m currently using them.
Thanks!
Yep! I think its this plugin called “SyntaxHighlighter Evolved”
http://wordpress.org/extend/plugins/syntaxhighlighter/
Will try it out when I have some time
/Rakhitha
Thanks! I was looking for a solution and found your post. Looks like it’s a good solution, but need actually JavaScript code. Finally, I figured out a better solution, I think, which is using standard attribute ‘lang’ instead of ‘name’. Check it out my solution here,
http://www.caiapps.com/fixes-of-google-syntax-highlighter-for-wordpress/#nonstand-attr
Thanks for posting! That solution is cleaner than mine indeed. In my case I was trying to get around the problem without changing the original plugin code.
/Rakhitha
Hi Rakhitha, I have just integrated your JS code into my blog, thank you very much, its saving me a lot of time ^^
[…] un post que je viens de dénicher permettant de pallier à ce problème : Automatically Add Name Attribute for Google Syntax Highlighter. Remonter ← Les transformations en WPF – SkewTransform Catégories Trucs & […]