Need to display code in your blog or website like the html code given below ??
<html> <body> <div> Hi, I am html code </div> </body> </html>
Or a C# code
using system;
protected string func()
{
Response.WriteLine("Hi from C# code");
}
Pretty nice formatting and show-off . Isn't it ? You too can do this in some simple steps.
Just follow this simple copy-paste mechanism step by step.
Step 1: Adding Syntax Highlighter to your blog.
(a)Add some css and javascript
Place these css links and javascripts between <head> & </head> section of your blog.
<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/shAutoloader.js' type='text/javascript'/>
(b) Setup Autoloader
Setup autoloader.js javascript for dynamic loading of brushes so that only those brushes are loaded which are being used by the codes. It saves a lot of loading time of page.
<script language='javascript'>
function path()
{
var args = arguments,
result = [];
for(var i = 0; i != (args.length-1); i++)
result.push(args[i].replace('@','http://alexgorbatchev.com/pub/sh/current/scripts/'));
return result
};
</script>
(c) Call brushes to highlight code
Put the following code to include all brushes and highlight of your codes in the given page.Insert the script below just above </body> tag.
<script type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; // If you are not using blogger, switch it to 'false'. //i.e. SyntaxHighlighter.config.bloggerMode = false; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.autoloader.apply(null, path( 'applescript @shBrushAppleScript.js', 'actionscript3 as3 @shBrushAS3.js', 'bash shell @shBrushBash.js', 'coldfusion cf @shBrushColdFusion.js', 'cpp c @shBrushCpp.js', 'c# c-sharp csharp @shBrushCSharp.js', 'css @shBrushCss.js', 'delphi pascal @shBrushDelphi.js', 'diff patch pas @shBrushDiff.js', 'erl erlang @shBrushErlang.js', 'groovy @shBrushGroovy.js', 'java @shBrushJava.js', 'jfx javafx @shBrushJavaFX.js', 'js jscript javascript @shBrushJScript.js', 'perl pl @shBrushPerl.js', 'php @shBrushPhp.js', 'text plain @shBrushPlain.js', 'py python @shBrushPython.js', 'ruby rails ror rb @shBrushRuby.js', 'sass scss @shBrushSass.js', 'scala @shBrushScala.js', 'sql @shBrushSql.js', 'vb vbnet @shBrushVb.js', 'xml xhtml xslt html @shBrushXml.js', 'xml @shBrushXml.js' )); SyntaxHighlighter.all() </script>
Step 2: Embed syntax highlighter in your post.
When writing a new post, you need to use <pre> tag in the post. The code of your post needs to placed between the <pre> and </pre> tags. You have to add specific brushes by applying class attributes.
e.g.
<pre class="brush: html">
<body>
<div> Hi, I am html code </div>
</body>
</html>
</pre>
Similarly for javascript your brush will be js or javascript or jscript.
So, post goes like this
<pre class="brush: js">
Javscript code
</pre>
A complete list of brushes can be found from here
Customization:
Syntax Highlighter offer a great deal of customization.
e.g.
<pre class="brush: js; ruler: true; gutter: false; toolbar: false; collapse: true; auto-links: false; smart-tabs: false; first-line: 10; highlight: [2, 4, 6]">
javascript code goes here..
</pre>
There are some global settings also which should be called before SyntaxHighlighter.all(); in step 1(c)
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['smart-tabs'] = false;
.
.
SyntaxHighlighter.all();
A complete list of customization can be found here.
Themes: SyntaxHighlighter 2.0 introduced custom CSS themes.You can switch to different themes by just replacing the default theme (shThemeDefault.css) with desired theme.You just need to change a css file.
Replace this line
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
with
<link href='http://alexgorbatchev.com/pub/sh/current/styles/{theme name}' rel='stylesheet' type='text/css'/>
where {theme name} can be
shThemeDjango.css,
shThemeEclipse.css,
shThemeEmacs.css,
shThemeFadeToGrey.css,
shThemeMidnight.css or
shThemeRDark.css
(Click on themes to feel their looks)
For example, for RDark theme, your code goes like this,
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
0 comments: