|
Usage
How to use SyntaxHighlighter.
UsagePlacing the codePlace your code on the page and surround it with <pre> tag. Set name attribute to code and class attribute to one of the language aliases you wish to use. <pre name="code" class="c-sharp"> ... some code here ... </pre> NOTE: One important thing to watch out for is opening triangular bracket <. It must be replaced with an HTML equivalent of < in all cases. Failure to do won't break the page, but might break the source code displayed. An alternative to <pre> is to use <textarea> tag. There are no problems with < character in that case. The main problem is that it doesn't look as good as <pre> tag if for some reason JavaScript didn't work (in RSS feed for example). <textarea name="code" class="c#" cols="60" rows="10"> ... some code here ... </textarea> Extended configurationThere's a way to pass a few configuration options to the code block. It's done via colon separated arguments. <pre name="code" class="html:collapse"> ... some code here ... </pre> Making it workFinally, to get the whole thing to render properly on the page, you have to add JavaScript to the page. <link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>For optimal result, place this code at the very end of your page. Check HighlightAll for more details about the function. |
Can't get it to work in any way, shape or form :(
Can you get included samples working? Please give more details.
This code :
dp.SyntaxHighlighter?.ClipboardSwf? = '/flash/clipboard.swf'; dp.SyntaxHighlighter?.HighlightAll('code');
must been in onload function like this :
<script language="javascript"> window.onload = function () {
} </script>This code :
dp.SyntaxHighlighter?.ClipboardSwf? = '/flash/clipboard.swf'; dp.SyntaxHighlighter?.HighlightAll('code');
must been in onload function like this :
<script language="javascript"> window.onload = function () {
} </script>This code :
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code');must been in onload function like this :
<script language="javascript"> window.onload = function () { dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); } </script>Awesome piece of code. Worked like a charm the first time.
Thanks Alex
mark...
Awesome piece of code. Worked like a charm the first time.
Thanks Alex
mark...
Very good, but I have some problem to make XHTML 1.1 valid pages. The problem is in <pre> tag: name is not allowed anymore for this tag. And <textarea> needs to be in a form...
Any clue?
.BoB.
Excelent! Works flawlessly! 5 stars! :D
My 1st try (took less than 5 minutes):
<html> <body>
<textarea name="code" class="html" cols="60" rows="10">
BEGIN --- This is the example code:
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link> <script language="javascript" src="Scripts/shCore.js"></script> <script language="javascript" src="Scripts/shBrushCSharp.js"></script> <script language="javascript" src="Scripts/shBrushXml.js"></script> <script language="javascript"> dp.SyntaxHighlighter?.ClipboardSwf? = 'Scripts/clipboard.swf'; dp.SyntaxHighlighter?.HighlightAll('code'); </script>
END --- This is the example code:
</textarea>
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link> <script language="javascript" src="Scripts/shCore.js"></script> <script language="javascript" src="Scripts/shBrushCSharp.js"></script> <script language="javascript" src="Scripts/shBrushXml.js"></script> <script language="javascript"> dp.SyntaxHighlighter?.ClipboardSwf? = 'Scripts/clipboard.swf'; dp.SyntaxHighlighter?.HighlightAll('code'); </script>
</body> </html>
Nice, some problems with <br /> but nice.
i sooooo... like it
A really great piece of work! Marvelous! Just added it to my blog.
I found the last 2 lines to be problematic, especially if the Scripts take too long to download. It kept throwing this 'dp is undefined' error. It looked like the last script fragment namely -
<script language="javascript"> dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script>used to get initiated even before the other scripts were downloaded. So I moved it to another file called shInit.js and it looks like this -
var attempts = 0; var timerHandle = setTimeout("checkIfHilighterLoaded()", 350); function checkIfHilighterLoaded(){ try{ dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); clearTimeout(timerHandle); } catch(e){ clearTimeout(timerHandle); if(attempts < 25){ timerHandle = setTimeout("checkIfHilighterLoaded()", 350); } attempts++; } }So, instead of the inline JavaScript?? I have this -
<script language="javascript" src="js/shInit.js"></script>
Well robccsilva's example posted on Aug 29, 2007 worked well, but the following and all other attempts I've tried just fail. Firebug reveals no errors, so I'm not sure what is wrong. Any ideas:
<textarea name="code" class="java" cols="45" rows="10"> public class HelloWorld? {
public static void main(String[] args) { System.out.println("Hello, World"); }
} </textarea>
Is anyone able to use this on blogger? it looks to me like i need to upload a bunch of (primarily javascript) files but i dont think i can do that with blogger? anyone have any ideas?
Where should I write this piece of code in wordpress?
<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link> <script language="javascript" src="js/shCore.js"></script> <script language="javascript" src="js/shBrushCSharp.js"></script> <script language="javascript" src="js/shBrushXml.js"></script> <script language="javascript"> dp.SyntaxHighlighter?.ClipboardSwf? = '/flash/clipboard.swf'; dp.SyntaxHighlighter?.HighlightAll('code'); </script>
Is it in the header.php in the theme or somewhere else? Please ...
It doesn't work,man;-( I swear i did nothing wrong.I think i need a sample or more details.
I found that syntax highlighting only worked if these two lines <script class="javascript"> dp.SyntaxHighlighter?.ClipboardSwf? = '/flash/clipboard.swf'; dp.SyntaxHighlighter?.HighlightAll('code'); </script> are placed AFTER the closing </pre> tag
How to get syntax highlighting in Blogger with SyntaxHighlighter?
http://morten.lyhr.dk/2007/12/how-to-get-syntax-highlighting-in.html
<pre name="code" class="php"> $test = "syntax highlighter"; echo $test; </pre>
When language is php,"empty" of the function is displayed double.
example: emptyempty($example)
Hi, why don;t you use <code> element instead?
Worked first time like a charm! thanks for this!
I have my own language file, and am trying to get the following to work: (this relates to my drumputer scripting language at http://www.drumputer.com)
SET KEYWORD1=VALUE1;SET KEYWORD2=VALUE2; LET VARx=VALUE
LET and SET are keywords (as is KEYWORDx) and get hilighted okay. I want to hilight the VARx part. "VARx" can be any string without spaces or an =.
I think I figured it out:
This has been added in my "Brush" file's RegexList?: { regex: new RegExp?('^LET\\s+([a-zA-Z\\-\\d\\]+)=.+', 'gmi'), css: 'vars', submatchIndex: 1, disallow: keywords } //Note the "submatchIndex" property and "disallow"
//And I redefined the following two items from shCore.js (but left shCore alone): //--------- dp.sh.Highlighter.prototype.ProcessRegexList? = function() { var oRegExItem = null; for(var i = 0; i < this.regexList.length; i++) if(this.regexListi?.submatchIndex == undefined) { this.GetMatches?(this.regexListi?.regex, this.regexListi?.css); } else { oRegExItem = this.regexListi?; this.GetMatches?(oRegExItem.regex, oRegExItem.css, oRegExItem.submatchIndex, oRegExItem.disallow); } } //--------- dp.sh.Highlighter.prototype.GetMatches? = function(regex, css, submatchIndex, disallowList) { var index = 0; var match = null; var oMatch = null; var sMain='',sSub='',iOffset=0,bAddIt=true; var oREDisallow=new RegExp?('zipdiggly\bdontfindme\b\bxx','gmi'); if(submatchIndex == undefined) submatchIndex=0; if(disallowList != undefined) oREDisallow=new RegExp?(this.GetKeywords?(disallowList),'gmi');
while((match = regex.exec(this.code)) != null) { oMatch = new dp.sh.Match(matchsubmatchIndex?, match.index, css); bAddIt = true; if(submatchIndex>0) { sMain = match0?; sSub = matchsubmatchIndex?; if(oREDisallow.test(sSub)) { bAddIt=false; } else { iOffset = sMain.indexOf(sSub,4); //must be after "LET " or "RAW " oMatch.index += iOffset; } } if(bAddIt) { this.matches[this.matches.length] = oMatch; } } }
// I have two special cases that this takes care of; SET INTRO=intropatternname SET TRANSITION=transitionpatternname RAW INTRO=4/4,15,15,15,25,25 RAW TRANSITION=4/4,15,15,15,25,25 In which case the SET INTRO/TRANSITION would have been handled already
Anyway, it's been an interesting day working through this. And I didn't have to alter any of the main code (but did have to co-opt it, I guess, and adapt a copy) All the above changes are in the customized Brush file
David! This is killer! Worked perfect. Thanks, Steve
let f1 and f2 be two input files of unknown length whose records are integers if the records in both files are in ascending order, the files can be merged to produce a third file f3 whose records are likewise in ascending order. the following algorithm shows how this can be done without using arrys or other costly internal data structures
funtion merge (file f1, file f2, file f3) get next record from f1 into x get next record from f2 into y while(not eof(f1) or not eof(f2)) if x < y then write x to f3 get next record from f1 into x else write y to f3 get next record from f2 into y end-if end-while
end-funtion //it's merge program #include<iostream> using namespace std; const int MAX = 100; int main() { int aMAX? = {1, 2, 8, 4, 7}, bMAX? = {7, 8, 5, 1, 3, 12}, cMAX?; int aSize = 5, bSize = 6, cSize; int indexA = 0; // initialize the Array Indices int indexB = 0; int indexC = 0; while( (indexA < aSize) && (indexB < bSize) ) { if (aindexA? < bindexB?) { cindexC? = aindexA?; indexA++; //increase the index } else { cindexC? = bindexB?; indexB++; //increase the index } indexC++; //move to the next position in the new array } int i; for(i = 0; i < indexC; i++) { cout << ci? << ' '; } system("pause"); return 0; }
took me a while to figure this out. In order to get the script working, you have to put the js declaration right before the closing </body> tag.
Cool script but the instructions leave much to be desired!
This is WICKED!
I have one problem though, my escape chars get lost (\).
ie. the following code:
<?php echo "Carlos said \"loving this script\""; ?>
renders as:
<?php echo "Carlos said "loving this script""; ?>
which will cause a parse error.
I suspect the solution is to use a special char or string in place of the \ and dynamically replace it from within the js.
I'll post when I find the solution.
regarding on Comment by joomlers, Dec 19, 2007 about function empty() does anyone knows how to fix this? coz I also experience it.
--->> if ( ! emptyempty ( $STARTVIEW ) ) {
thanks
that worked great...thank you! :)
This is unbelievably wonderful, awesome and works perfectly for me, thank you very much. :)
in ff - cool, but doesn't work in opera
not working.
If you're one to pay attention to standards & DOCTYPEs, you're probably cringing at the instruction to add a "name" attribute to your <pre/> elements.
Actually, if you look at the source "shCore.js" there's a comment about this which is kinda funny.
"// for some reason IE doesn't find <pre/> by name, however it does see them just fine by tag name..."
Ironicly enough that's probably got somthing to do with "name" not being a valid attribute of the <pre/> element. IE is actually behaving as it should in this case.
"dp.sh.HighlightAll" really should be rewritten so invalid attributes aren't required. I plan to do just that for my implementation of this otherwise awesome script, just wanted to leave this note for any of the scripts developers who happen to read these comments. :)
Hello,
Excellent work, does it work with tinymce? If so how to configure that?
Thanks
Great Piece ......!!!
I used in my site..... www.certification4career.com
@mr.joebert I agree - I was trying to use this with SharePoint?, which strips the name attribute from the pre tag. I modified HighlightAll to look for a compound class name instead (like "xml code", or "css code"). That said, it still failed to work...
To get it works on tinymce
http://blog.daemon.com.au/go/blog-post/getting-tinymce-to-play-nice-with-dp-syntaxhighlighter
Hello, I have written a plugin for tinymce you can find here
http://weblogs.asp.net/nawaf/archive/2008/04/06/syntaxhighlighter-plugin-for-tinymce-wysiwyg-editor.aspx
how to use in mediawiki
Hello again,
I have upgraded the plug-in to work on tinymce 3.x, you can find it here
http://weblogs.asp.net/nawaf/archive/2008/04/10/syntaxhighlighter-plug-in-for-tinymce-3-x-wysiwyg-editor.aspx
Hope this helps.
klein.stephane said: This code :
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code');must been in onload function like this :
<script language="javascript">window.onload = function () { dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code');} </script>maybe not necessary, put the code:
<script language="javascript"> dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script>after your pre or textarea will be fine.
I admit that I'm eccentric upfront and I don't like to place script tags outside of the head element when I don't have to. Rather than place the scripts at the bottom of the page, how about placing the defer attribute on the script element?
<script language="javascript" defer="defer"> dp.SyntaxHighlighter.ClipboardSwf = '/scripts/clipboard.swf'; dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code',true,false,false,1,false); </script>in the <head> I put <script language="javascript" type="text/javascript" src="javascript/hl/shBrushPhp.js"></script> <script language="javascript" type="text/javascript" src="javascript/hl/shBrushJScript.js"></script> <script language="javascript" type="text/javascript" src="javascript/hl/shBrushSql.js"></script> <script language="javascript" type="text/javascript" src="javascript/hl/shBrushXml.js"></script> <script language="javascript" type="text/javascript" src="javascript/hl/shBrushCss.js"></script>
And at the botom of the page <script language="javascript"> dp.SyntaxHighlighter?.ClipboardSwf? = 'javascript/hl/clipboard.swf'; dp.SyntaxHighlighter?.BloggerMode(); dp.SyntaxHighlighter?.HighlightAll('code',true,false,false,1,false); </script> And its not working: Error: dp.SyntaxHighlighter?.HighlightAll is not a function
I can't get the following to work. I know all the files are referred to correctly, but I did mess w/ the structure to make it simpler. (the CSS file is called syntax-highlighter.css and is in the same folder as this code... all the js's and the swf are in syntax/ which is in the same folder as this code)
What am I doing wrong?
{{{<html> <head> <title>code-test</title> <link rel="stylesheet" type="text/css" href="syntax-highlighter.css"></link> <script language="javascript" src="scripts/shBrushRuby.js"></script> <script language="javascript" src="scripts/shCore.js"></script> <script language="javascript" src="scripts/shBrushXml.js"></script> <script language="javascript" defer="defer"> dp.SyntaxHighlighter?.ClipboardSwf? = 'scripts/clipboard.swf'; dp.SyntaxHighlighter?.HighlightAll('code'); </script> </head>
<body> <a href='scripts/clipboard.swf'>Clipboard</a> <pre name="code" class="ruby"> require 'ruby.rb' def this_class puts "Here this class, #{class} is defined." end block "random text" end </pre> </body> </html>}}}
Sorry... I meant the js's and swf are in the folder 'scripts'.
Javascript should be linked that way: <script type="text/javascript" src="/synhighlighter/shBrushXml.js"></script>
In other words the "language" attribute is deprecated and does not replace the "type" attribute. Using the "language" attribute only may lead to un expected behaviour (non-working JS): <script language="javascript" src="/synhighlighter/shBrushXml.js"></script>
To use SyntaxHighligter? with SPIP. You can try the plugin : http://www.touv.fr/spip.php?article141
I think this needs a bit of a re-think in order to work with XHTML pages, you're not allowed to use name as that's been replaced by ID, and you can only have one ID which would limit this to one use per page (little use for tutorials). I think it needs to use the class attribute if possible...
However, visually it looks great!
Please fix <script> syntax: <script class="javascript" ...> should be: <script type="text/javascript" ...>
For all the guys who wants to use xtml. You only need to change the following in the core.js
Line 146 if(tagsi?.getAttribute('name')==name) --> if(tagsi?.getAttribute('title')==name)
title is a universal html attribute so u can use this to make ur code xhtml valid.
Thomas
It don´t Work. Whats wrong ?
<html> <head> <link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link> <script language="javascript" src="js/shCore.js"></script> <script language="javascript" src="js/shBrushCSharp.js"></script> <script language="javascript" src="js/shBrushXml.js"></script> <script language="javascript"> dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script> </head> <body> <pre name="code" class="xhtml:nocontrols:firstline[10]"> <input type="text" name="dsad" /> </pre> </body> </html>using System; namespace HighLighterTest { internal static class Program { /// <summary> /// The main entry point for the application. /// </summary> private static void Main() { SyntaxHighlighterInfos("GeShi", "1.0.7.21", new DateTime(2008, 3, 22), "Very good !"); SyntaxHighlighterInfos("SyntaxHighlighter", "1.5.1", new DateTime(2007, 8, 5), "Unknown... in test."); } public static void SyntaxHighlighterInfos(String name, String version, DateTime rDate, String eval) { var mySH = new {Name = name, Version = version, ReleaseDate = rDate.ToShortDateString(), Evaluate = eval}; Console.Out.WriteLine(String.Format("Name:{0} Version:{1} Release Date:{2} Evaluation:{3}", mySH.Name, mySH.Version, mySH.ReleaseDate, mySH.Evaluate)); } } }I'm almost able to get this to work w/ Blogger (I use old-style templates). The problem is, when blogger publishes a post, it does it all on one line, with <br/> tags to separate the lines even if they are in <pre> tags, which is wrong... but I can't figure out a way around it. Unfortunately, this solution dutifully highlights it, all on one line, <br/> tags and all.
Has anyone else solved this?
btw - sorry about the markup snafus above.
I have just written a practical guide explaining how to install and use the class SyntaxHighlighter?. For Italian programmers, there is a translation for the SyntaxHighlighter guide.
fails: <script language="javascript" src="js/shCore.js"></script> <script language="javascript" src="js/shBrushPhp.js"></script> works: (before </head>) <script type="text/javascript" src="js/shCore.js"></script> <script type="text/javascript" src="js/shBrushPhp.js"></script> look -> is type="text/javascript" not language="javascript" and at the end of page (before </body>) <script language="javascript"> dp.SyntaxHighlighter.ClipboardSwf = '/js/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script>I'm using this with Joomla, and having an issue with it automatically closing my Include statements, mistakenly thinking they're tags. For example: <pre name="code" class="cpp"> #include <Testing.h> main
http://www.ekimhost.com
i used those code in my site : http://www.baskent.in Thanx you
thanks http://www.uzaktan-egitim.eu http://www.acikogretim.eu http://www.perims.net http://www.d52.net
thanks you http://www.vitoyun.com/
www.psturkey.com
http://www.psturkey.com
very good. karikatür
<a href="http://www.morveotesifan.net>bakire</a>
Can you please remove the f'in SPAM from the comments?
I would like to thank you for this great tool.
I got it to work and it really is wonderful. But the directions here were slightly off. In the code for making it work, it referred to files in the js, css and flash directories, but in the rar file there are only scripts and styles directories. So everywhere the code says it should be js or css, it should be scripts or styles respectively. Also, there is no flash directory in the rar file, the flash file is inside the scripts directory.
I have written a simple example for people to get started with:
http://fahdshariff.blogspot.com/2008/07/syntax-highlighting-code-in-webpages.html
Is this possible to post for VBA codes?
@save.nx if you want to use syntaxhighlighter with <code> instead <pre> edit shCore.js and change FindTagsByName(_75,_5f,"pre"); by FindTagsByName(_75,_5f,"code"); on line 373.
Keep in mind, if you're using Blogger you NEED to call "BloggerMode" before the "HighlightAll" call:
db.SyntaxHighlighter?.BloggerMode();
Finally, to get the whole thing to render properly on the page, you have to add JavaScript? to the page. <a href='http://www.sbsnedir.com'>sbs</a> <a href='http://www.egitimsunu.com'> egitim sunu slayt</a>. Yes. It's very good idea. But, that mean's "NOTE: One important thing to watch out for is opening triangular bracket <. It must be replaced with an HTML equivalent of < in all cases. Failure to do won't break the page, but might break the source code displayed. "
It's a good idea to change FindTagsByName?(75,5f,"pre"); to FindTagsByName?(75,5f,"a"); in shCore.js - this will make your file XHTML valid and also fix the <br/> issue (I think).
Make sure to include the correct language shBrush<language>.js file for the language you're trying to highlight. I blindly included the files in the 'Making it work' section and it didn't work (I was trying to highlight sql). Once I included the shBrushSql.js it worked fine.
thanks
I'm sorry for the bother, but I just can't get this to look anything like the home page graphic. I'm trying to display code for developers, and thought this looked like a cool way to do it, but I need a "complete example", not just a few lines of code here and there. I'm trying to display C#, XML, PowerShell? (doesn't seem like this supports that), VB and VB.NET. I seem to get something different every time I try to put this together in Visual Studio 2008. Will anyone take pity on me and provide a non-programmer type a complete example that of a "whole" html page with the appropriate paths, etc for the scripts, flash, and css files?
BTW, this really looks great. I'm impressed by what I see, and it would be perfect if I could just figure how. The top (Print, Copy to Clipboard, etc) and the left has no fill. If you need to send me a large file send it to cliffr1954@hotmail.com. Thanks in advance.
I was having a problem with my code wrapping to two lines when it should stay on one line and just have overflow:auto. Added this line to the SyntaxHighlighter?.css file to fix it:
.dp-highlighter ol li { white-space:nowrap !important; }
you can use google syntax highlighter for pl sql via using this script: <a href="http://afsungur.blogspot.com/2008/08/google-syntax-highlighter-for-plsql.html">Pl Sql Syntax Highlighter</a>
thank you very much... works great... to the guys having problems, be sure to include the correct js of your language.
<pre name="code" class="c-sharp"> class A { int a =0; } </pre>
To you guys who are having no luck getting this to work, it could well be your theme that is incompatible with it! Select the default wordpress theme and see if it makes a difference.
Kushel from http://www.marbleblue.co.uk
Works like a charm on FF and Safari, can't seem to get it working on IE6 or 7, any ideas?
regarding on Comment by joomlers, Dec 19, 2007 and fhranz.alf, Feb 27, 2008: I've noticed that inside shBrushPhp.js, the PHP keyword:"empty" belongs to both keywords and functions list. To avoid a double "empty", just delete it from functions list!
Долго искал нормальный хайлайтер для Wordpress, вот этот был быв самый раз. Только есть ли он в виде плагина? Я и сам делаю плагины для Wordpress, можно попробовать сделать плагин с этим хайлайтером.