Example: Syntax highlighting for a javascript code:
function helloSyntaxHighlighter() { return "hi!"; }
How to do Syntax highlighting ?
- Download syntax highlighter from here. Download Latest Version
- Alternative to Downloading: If you dont have hosting space to host your downloaded scripts, Alex Gorbatchev provide you the already hosted scripts.So what you have to do? No need of downloading the script. Just add the following lines and Skip to Step 5
- Include the shCore.js and shCoreDefault.css
- Include the brush for particular language. For javascript syntax highlighting, include Javascript brush file shBrushJScript.js
- If you are integrating syntax highlighter in Blogger, Skip this step. Else Call the function SyntaxHighlighter.all()
- Blogger Integration (New in Syntax highlighter Version:3.0.83) If using in blogger, use it like
- Now write the code inside <pre> </pre> tags. See that all < and > are replaced with < and > respectively.
<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> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script src="scripts/shCore.js" type="text/javascript"/> <link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/shBrushJScript.js"/>See available brushes.
<script type="text/javascript">SyntaxHighlighter.all();/>
SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all();
<pre class='brush:html' > <html> <head > </head> <body> <body> <html> </pre>
See more at : http://alexgorbatchev.com/SyntaxHighlighter/
Syntax Highlighter Evolved - Wordpress Plugin
SyntaxHighlighter Evolved is a wordpress plugin which works based on Alex Gorbatchev's Syntax highlighter .How wordpress plugin?
- Install the wordpress plugin directly or by uploading the zipped file into wp-content/plugins and activate it.
- Just wrap your code in [language], such as [php]code here[/php] or [css]code here[/css]. The shortcodes accept a wide variety of parameters. These are listed in plugin settings page.
No comments:
Post a Comment