<?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>Serge&#039;s Technology View &#187; syntax highlight</title>
	<atom:link href="http://blog.dragonsoft.us/tag/syntax-highlight/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.dragonsoft.us</link>
	<description>Talk about Technologies, Software Architecture and Management</description>
	<lastBuildDate>Tue, 31 Jan 2012 01:43:34 +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>Put a code in your post &#8211; code highlighting</title>
		<link>http://blog.dragonsoft.us/2008/09/22/put-a-code-in-your-post-code-highlighting/</link>
		<comments>http://blog.dragonsoft.us/2008/09/22/put-a-code-in-your-post-code-highlighting/#comments</comments>
		<pubDate>Mon, 22 Sep 2008 19:16:31 +0000</pubDate>
		<dc:creator>Serguei Dosyukov</dc:creator>
				<category><![CDATA[Delphi]]></category>
		<category><![CDATA[Web-design]]></category>
		<category><![CDATA[syntax highlight]]></category>
		<category><![CDATA[wordpress]]></category>
		<guid isPermaLink="false">http://blog.dragonsoft.us/?p=459</guid>
		<description><![CDATA[As a programmer you often want to share some piece of nice code by placing it in your post on the blog. You can just wrap it in &#60;code&#62; or &#60;pre&#62; tags and play with CSS to make it more &#8230; <a href="http://blog.dragonsoft.us/2008/09/22/put-a-code-in-your-post-code-highlighting/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>As a programmer you often want to share some piece of nice code by placing it in your post on the blog.</p>
<p>You can just wrap it in &lt;code&gt; or &lt;pre&gt; tags and play with CSS to make it more readable. But it is not enough usually. Many of us are accustomed to have code highlighting for better readability.</p>
<p>I have seen and tried a dosen of solutions myself: simple &#8220;code-to-html&#8221; like <a href="http://www.ewanmellor.org.uk/chip.html" target="_blank">CHIP</a>, some simple JavaScript solutions like <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html" target="_blank">Code Prettifier</a> or mature like <a href="http://qbnz.com/highlighter/" target="_blank">GeSHi</a>.</p>
<p>There are server and client side solutions, ASP, PHP or JS based. You can choose one best for you.</p>
<p>As a WordPress user, you may also be interested in easy integration via <a href="http://wordpress.org/extend/plugins/wp-syntax/" target="_blank">WP plug-in</a> (GoSHi wrapper).</p>
<p>I have used the following criteria in my search:</p>
<ul>
<li>it should support many modern languages (SQL, C++, C#, HTML, JavaScript, Delphi, &#8230;)</li>
<li>it should be easy to integrate in WordPress, do not use tags and structures which will violate XHTML compliance requirements (I prefer to have my pages to pass W3C XHTML validation).</li>
<li>it should be easy to use within BBcode-like WYSIWYG editor</li>
<li>have some basic Copy/Paste/Print support</li>
</ul>
<p>I did not much care about server or client side implementation.</p>
<p>My choice was a <a href="http://code.google.com/p/syntaxhighlighter/" target="_blank">SyntaxHighlighter</a> by Alex Gorbatchev. Few things with original code were:</p>
<ul>
<li>no out of the box support for WordPress</li>
<li>tag syntax used by default was breaking W3C validation</li>
</ul>
<p>Ok, choice was to find someone already adopted it or create my own plug-in. Lucky for me there was <a href="http://wordpress.org/extend/plugins/syntaxhighlighter/installation/" target="_blank">one already</a>. It was using BBCode to wrap the snippet but it did not address an issue of the invalid tags.</p>
<p>But it was easy to address also &#8211; in original code &#8220;name&#8221; is used to specify that &lt;pre&gt; does represent the code snippet.</p>
<p>Since I am not using this tag for anything else simple replacement in the source code would do the trick:</p>
<ol>
<li>download and install plug-in</li>
<li>locate shCore.js and look for the following line <strong>FindTagsByName(elements, name, &#8216;pre&#8217;);</strong></li>
<li>replace it with <strong>FindTagsByName(elements, null, &#8216;pre&#8217;);</strong></li>
<li>save, upload</li>
<li>Update (01/05/2009): With release of latest plug-in version, one more adjustment is required in the WP plugin itself:
<ul>
<li>Locate and Open <strong>syntaxhighlighter.php</strong></li>
<li>Locate line &#8220;$content = str_replace( $match[0], &#8216;&lt;pre <span style="color: #ff0000;"><strong>name=&#8221;code&#8221;</strong></span> class= &#8230; &#8220;</li>
<li>If you are using any WP cache plugins, clear your cache</li>
</ul>
</li>
<li>add code into your blog (this is how it is seen in the editor)<br />
<blockquote><p>&#91;sourcecode language=&#8217;delphi&#8217;]var<br />
  MyImageList: TImageList;<br />
  MyImage: TImage;[/sourcecode]</p></blockquote>
<p>and you will get it displayed nicely like <a href="http://blog.dragonsoft.us/2008/08/28/tips-draw-image-from-timagelist/" target="_blank">shown here</a>.</li>
</ol>
<p>PS. what you also would get is an ability to print/copy/view the code in easy and convinient way.</p>
<p>Enjoy.</p>
<hr/><span style="font-size: 7pt">Copyright &copy; 2012 <strong><a href="http://blog.dragonsoft.us">Serge&#039;s Technology View</a></strong>. This Feed is for personal non-commercial use only.</span>]]></content:encoded>
			<wfw:commentRss>http://blog.dragonsoft.us/2008/09/22/put-a-code-in-your-post-code-highlighting/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

