Syntax Highlighting is a must have for any site that focuses on such subjects as Web Development tutorials. Mainly because a Syntax Highlighter can show you the actual code and stops the browser from interpreting it.
Which is very useful for any tutorial writer who wishes to show readers the code he/she is using in a given tutorial. Continue Reading...
If you are a web developer and have never seen a Syntax Highlighting plugin before then here are the basics:
(x)HTML, CSS, PHP, javaScript etc…So lets take a look at the best Highlighter I personally know of: SyntaxHighlighter by Alex Gorbatchev. Yes i know that page with the bright yellow looks very intimidating right now but not to worry that’s why I’m here 
So lets go over and download the source files that we need to get the highlighting working.
You should have this:
Now we need to make a HTML page to test our new toy, (yes I am still talking about the Highlighter ).
So set up a page with the following values and Divs etc…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>The SyntaxHighlighter Tutorial Files - By KayRoseDesign</title> </head> <body> <div id="wrap"> <div id="container"> <h2>Everybody Was 'Syntax Highlighting'!</h2> </div> </div> </body> </html>
Just a pretty basic html page.
It’s time to get everything in place so that we can link to them the next step; your folder should look as follows:
So we need to add the files named shBrushXml.js and shCore.js into our JS folder. The we need to add the shCore.css and shThemeDefault.css in our CSS folder.
In the header section below the title tag, add the following links:
<script type="text/javascript" src="js/shCore.js"></script> <!-- At least one brush, here we choose XML. You need to include a brush for every language you want to highlight --> <script type="text/javascript" src="js/shBrushXml.js"></script> <!-- Include *at least* the core style and default theme --> <link href="css/shCore.css" rel="stylesheet" type="text/css" /> <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
As you can see each part has been described very well be Alex Gorbatchev.
Now we’re onto the last step, yay!
So we only need to add one more piece of javaScript, and here it is:
<script type="text/javascript"> SyntaxHighlighter.all() </script>
Just put it below the links to our javaScript file and Voila!
Lets show our code shall we?
Well all we need to do is out in some pre tags, like so:
<pre class="brush: xhtml"> <h2>Hello, World!</h2> <p> Paragraph Tags! </p> <p> <strong>Strong Tags within Paragraph Tags!</strong> </p> </pre>
And the output will looks like so:
I hope you enjoyed this quick tutorial. If you did then leave a comment telling me why you liked or telling what I did wrong!
Subscribe to our RSS Feed and E-Mail for the latest updates on all of our content.
Firefox is one of the most popular browsers in the world. The secret behind this popularity is thousands of small apps available with firefox which is also free.
With all the modern browsers starting to support CSS3 (including Mozilla Firefox 4, Apple Safari 4, Internet Explorer 9), it’s time to take a real look at CSS3 and see what it can do, and what it’s capable of doing. CSS3 has a lot of new properties to use, including gradients, border images, transitions, animations, border radius, @font-face, shadows, and more.
Since HTML5 has been in development, there has been a lot of speculation that the introduction of mixed with JavaScript means flash will have no place on the internet. I’ve taken some time to have a look at what developers have created using a combination of the JavaScript and , and it is starting to look rather impressive.
Today we are showcasing “Best of the Web”. We have scoured the internet in search of other design driven blogs and websites to showcase what they have to offer for the month of June, 2010. There is plenty of great stuff out there such as tutorials, freebies, resources and lots of inspirational pieces. I am confident that your designs will benefit from these hot new finds.
Today’s web treat is a free combo pack of large, high resolution (2400px * 1600px) Hot Pink Industrial Grunge Textures in .jpg format.
As we mentioned before, logos are a very important part of building your brand’s identity. “Branding” yourself, is the best way to represent who you are and what you are all about. If designed properly, logos can have an enormous impact on your company’s success.
For the moment we don´t approve any guest writer applications, please check back later or subscribe to our feed for notice.
Stay updated with:
Be The First To Comment!