Hi all...,
I hope this is very useful to the people who are new to web world.
Fro highlighting the we had so many predefined styles and scripts are available for us. On Those my taste is "SyntaxHighlighter" Yes this is Really an awesome code sytax highlighter library.
We can integrate this directly download to our application or else we can use this with the help of the links. these files are available to us in SVN. So its a good option call those using links and including those at the time of rendering the page.
Here I am giving few steps to integrate this easily to our web app.
Step 1:-
Just Copy the CSS from this Page link and paste in your web page between the tags <head>...</head>
If your web app is a BLOG then find the tag <b:skin>....</b:skin> and paste after these tags.
Step 2:-
Copy and paste the following script tags in your header tags that is in between <head>..</head>
Step:3:-
Find you body end tag </body> Copy the below code and paste it just before the tag.
if your application is a blog then use the below instead of the above code.
Step 4:-
Now don't forget to keep your code what you want to display in you web page with the syntax highlighter between the below tags.
Now see your code content how it will look.
Here i want to give you a small suggestion dont use all the scritp tags what i have given to you step 2 if you code content not belongs to those particular languages., use one the tags what your code content belongs to use.
I hope this is very useful to the people who are new to web world.
Fro highlighting the we had so many predefined styles and scripts are available for us. On Those my taste is "SyntaxHighlighter" Yes this is Really an awesome code sytax highlighter library.
We can integrate this directly download to our application or else we can use this with the help of the links. these files are available to us in SVN. So its a good option call those using links and including those at the time of rendering the page.
Here I am giving few steps to integrate this easily to our web app.
Step 1:-
Just Copy the CSS from this Page link and paste in your web page between the tags <head>...</head>
If your web app is a BLOG then find the tag <b:skin>....</b:skin> and paste after these tags.
Step 2:-
Copy and paste the following script tags in your header tags that is in between <head>..</head>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"> </script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"> </script>
Step:3:-
Find you body end tag </body> Copy the below code and paste it just before the tag.
<script type='text/javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<script type='text/javascript'>
//<![CDATA[
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
//]]>
</script>
Step 4:-
Now don't forget to keep your code what you want to display in you web page with the syntax highlighter between the below tags.
<pre class="brush:cpp" name="code"> <!-- Your code Here --> </pre>
Here i want to give you a small suggestion dont use all the scritp tags what i have given to you step 2 if you code content not belongs to those particular languages., use one the tags what your code content belongs to use.
Post a Comment