Google Syntax Highlighter for WordPress

I need to change the Google Syntax Highlighter plugin for WordPress due to the reason that wordpress corrects HTML mistakes in your post. And this does not allow <pre name="code" ..> as required by Google Syntax Highlighter. Name attribute is not right syntax for pre tag.

So, I thought to correct the syntax highlighter. Title attribute is the allowed attribute in HTML pre tag. I have modified Google syntax Highlighter for this.

Using title attribute instead of name attribute in <pre>:

File need to modify is shCore.js.  The file path is Google-syntax-highlighter/Scripts/shCore.js.
Go to around line 364, you will find PHP code similar to this:

function FindTagsByName(_70,_71,_72){
var _73=document.getElementsByTagName(_72);
for(var i=0;i<_73.length;i++){
if(_73[i].getAttribute("name")==_71){
_70.push(_73[i]);
}

Change 4th line, where you can see - getAttribute("name") to getAttribute("title"). Now, you will use it like this <pre title="code" class="php">.

Optimizing Google Syntax Highlighter:

You may also like to comment some lines which are not useful for you.
In file Plugins/google-syntax-highlighter/google-syntax-highlighter.php you will find lines for each languages covered in Syntax Highlighter.

I have commented these lines:

<!--
<script src="<?php echo $current_path; ?>Scripts/shBrushCSharp.js"></script>
<script src="<?php echo $current_path; ?>Scripts/shBrushJava.js"></script>
<script src="<?php echo $current_path; ?>Scripts/shBrushVb.js"></script>
<script src="<?php echo $current_path; ?>Scripts/shBrushDelphi.js"></script>
<script src="<?php echo $current_path; ?>Scripts/shBrushPython.js"></script>
<script src="<?php echo $current_path; ?>Scripts/shBrushRuby.js"></script>
<script src="<?php echo $current_path; ?>Scripts/shBrushCpp.js"></script>
-->

dp is not defined

I was facing one more problem after few days of use. It was something "dp is not defined". I have searched and could not find good reference to solve this. At one place it was written that this is due to slow load etc. So, I have added timeout to two lines that comes directly on source code.


function fun1() {
dp.SyntaxHighlighter.ClipboardSwf = 'http://www.satya-weblog.com/wp-content/plugins/google-syntax-highlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
window.setTimeout('fun1()',1000);

This also does not solved the problem.
Still, shCore.js was not getting loaded. So, I put shCore.js at the head section. Now, it started working and my syntax getting highlighted except PHP syntax. I have found that PHP syntax file is the first one in bunch of files syntax highlighter load (see in html source code).
I researched and found that this is not due to slow load time etc but due to a problem I have created when I was adding a button for tweet. There I have not closed the <script> tag. So, it was created problem at this place. After that tweet script this was the script I was loading. So whatever be the first one that was somehow adjusting with the close tag of syntax highlighter script. So, first file always does not worked.

CSS fix at google-syntax-highlighter/Styles/SyntaxHighlighter.css

Another fix I made is for text alignment. Search for text-align1 and replace it with "text-align". It is meant to align menu at top (view, plain, copy to clipboard, print, ?). If you want to align it left, change it to text-align:left.

  • # 1 - by Danny Foo

    Thanks for fixing this for visual editor. Makes posting less troublesome. :)

  • # 2 - by Satya Prakash

    The blog you have mentioned is without http:// so your link will not work.

  • # 3 - by Danny Foo

    Woops. Thought it automatically adds that. But I've corrected it. :)

  • # 4 - by Danny Foo

    Woops. Thought it automatically adds that. But I've corrected it. :)

Comments are open for an year period. Please, write here on Facebook page.