<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>1stwebdesigner - Graphic and Web Design Blog &#187; code</title>
	<atom:link href="http://www.1stwebdesigner.com/tag/code/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.1stwebdesigner.com</link>
	<description>1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles.</description>
	<lastBuildDate>Sun, 12 Feb 2012 13:09:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>25 Handy Tools To Paste And Share Your Code Snippets</title>
		<link>http://www.1stwebdesigner.com/freebies/paste-share-code-snippets/</link>
		<comments>http://www.1stwebdesigner.com/freebies/paste-share-code-snippets/#comments</comments>
		<pubDate>Thu, 10 Jun 2010 21:00:25 +0000</pubDate>
		<dc:creator>Srikanth AD</dc:creator>
				<category><![CDATA[Freebies]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[paste]]></category>
		<category><![CDATA[save]]></category>
		<category><![CDATA[tools]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=16534</guid>
		<description><![CDATA[Pastebins are web applications that allow users to upload snippets of text, usually samples of source code, for public viewing. They are used very often in IRC channels, social networking sites, blogs etc. Users can paste source codes in a pastebin and share the URL for others to view. You can find a vast number [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/resources/paste-share-code-snippets/" target="_self"><img class="size-full wp-image-17092 alignleft" title="title-paste-share-your-code" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/title-paste-share-your-code.jpg" alt="" width="150" height="150" /></a>Pastebins are web applications that allow users to upload snippets of text, usually samples of source code, for public viewing. They are used very often in IRC channels, social networking sites, blogs etc. Users can paste source codes in a pastebin and share the URL for others to view.</p>
<p>You can find a vast number of pastebins on the World Wide Web. Most of them have a common set of features. But some of them have added features that are better than the others. We bring you some of the best pastebin tools so that you can select the one that best suits your needs.<span id="more-16534"></span></p>
<p>1. <a title="CodeTidy" href="http://codetidy.com/" target="_blank"><strong>CodeTidy</strong></a> &#8211; This pastebin allows you to paste any snippets of text to a URL and easily share it with your friends. It also enables you to encrypt the code with a password so as to keep your code private. In addition to this, it also provides archiving and syntax highlighting.</p>
<p><a href="http://codetidy.com"><img class="alignnone size-full wp-image-1622" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/codetidy.png" alt="CodeTidy" width="290" height="245" /></a></p>
<p>2. <strong><a title="Ideone" href="http://ideone.com/" target="_blank">Ideone</a></strong> &#8211; Ideone is not just a patebin but also an online compiler and debugging tool. It allows you to compile and run the code online. It supports more than 40 programming languages. It also provides easy sharing features, archiving &amp; syntax highlighting. However, it does not support password encryption.</p>
<p><a href="http://ideone.com/"><img class="alignnone size-full wp-image-1594" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/ideone-screenshot.png" alt="Ideone" width="522" height="335" /></a></p>
<p>3. <strong><a title="Pastebin.com" href="http://pastebin.com" target="_blank">Pastebin.com</a></strong> &#8211; Pastebin.com enables you to host your texts and codes on dedicated servers for easy sharing. In addition to this, it enables you to determine the expiration date of the code, provides syntax highlighting &amp; archiving and automatically assigns sub-domains. This pastebin too does not support password encryption.</p>
<p><a href="http://pastebin.com"><img class="alignnone size-full wp-image-1595" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/pastebin-screenshot.png" alt="Pastebin.com" width="441" height="538" /></a></p>
<p>4. <strong><a title="Mystic Paste" href="http://mysticpaste.com/" target="_blank">Mystic Paste</a></strong> &#8211; Mystic Paste is an open source pastebin that enables easy sharing of your codes. It allows you to post your code on twitter and also comment on other pastes. It also provides multiple plugins and 3rd party tools.</p>
<p><a href="http://mysticpaste.com/"><img class="alignnone size-full wp-image-1610" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/mystic-paste.png" alt="Mystic Paste" width="584" height="181" /></a></p>
<p>5. <strong><a title="TinyPaste Pastebin" href="http://tinypaste.com/" target="_blank">TinyPaste</a></strong> &#8211; TinyPaste enables you to easily host your text &amp; codes and also earn money from your pastes. It pays you for every unique user that visits your paste. It enables password encryption, syntax highlighting, archiving and also sub-domains. It also enables you to compile the code. TinyPaste provides an API and certain 3rd party tools.</p>
<p><a href="http://tinypaste.com"><img class="alignnone size-full wp-image-1596" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/tinypaste.png" alt="TinyPaste" width="551" height="416" /></a></p>
<p>6. <strong><a title="Paste HTML" href="http://pastehtml.com/" target="_blank">Paste HTML</a></strong> &#8211; Paste HTML enables you to paste HTML code, Plain text as well as Markdown. It can be used as an anonymous web host to host HTML pages. This pastebin is specially designed for HTML codes.</p>
<p><a href="http://pastehtml.com/"><img class="alignnone size-full wp-image-1597" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/paste-html.png" alt="Paste HTML" width="562" height="405" /></a></p>
<p>7. <a title="codepad" href="http://codepad.org/" target="_blank"><strong>codepad</strong></a> &#8211; codepad is an online compiler that enables you to run your code as well as share it with your friends. It provides syntax highlighting and also enables you to keep your code private. However, it does not support password encryption. It currently supports 13 major programming languages.</p>
<p><a href="http://codepad.org/"><img class="alignnone size-full wp-image-1598" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/codepad-screenshot.png" alt="codepad" width="551" height="317" /></a></p>
<p>8. <strong><a title="MathBin" href="http://mathbin.net/" target="_blank">MathBin</a></strong> &#8211; MathBin enables you to quickly post mathematical equations. It uses simple LaTeX formatting to render your equation as images.  This tool comes in handy for quickly posting mathematics and physics problems for others to view.</p>
<p><a href="http://mathbin.net/"><img class="alignnone size-full wp-image-1599" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/mathbin-schrodinger-equation.png" alt="MathBin" width="531" height="202" /></a></p>
<p>9. <a title="Snipplr" href="http://snipplr.com/" target="_blank"><strong>Snipplr</strong></a> &#8211; Snipplr is a public source code repository that enables you to store and share your code snippets. It allows syntax highlighting as well as archiving. You must register with Snipplr to start pasting your code snippets.</p>
<p><a href="http://snipplr.com/"><img class="alignnone size-full wp-image-1624" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/snipplr-screenshot.png" alt="Snipplr" width="450" height="329" /></a></p>
<p>10. <a title="Code Upload" href="http://www.codeupload.com/" target="_blank"><strong>Code Upload</strong></a> &#8211; Code Upload is a free and open source pastebin to share your code with others. Some of it&#8217;s features include syntax highlighting, archiving and password protection.</p>
<p>11. <strong><a title="Paste" href="http://paste.info.tm/" target="_blank">PASTE</a></strong> &#8211; PASTE enables you to paste your source codes and general debugging text. It allows you to specify the expiration time for the code and also set password for your pastes.</p>
<p><a href="http://paste.info.tm/"><img class="alignnone size-full wp-image-1625" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/paste.png" alt="Paste" width="531" height="322" /></a></p>
<p>12. <strong><a title="Gist - GitHub" href="http://gist.github.com/" target="_blank">Gist &#8211; GitHub</a></strong> &#8211; Gist is a simple way to share snippets and pastes with others. Among its various features are syntax highlighting, archiving, private pastes etc. All Gists (pastes) are automatically versioned, forkable and usable as a git repository.</p>
<p><a href="http://gist.github.com/"><img class="alignnone size-full wp-image-1601" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/gist-github-screenshot1.png" alt="Gist - GitHub" width="572" height="485" /></a></p>
<p>13. <a title="Codetrunk" href="http://www.codetrunk.com/" target="_blank"><strong>Codetrunk</strong></a> &#8211; Codetrunk is an open source snippet sharing tool. Codetrunk enables syntax highlighting, commenting, revising and archiving. It automatically creates sub-domains for each pastes (trunks).</p>
<p><a href="http://www.codetrunk.com/"><img class="alignnone size-full wp-image-1626" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/codetrunk.png" alt="Codetrunk" width="574" height="294" /></a></p>
<p>14. <a title="PasteSite" href="http://pastesite.com/" target="_blank"><strong>PasteSite</strong></a> &#8211; PasteSite enables you to submit snippets of code which can then be viewed from the website with syntax highlighting. PasteSite enables you to keep your pastes private and also protect it with a password. It also enables you to sign up so as to keep track and also delete your pastes.</p>
<p><a href="http://pastesite.com/"><img class="alignnone size-full wp-image-1627" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/pastesite.png" alt="PasteSite" width="539" height="184" /></a></p>
<p>15. <strong><a title="pzt.me" href="http://pzt.me/" target="_blank">pzt.me</a></strong> &#8211; pzt.me is a multi-purpose pastebin for sharing snippets of text, images, videos and URL&#8217;s over miscellaneous sharing and micro blogging media. It enables you to embed videos from popular video streaming sites like YouTube, DailyMotion,Vimeo etc. It can also be used as a URL shortener.</p>
<p>16. <strong><a title="Snipt.org" href="http://snipt.org" target="_blank">Snipt.org</a></strong> &#8211; Snipt provides you an easy way to share your source code on micro blogging sites like twitter. Some of it&#8217;s features include syntax highlighting, archiving and private snipts. Snipt Box enables you to retrieve your snipts by simply using your twitter username.</p>
<p><a href="http://snipt.org"><img class="alignnone size-full wp-image-1603" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/snipt-screenshot.png" alt="Snipt" width="538" height="257" /></a></p>
<p>17. <a title="Clippy" href="http://clippy.cz.cc/" target="_blank"><strong>Clippy</strong></a> &#8211; Clippy is a free NoPaste service that provides you with various features such as password protection, syntax highlighting, antispam filters and sub-domains. It currently supports more than 50 programming languages.</p>
<p>18. <strong><a title="bin.z80.us" href="http://bin.z80.us/" target="_blank">bin.z80.us</a></strong> &#8211; This is an extremely basic implementation of a pastebin. It is very simple and easy-to-use. The interface contains only a text box and a paste button.</p>
<p><a href="http://bin.z80.us"><img class="alignnone size-full wp-image-1608" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/bin-z80-us.png" alt="bin.z80.us" width="476" height="283" /></a></p>
<p>19. <a title="dpaste" href="http://dpaste.com/" target="_blank"><strong>dpaste</strong></a> &#8211; dpaste is a tool for quickly sharing pieces of code with multiple people. It was originally created by Django programmers to use on the #django IRC channel. It provides syntax highlighting and archiving. However, it supports only a few programming languages.</p>
<p><a href="http://dpaste.com/"><img class="alignnone size-full wp-image-1628" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/dpaste-screenshot.png" alt="dpaste" width="564" height="372" /></a></p>
<p>20. <a title="Slexy" href="http://slexy.org/" target="_blank"><strong>Slexy</strong></a> &#8211; Slexy is a powerful and slick pastebin designed with the user in mind. It allows you to add tabs within pastes, save preferences and paste via CLI/terminal (using PastebinIt). It also enables you to set the paste expiration, highlight the code syntax and make your pastes private.</p>
<p><a href="http://slexy.org"><img class="alignnone size-full wp-image-1605" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/slexy-screenshot.png" alt="Slexy" width="574" height="466" /></a></p>
<p>21. <a title="Paste-It" href="http://paste-it.net/" target="_blank"><strong>Paste-It</strong></a> &#8211; Paste-It is a simple and easy-to-use pastebin. Some of it&#8217;s features are private pastes, paste expiration time and syntax highlighting. It also provides Firefox and Chrome plugins for easy pasting.</p>
<p><a href="http://paste-it.net/"><img class="alignnone size-full wp-image-1604" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/paste-it.png" alt="Paste-It" width="530" height="368" /></a></p>
<p>22. <a title="PasteBin.BJETDesign.com" href="http://pastebin.bjetdesign.com/" target="_blank"><strong>PasteBin.BJETDesign.com</strong></a> &#8211; This is another simple and easy-to-use pastebin. It is similar to bin.z80.us. It has a simple interface. However, this pastebin provides an additional feature of syntax highlighting compared to bin.80.us.</p>
<p><a href="http://pastebin.bjetdesign.com/"><img class="alignnone size-full wp-image-1607" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/pastebin-bjetdesign1.png" alt="PasteBin.BjetDesign.com" width="478" height="314" /></a></p>
<p>23. <a title="YourPaste" href="http://yourpaste.net/new" target="_blank"><strong>YourPaste</strong></a> &#8211; YourPaste enables you to paste texts, quotes and programming codes. It enables you to highlight the code syntax, make private posts and also set the expiration time.</p>
<p>24. <a title="pastebin.ca" href="http://pastebin.ca/" target="_blank"><strong>pastebin.ca</strong></a> &#8211; pastebin.ca is an open source pastebin tool. It enables you to paste and share your code easily. Some of it&#8217;s features include code syntax highlighting, archiving, password protection and sub-domains. It also enables you to set the expiration time and comment on pastes.</p>
<p>25. <a title="Pastie" href="http://www.pastie.org/" target="_blank"><strong>Pastie</strong></a> &#8211; Pastie is another pastebin with the most common pastebin features like syntax highlighting, archiving and private posts. It supports most of the major programming languages.</p>
<p><a href="http://www.pastie.org/"><img class="alignnone size-full wp-image-1609" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/pastie.png" alt="Pastie" width="577" height="334" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/freebies/paste-share-code-snippets/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>16 Free Javascript Code Syntax Highlighters For Better Programming</title>
		<link>http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/</link>
		<comments>http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/#comments</comments>
		<pubDate>Mon, 03 Aug 2009 12:26:06 +0000</pubDate>
		<dc:creator>Dainis Graveris</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[Freebies]]></category>
		<category><![CDATA[JS & AJAX]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[highlighter]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[syntax]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[webdev]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=3912</guid>
		<description><![CDATA[If you are programmer or actually if you at least have some basic coding skills, you&#8217;ll find this article useful. For example just look at this page source &#8211; without highlighting that whole code is just a bunch of plain black text and it is really hard to find specific things if everything looks the [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/resources/16-free-javascript-code-syntax-highlighters-for-better-programming" target="_self"><img class="alignleft" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/title-syntax-highlighters.jpg" alt="title-syntax-highlighters" width="150" height="150" /></a><span class="drop-cap">I</span>f you are programmer or actually if you at least have some basic coding skills, you&#8217;ll find this article useful. For example just look at this page source &#8211; without highlighting that whole code is just a bunch of plain black text and it is really hard to find specific things if everything looks the same. Thankfully there are many highlighting scripts available, for example Notepad++ also supports and highlights different code snippets. These code syntax highlighters actually are doing mainly the same thing, but with more options, big coding language support, better integration &#8211; really in our days you just need to choose one &#8211; there are too many tools available anyway.<span id="more-3912"></span></p>
<p>Use these syntax highlighters in daily coding or just in cases where you are sharing code with friends, want to add that code in your blog post (by the way there is <a href="http://wordpress.org/extend/plugins/syntaxhighlighter/" target="_blank">SyntaxHighlighter WordPress plugin</a> available too) or just want to rapidly read and maintain it &#8211; use online syntax highlighters in that case and pick your favorite one from this article!</p>
<h2>1. <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter" target="_blank">SyntaxHighlighter</a></h2>
<p>I definitely think this syntax highlighter tool should be your choice &#8211; this tool is supported very well and offers many options, extensions and integrations with other programs and platforms, but however I want to offer you other tools too to choose from.</p>
<p>SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It&#8217;s 100% Java Script based and it doesn&#8217;t care what you have on your server.</p>
<p>The idea behind SyntaxHighlighter is to allow insertion of colored code snippets on a web page without relying on any server side scripts. SyntaxHighlighter isn&#8217;t for those looking for ability to edit highlighted code.</p>
<p><a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Integration" target="_blank">Extensions &amp; Integration</a> &#8211; check out this page too, because you can find there WordPress extensions, Ruby on Rail plugins and much more integration extensions, should be handy!</p>
<p><a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/syntaxhighlighter-javascript-syntax-highlighter.jpg" alt="syntaxhighlighter-javascript-syntax-highlighter" width="570" height="250" /></a></p>
<p class="note"><a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Demo" target="_blank">Check out demo page</a></p>
<p class="download"><a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download" target="_blank">Download link</a></p>
<h2>2. <a href="http://qbnz.com/highlighter/index.php" target="_blank">GeSHi &#8211; Generic Syntax Highlighter</a></h2>
<p>GeSHi supports PHP5 and Windows, and has even been used to highlight code on ASP pages, it really supports and highlights almost every coding language, you should check out his website to read more &#8211; very powerful tool!</p>
<p>GeSHi aims to be a simple but powerful highlighting class, with the following goals:</p>
<ul>
<li>
<div>Support for a wide range of popular languages</div>
</li>
<li>
<div>Easy to add a new language for highlighting</div>
</li>
<li>
<div>Highly customizable output formats</div>
</li>
</ul>
<p><a href="http://qbnz.com/highlighter/index.php" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/geshi-generic-syntax-highlighter.jpg" alt="geshi-generic-syntax-highlighter" width="570" height="250" /></a></p>
<p class="note"><a href="http://qbnz.com/highlighter/demo.php" target="_blank">Check out demo page</a></p>
<p class="download"><a href="http://sourceforge.net/projects/geshi/files/" target="_blank">Download link</a></p>
<h2>3. <a href="http://quickhighlighter.com/" target="_blank">Quick Highlighter</a></h2>
<p>Doesn&#8217;t get any easier than this to create a web page from your source code. This online highlighter tool offers many coding languages you can choose to highlight together with several options, you can check/uncheck before highlighting code:</p>
<ul>
<li>Combine Style and HTML Code</li>
<li>Highlight inbuilt keywords, data types etc.</li>
<li>Strict Mode</li>
<li>Wrap overflowing text</li>
</ul>
<p><a href="http://quickhighlighter.com/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/quick-highlighter-2-syntax-highlighter.jpg" alt="quick-highlighter-syntax-highlighter" width="570" height="250" /></a></p>
<p><a href="http://quickhighlighter.com/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/quick-highlighter-syntax-highlighter.jpg" alt="quick-highlighter-syntax-highlighter" width="570" height="250" /></a></p>
<h2>4. <a href="http://code.google.com/p/google-code-prettify/" target="_blank">Google Code Prettify </a></h2>
<p>A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.</p>
<p>The comments in prettify.js are authoritative but the lexer should work on a number of languages including C and friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl and Ruby, but, because of commenting conventions, doesn&#8217;t work on Smalltalk, or CAML-like languages.</p>
<p>Features:</p>
<ul>
<li>Works on HTML pages</li>
<li>Works even if code contains embedded links, line numbers, etc.</li>
<li>Simple API : include some JS&amp;CSS and add an onload handler.</li>
<li>Lightweights : small download and does not block page from loading while running.</li>
<li>Customizable styles via CSS.</li>
<li>Supports all C-like, Bash-like, and XML-like languages. No need to specify the language</li>
<li>Extensible language handlers for other languages. You can specify the language.</li>
<li>Widely used with good cross-browser support.</li>
</ul>
<h2><a href="http://code.google.com/p/google-code-prettify/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/google-code-prettify-javascript-syntax-highlighter.jpg" alt="google-code-prettify-javascript-syntax-highlighter" width="570" height="250" /></a></h2>
<p class="note"><a href="http://google-code-prettify.googlecode.com/svn/trunk/tests/prettify_test.html" target="_blank">Check out demo page</a></p>
<h2>5. <a href="http://pygments.org/" target="_blank">Pygments &#8211; Python Syntax Highlighter</a></h2>
<p>Pygments is a generic syntax highlighter for general use in all kinds of software such as forum systems, wikis or other applications that need to prettify source code.</p>
<p>Pygments supports an ever-growing range of languages, you can check full list <a href="http://pygments.org/languages/" target="_blank">supported language listing here</a></p>
<p><a href="http://pygments.org/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/pygments-python-syntax-highlighter.jpg" alt="pygments-python-syntax-highlighter" width="570" height="250" /></a></p>
<p class="note"><a href="http://pygments.org/demo/" target="_blank">Check out demo page</a></p>
<p class="download"><a href="http://pygments.org/download/" target="_blank">Download link</a></p>
<h2>6. <a href="http://softwaremaniacs.org/soft/highlight/en/" target="_blank">Highlight.JS Syntax Highlighter</a></h2>
<p>Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It&#8217;s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.</p>
<p>This program supports following languages &#8211;  1C, AVR Assembler, Apache, Axapta, Bash, C#, C++, CSS, DOS .bat, Delphi, Django, HTML, XML, Ini, Java, Javascript, Lisp, MEL (Maya Embedded Language), PHP, Perl, Python, Python profile, RenderMan (RIB, RSL), Ruby, SQL, Smalltalk, VBScript, diff.</p>
<p><a href="http://softwaremaniacs.org/soft/highlight/en/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/highlight-javascript-syntax-highlighter.jpg" alt="highlight-javascript-syntax-highlighter" width="570" height="250" /></a></p>
<p class="note"><a href="http://softwaremaniacs.org/media/soft/highlight/test.html" target="_blank">Check out demo page</a></p>
<p class="download"><a href="http://softwaremaniacs.org/soft/highlight/en/download/" target="_blank">Download link</a></p>
<h2>7. <a href="http://pradador.com/code/lighterjs/" target="_blank">Lighter.js &#8211; Syntax Highlighter written in MooTools</a></h2>
<p>There isn&#8217;t available actual demo page just download link, but it is very easy to use this highlighter as all others by the way.</p>
<p><a href="http://pradador.com/code/lighterjs/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/lighter-syntax-highlighter-written-in-mootools.jpg" alt="lighter-syntax-highlighter-written-in-mootools" width="570" height="250" /></a></p>
<h2>8. <a href="http://shjs.sourceforge.net/" target="_blank">SHJS &#8211; Syntax Highlighting in JavaScript</a></h2>
<p>SHJS is a JavaScript program which highlights source code passages in HTML documents. Documents using SHJS are highlighted on the client side by the web browser.</p>
<p>SHJS Support many languages too &#8211; Bison, CC++, C#, ChangeLog, CSS, Desktop files, DiffFlex, GLSL, Haxe, HTML, Java, Java properties files,JavaScript, JavaScript with DOM, LaTeX. LDAP files, Log files, LSM (Linux Software Map) files, M4, Makefile, Objective Caml, Oracle SQL, Pascal, Perl, PHP,Prolog, Python, RPM spec files, Ruby, S-Lang, Scala, Shell, SQLSt, andard ML, Tcl, XML, Xorg configuration files.</p>
<p><a href="http://shjs.sourceforge.net/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/shjs-syntax-highlighter.jpg" alt="shjs-syntax-highlighter" width="570" height="250" /></a></p>
<p class="download"><a href="http://shjs.sourceforge.net/doc/download.html" target="_blank">Download link</a></p>
<h2>9. <a href="http://codepress.sourceforge.net/index.php" target="_blank">CodePress &#8211; Online Real Time Syntax Highlighting Editor</a></h2>
<p>CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it&#8217;s being typed in the browser.</p>
<p>This editor offers several features like <strong>real-time syntax highlighting</strong>, <strong>code snippets</strong>, <strong>auto completion</strong> and <strong>multiple windows</strong><em>.</em> Check out their website to see online demo version.</p>
<p><a href="http://codepress.sourceforge.net/index.php" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/codepress-online-syntax-highlighter.jpg" alt="codepress-online-syntax-highlighter" width="570" height="250" /></a></p>
<p>Demo page and download links are on the same first page.</p>
<h2>10. <a href="http://code.google.com/p/jquery-chili-js/" target="_blank">Chili 2.2 jQuery code highlighter plugin</a></h2>
<p>Chili is the jQuery code highlighter plugin which is very fast highlighting, trivial setup, fully customizable, thoroughly documented and MIT licensed.</p>
<p>Plugin supports several languages like C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, and XHTML and has many configuration options giving you very good control over code appearance.</p>
<p><a href="http://code.google.com/p/jquery-chili-js/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/chili-jquery-code-highlighter-plugin.jpg" alt="chili-jquery-code-highlighter-plugin" width="570" height="250" /></a></p>
<p class="note"><a href="http://noteslog.com/personal/projects/chili/2.2/" target="_blank">Check out demo examples and install</a></p>
<p class="download"><a href="http://code.google.com/p/jquery-chili-js/downloads/list" target="_blank">Download link</a></p>
<h2>11. <a href="http://www.andre-simon.de/index.html" target="_blank">Highlight &#8211; Code &amp; Syntax highlighting by Andre Simon</a></h2>
<p>Highlight converts source code to formatted text with syntax highlighting:</p>
<ul>
<li>
<div>Colorized output in HTML, XHTML, RTF, TeX, LaTeX, SVG, BBCode and XML format</div>
</li>
<li>
<div>Supports 140+ programming languages</div>
</li>
<li>
<div>Includes 40 colour themes</div>
</li>
<li>
<div>Platform independent</div>
</li>
</ul>
<p><a href="http://www.andre-simon.de/index.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/highlight-andre-simon-syntax-highlighter.jpg" alt="highlight-andre-simon-syntax-highlighter" width="570" height="250" /></a></p>
<p class="note"><a href="http://www.andre-simon.de/doku/highlight/en/highlight_demo.html" target="_blank">Check out demo page</a></p>
<p class="download"><a href="http://www.andre-simon.de/zip/download.html" target="_blank">Download link</a></p>
<h2>12. <a href="http://startbigthinksmall.wordpress.com/2008/10/30/beautyofcode-jquery-plugin-for-syntax-highlighting/" target="_blank">BeautyOfCode: jQuery Plugin for Syntax Highlighting</a></h2>
<p>BeautyOfCode is using Syntaxhighlighter as a base, but this plugin enables xhtml compliant syntax in beautiful way.</p>
<p><a href="http://startbigthinksmall.wordpress.com/2008/10/30/beautyofcode-jquery-plugin-for-syntax-highlighting/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/beauty-of-codejquery-code-highlighter-plugin.jpg" alt="beauty-of-codejquery-code-highlighter-plugin" width="570" height="250" /></a></p>
<h2>13. <a href="http://jush.sourceforge.net/" target="_blank">JUSH &#8211; JavaScript Syntax Highlighter</a></h2>
<p>JavaScript Syntax Highlighter can be used for client-side syntax highlighting of following languages: html, css, javascript, php, mysql, SQLlite, Apache, PostgreSQL.</p>
<p>Features:</p>
<ul>
<li>
<div>Highlights languages embedded into each other</div>
</li>
<li>
<div>Links to documentation of all languages</div>
</li>
<li>
<div>Colors can be easily modified via CSS</div>
</li>
<li>
<div>Recognizes complete PHP syntax including __halt_compiler, heredoc, backticks, {$} variables inside strings, namespaces</div>
</li>
<li>
<div>Works in all major browsers including Internet Explorer, Firefox, Opera</div>
</li>
</ul>
<p><a href="http://jush.sourceforge.net/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/jush-javascript-syntax-highlighter.jpg" alt="jush-javascript-syntax-highlighter" width="570" height="250" /></a></p>
<p class="note"><a href="http://jush.sourceforge.net/#demo" target="_blank">Check out demo page</a></p>
<p class="download"><a href="http://jush.sourceforge.net/#download" target="_blank">Download link</a></p>
<h2>14. Ultraviolet &#8211; Syntax Highlighting Engine</h2>
<p>Ultraviolet is a syntax highlighting engine based on <a href="http://textpow.rubyforge.org/" target="_blank">Textpow</a> &#8211; you must install it to use Ultraviolet first. Since it uses Textmatesyntax files, it offers out of the box syntax highlighting for more than 50 languages and 20 themes. Ultraviolet is at the same time a stand-alone command line utility and a Rubylibrary.</p>
<p><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/ultraviolet-synax-highlighter-engine.jpg" alt="ultraviolet-synax-highlighter-engine" width="570" height="250" /></p>
<p class="note"><a href="http://ultraviolet.rubyforge.org/syntax_gallery.xhtml" target="_blank">Check out demo page</a></p>
<p class="download"><a href="http://rubyforge.org/frs/?group_id=3513" target="_blank">Download link</a></p>
<h2>15. <a href="http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine#Similar%20projects" target="_blank">DlHighlight &#8211; JavaScript Syntax Highlighting Engine</a></h2>
<p>This project is an extensive JavaScript-based syntax highlighting engine, check also why you <a href="http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine#Similar%20projects" target="_blank">should choose this engine</a> instead of others.</p>
<p><a href="http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine#Similar%20projects" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/dlhighlight-code-highlighter-plugin.jpg" alt="dlhighlight-code-highlighter-plugin" width="570" height="250" /></a></p>
<p>Download and demo links are all in the same page.</p>
<h2>16.<a href="http://www.howtocreate.co.uk/tutorials/jsexamples/syntax/" target="_blank"> Syntax highlighter for JavaScript</a></h2>
<p>This online tool will syntax highlight JavaScript 1.2. code. The highlighting is based on patterns, it will not test for valid JavaScript. Put your code into the box, and tell it to syntax highlight. It may take a little while to highlight large amounts of code, be patient and let it finish.</p>
<p>The output format is HTML &#8211; designed so that you can create a Web page displaying your code. I enjoyed how this tool really displays code in very clean way!</p>
<p><a href="http://www.howtocreate.co.uk/tutorials/jsexamples/syntax/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/08/free-syntax-highlighters/syntax-highlightning-javascript.jpg" alt="syntax-highlightning-javascript" width="570" height="250" /></a></p>
<p>Of course there are also many programs with already built in syntax highlighting support, but these online versions and JS scripts offer bigger control over highlighting and flexibility.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/feed/</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>12 Really Handy CSS Framework, Template And Snippet Sites For Smart Web Designer</title>
		<link>http://www.1stwebdesigner.com/css/12-really-handy-css-framework-template-and-snippet-sites-for-smart-web-designer/</link>
		<comments>http://www.1stwebdesigner.com/css/12-really-handy-css-framework-template-and-snippet-sites-for-smart-web-designer/#comments</comments>
		<pubDate>Sat, 10 Jan 2009 16:55:36 +0000</pubDate>
		<dc:creator>Dainis Graveris</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[HTML & CSS]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[framework]]></category>
		<category><![CDATA[optimize]]></category>
		<category><![CDATA[snippet]]></category>
		<category><![CDATA[template]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=2387</guid>
		<description><![CDATA[If You are creating and developing new web-sites regularly, You should think about template creation, collecting useful code snippets and things like that. You should do that to fasten development process, so I think You could use, change, optimize these template files to Your needs, however check out licence terms, if You use these for [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/resources/12-really-handy-css-framework-template-and-snippet-sites-for-smart-web-designer" target="_self"><img style="border-right: 0px; border-top: 0px; margin: 0px 7px 0px 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/title-css.jpg" border="0" alt="title-css" width="150" height="150" align="left" /></a></p>
<p>If You are creating and developing new web-sites regularly, You should think about template creation, collecting useful code snippets and things like that. You should do that to fasten development process, so I think You could use, change, optimize these template files to Your needs, however check out licence terms, if You use these for business purposes. However this is very generalize list for now, to clear out the best from the best sites. Use them well!</p>
<p><span id="more-2387"></span></p>
<p><a href="http://csstidy.sourceforge.net/" target="_blank">1. CSSTidy</a></p>
<p><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/csstidy.jpg" border="0" alt="csstidy" width="570" height="268" /></p>
<p>&#8220;CSSTidy is an opensource CSS parser and optimizer. It is available as executable file (available for Windows, Linux and Mac) which can be controlled per command line and as PHP script (both with almost the same functionality).<br />
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.&#8221;</p>
<p>I pasted their information, because it says everything better than I could.</p>
<p>For some people there can be a question &#8211; why You need to optimize Your CSS code?  Just if You want cleaner code, faster loading page, so You both &#8211; You and visitor benefit from optimization!</p>
<p>Get <a href="http://csstidy.sourceforge.net/download.php" target="_blank">executable file here</a> or use <a href="http://floele.flyspray.org/csstidy//css_optimiser.php" target="_blank">online optimizer</a>!</p>
<p><a href="http://cleancss.com/" target="_blank">2. Clean CSS</a></p>
<p><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/cleancss.jpg" border="0" alt="cleancss" width="570" height="343" /></p>
<p>You can also use this online optimizer version, which is very similar, but I am design geek, so I enjoy this site a little more. This calls, pick Your favorite one!</p>
<p><a href="http://www.blueprintcss.org/" target="_blank">3. Blueprint CSS</a></p>
<p><a href="http://www.blueprintcss.org/" target="_blank"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/blueprintcss.jpg" border="0" alt="blueprintcss" width="240" height="57" /></a></p>
<p>&#8220;Blueprint is a <strong>CSS framework</strong>, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.&#8221;</p>
<p>Very useful template files, helping You not to start always from big fat zero..and code everything again and again &#8211; now You can spend more time adding new features and think more about design, then reiterative process.</p>
<p><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/blueprint-test.jpg" border="0" alt="blueprint-test" width="570" height="317" /></p>
<p><a href="http://www.code-sucks.com/" target="_blank">4. Code-Sucks</a></p>
<p><a href="http://www.code-sucks.com/" target="_blank"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/code-sucks.jpg" border="0" alt="code-sucks" width="240" height="64" /></a></p>
<p>Great collection of many different css layouts, code snippets (CSS, JavaScript, PHP), website templates. These really become handy in web development process. Put these in good use.</p>
<p><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/code-snippet.jpg" border="0" alt="code-snippet" width="418" height="431" /></p>
<p><a href="http://snipplr.com/" target="_blank">5. Snipplr</a></p>
<p><a href="http://snipplr.com/" target="_blank"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/snipplr.jpg" border="0" alt="snipplr" width="245" height="66" /></a></p>
<p>Snipplr is very useful place storing and organizing many code snippets (Javascript, HTML, PHP, CSS, Ruby). You use regularly in Your development process. And also everybody can share and add their snippets, so the section  Popular Code Snippets clearly demonstrates the best and the most used codes for everybody. Pretty great. Also these snippets work with TextMate, too.</p>
<p><a href="http://css.maxdesign.com.au/" target="_blank">6. MaxDesign</a></p>
<p>Perhaps You know this site, I think I mentioned it somewhere before, but however this site must be included, because it&#8217;s really useful.</p>
<p>There You can find listamatic1 (one list &#8211; many different ways how to style it), listamatic2 () and several tutorials how to create CSS based lists, CSS floats and use CSS selectors.</p>
<p><a href="http://css.maxdesign.com.au/" target="_blank"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/maxdesign.jpg" border="0" alt="maxdesign" width="570" height="444" /></a></p>
<p><a href="http://meyerweb.com/eric/tools/css/reset/" target="_blank">7. MeyerWeb CSS Reset</a></p>
<p>Eric Meyer CSS reset is very popular. You should use resets to neutralize browser&#8217;s default style. Also Eric pointed, that this is just a starting point, but very good one.</p>
<p><a href="http://meyerweb.com/eric/tools/css/reset/" target="_blank"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/meyerweb.jpg" border="0" alt="meyerweb" width="570" height="203" /></a></p>
<p><a href="http://developer.yahoo.com/yui/examples/" target="_blank">8. YUI Library</a></p>
<p>&#8220;Every YUI Library component ships with a series of 300 examples that illustrate its implementation. These examples can serve as starting points for your exploration of YUI, as code snippets to get you started in your own programming, or simply as an inspiration as to how various interaction patterns can be enabled in the web browser via YUI.&#8221;</p>
<p>Very useful template files, which are great for starting points and You have good collection of examples to satisfy almost every web designer.</p>
<p><a href="http://developer.yahoo.com/yui/examples/" target="_blank"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/yui-library.jpg" border="0" alt="yui-library" width="267" height="304" /></a></p>
<p><a href="http://960.gs/" target="_blank">9. 960 Grid System</a></p>
<p><a href="http://960.gs/" target="_blank"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/960-grid-system.jpg" border="0" alt="960-grid-system" width="570" height="135" /></a></p>
<p>This grid system is becoming really popular &#8211; they offer commonly used dimensions, based on a width of 960 pixels offering 12 and 16 column grid systems. Designers use grids, to help their sites to look more harmonious and precise. You get several template files and mockups, when You download  that grid system, which are really helpful in the right hands.</p>
<h5><a href="http://960.gs/files/960_download.zip" target="_blank">Download</a> / <a href="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/demo.html" target="_blank">Demo</a></h5>
<p><a href="http://sencss.kilianvalkhof.com/" target="_blank">10. Sensible Standards CSS Framework</a></p>
<p><a href="http://sencss.kilianvalkhof.com/" target="_blank"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/sencss.jpg" border="0" alt="sencss" width="570" height="257" /></a></p>
<p>This framework is also based on Eric Meyer reset system, but also there are more features as basic styling, code is optimized without any double resets and more, go to their homepage to check for details.</p>
<p><a href="http://www.spiffycorners.com/" target="_blank">11. Rounded CSS corners</a></p>
<p><a href="http://www.spiffycorners.com/" target="_blank"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/spiffy.jpg" border="0" alt="spiffy" width="506" height="197" /></a></p>
<p>I guess You&#8217;ve heard about big discussions about rounded corners and how to create ones, here is great online tool where You can get rounded corners, style them online and get code immediately.</p>
<p><a href="http://www.contentwithstyle.co.uk/content/a-css-framework" target="_blank">12. Content with style</a></p>
<p>Good framework collection to allow You rapidly fast develop new websites, thinking more about graphic design and less about coding.</p>
<p><a href="http://www.contentwithstyle.co.uk/content/a-css-framework" target="_blank"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2009/01/content.jpg" border="0" alt="content" width="491" height="112" /></a></p>
<p>I hope You&#8217;ll use these sites as a reference evolving Your skills and speed up Your development process! I am sure there are more sites out there, if You know some more, be honest and leave backlinks, will be appreciated!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/css/12-really-handy-css-framework-template-and-snippet-sites-for-smart-web-designer/feed/</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
	</channel>
</rss>

