<?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>Abraxas &#187; WP-Syntax</title>
	<atom:link href="http://www.effinger.org/blog/tag/wp-syntax/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.effinger.org/blog</link>
	<description>a personal knowledge base</description>
	<lastBuildDate>Mon, 23 Jan 2012 22:05:51 +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>WP-Syntax Editor Integration Plugin &#8211; WP-Syntax im WordPress Editor nutzen</title>
		<link>http://www.effinger.org/blog/2009/12/30/wp-syntax-editor-integration-plugin-wp-syntax-im-wordpress-editor-nutzen/</link>
		<comments>http://www.effinger.org/blog/2009/12/30/wp-syntax-editor-integration-plugin-wp-syntax-im-wordpress-editor-nutzen/#comments</comments>
		<pubDate>Wed, 30 Dec 2009 10:11:45 +0000</pubDate>
		<dc:creator>Markus Effinger</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[WP-Syntax]]></category>

		<guid isPermaLink="false">http://www.effinger.org/blog/?p=767</guid>
		<description><![CDATA[<p>Um komfortabel mit WP-Syntax im WordPress-Editor zu arbeiten, habe ich ein Plugin geschrieben, welches jeweils einen Button im visuellen Editor (TinyMCE) und im HTML-Editor hinzufügt. Zuvor hatte ich immer die quicktag.php editiert, was aber auf Dauer sehr mühsam war, da man dies bei jedem WordPress Update machen musste. Das Plugin ist ab sofort auf wordpress.org [...]]]></description>
			<content:encoded><![CDATA[<p>Um komfortabel mit WP-Syntax im WordPress-Editor zu arbeiten, habe ich ein Plugin geschrieben, welches jeweils einen Button im visuellen Editor (TinyMCE) und im HTML-Editor hinzufügt. Zuvor hatte ich immer <a href="http://www.effinger.org/blog/2008/12/06/wordpress-syntax-highlighting-mit-wp-syntax/">die quicktag.php editiert</a>, was aber auf Dauer sehr mühsam war, da man dies bei jedem WordPress Update machen musste. Das Plugin ist ab sofort auf wordpress.org unter <a href="http://wordpress.org/extend/plugins/wp-syntax-integration/">http://wordpress.org/extend/plugins/wp-syntax-integration/</a> verfügbar.</p>
<p>Nutzen kann man das Plugin im <strong>visuellen Modus</strong> folgendermaßen:</p>
<ol>
<li>Den zu hervorhebenden Code schreiben bzw. einfügen</li>
<li>Den Code markieren<br />
<a href="http://www.effinger.org/blog/wp-content/uploads/2009/12/SS-20091229161027.png"><img class="aligncenter size-full wp-image-879" title="Selected text" src="http://www.effinger.org/blog/wp-content/uploads/2009/12/SS-20091229161027.png" alt="" width="158" height="22" /></a></li>
<li>Auf den Button &#8220;Enclose with pre-block of WP-Syntax&#8221; klicken (im Screenshot rot markiert)<a href="http://www.effinger.org/blog/wp-content/uploads/2009/12/button_red.png"><img class="aligncenter size-full wp-image-872" title="Screenshot Button &quot;Enclose with pre-block of WP-Syntax&quot;" src="http://www.effinger.org/blog/wp-content/uploads/2009/12/button_red.png" alt="" width="767" height="69" /></a></li>
<li>Programmiersprache eingeben. Falls Zeilennummerierung gewünscht ist, durch ein Komma getrennt, die erste Zeilennummer ergänzen<br />
<a href="http://www.effinger.org/blog/wp-content/uploads/2009/12/Die_Seite_mit_der_Adresse_httpwww.effinger.org_meldet-20091229161212.png"><img class="aligncenter size-full wp-image-880" title="Screenshot von der Eingabe der Programmiersprache und der Zeilennummer" src="http://www.effinger.org/blog/wp-content/uploads/2009/12/Die_Seite_mit_der_Adresse_httpwww.effinger.org_meldet-20091229161212.png" alt="" width="326" height="145" /></a></li>
<li>OK klicken und fertig!</li>
</ol>
<p><strong>Wichtig:</strong> Bei der Eingabe im visuellen Modus werden HTML-Tags entfernt, die von TinyMCE nicht erlaubt werden. Dieses Verhalten lässt sich umgehen, wenn man HTML-Tags nicht im visuellen Modus sondern im HTML-Modus eingibt.</p>
<p>Das Plugin lässt sich auch im <strong>HTML-Modus</strong> nutzen. Die Vorgehensweise ist prinzipiell gleich:</p>
<ol>
<li>Den zu hervorhebenden Code schreiben bzw. einfügen</li>
<li>Den Code markieren<br />
<a href="http://www.effinger.org/blog/wp-content/uploads/2009/12/SS-20091229161027.png"><img title="Selected text" src="http://www.effinger.org/blog/wp-content/uploads/2009/12/SS-20091229161027.png" alt="" width="158" height="22" /></a></li>
<li>Auf den Button &#8220;pre (WP-Syntax)&#8221; klicken (im Screenshot rot markiert)<br />
<a href="http://www.effinger.org/blog/wp-content/uploads/2009/12/button_red_html.png"><img class="aligncenter size-full wp-image-881" title="Screenshot Button &quot;pre (WP-Syntax)&quot;" src="http://www.effinger.org/blog/wp-content/uploads/2009/12/button_red_html.png" alt="" width="769" height="60" /></a></li>
<li>Programmiersprache eingeben. Falls Zeilennummerierung gewünscht ist, durch ein Komma getrennt, die erste Zeilennummer ergänzen<br />
<a href="http://www.effinger.org/blog/wp-content/uploads/2009/12/Die_Seite_mit_der_Adresse_httpwww.effinger.org_meldet-20091229161212.png"><img title="Screenshot von der Eingabe der Programmiersprache und der Zeilennummer" src="http://www.effinger.org/blog/wp-content/uploads/2009/12/Die_Seite_mit_der_Adresse_httpwww.effinger.org_meldet-20091229161212.png" alt="" width="326" height="145" /></a></li>
<li>OK klicken und fertig!</li>
</ol>
<p>Ein herzliches Dankeschön an die Programmierer der folgenden Extensions bzw. deren Erläuterungen, die mir sehr weitergeholfen haben:</p>
<ul>
<li><a href="http://ctx2002.wordpress.com/2008/07/28/how-to-write-a-tinymce-plugin-for-wordpress/">How to write a TinyMCE plugin for WordPress</a></li>
<li><a href="http://www.engfers.com/plugins/tinymce-valid-elements/">TinyMCE Valid Elements</a></li>
<li><a href="http://wiki.moxiecode.com/index.php/TinyMCE:Commands">TinyMCE Commands</a></li>
<li><a href="http://36flavours.com/2009/09/using-wp-syntax-and-the-visual-editor/">Using WP-Syntax and the visual editor</a></li>
<li><a href="http://granades.com/2007/02/14/adding-quicktags-to-wordpress/">Adding Quicktags to WordPress</a></li>
<li><a href="http://wordpress.org/extend/plugins/davids-ultra-quicktags/">David&#8217;s Ultra Quicktags</a></li>
<li><a href="http://scribu.net/wordpress/right-way-to-add-custom-quicktags.html">The right way to add custom quicktags</a></li>
<li><a href="http://website-in-a-weekend.net/extending-wordpress/diy-wordpress-unraveling-quicktags-wordpress-plugins/">Unraveling Quicktags for WordPress Plugins</a></li>
<li><a href="http://bytes.com/topic/javascript/answers/163382-need-escape-html-chracters-js#post630671">Escape HTML characters in JavaScript</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.effinger.org/blog/2009/12/30/wp-syntax-editor-integration-plugin-wp-syntax-im-wordpress-editor-nutzen/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>WordPress Syntax Highlighting mit WP-Syntax</title>
		<link>http://www.effinger.org/blog/2008/12/06/wordpress-syntax-highlighting-mit-wp-syntax/</link>
		<comments>http://www.effinger.org/blog/2008/12/06/wordpress-syntax-highlighting-mit-wp-syntax/#comments</comments>
		<pubDate>Fri, 05 Dec 2008 22:08:04 +0000</pubDate>
		<dc:creator>Markus Effinger</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[WP-Syntax]]></category>

		<guid isPermaLink="false">http://www.effinger.org/blog/?p=271</guid>
		<description><![CDATA[<p>Jeder, der in seinem Blog Quellcode, Shell-Befehle und dergleichen veröffentlichen möchte, kommt meiner Meinung nach nicht um ein Plugin herum, das den Quelltext optisch aufbereitet. Inzwischen gibt es für WordPress etliche Plugins, die Syntax Highlighting anbieten. Beispielhaft seien hier SyntaxHighlighter, Code Markup und WP-Syntax genannt. SyntaxHighlighter wollte ich nicht verwenden, weil es Javascript-basiert ist und [...]]]></description>
			<content:encoded><![CDATA[<p>Jeder, der in seinem Blog Quellcode, Shell-Befehle und dergleichen veröffentlichen möchte, kommt meiner Meinung nach nicht um ein Plugin herum, das den Quelltext optisch aufbereitet. Inzwischen gibt es für WordPress etliche Plugins, die Syntax Highlighting anbieten. Beispielhaft seien hier <a href="http://code.google.com/p/syntaxhighlighter/wiki/Overview">SyntaxHighlighter</a>, <a href="http://www.thunderguy.com/semicolon/wordpress/code-markup-wordpress-plugin/">Code Markup</a> und <a href="http://wordpress.org/extend/plugins/wp-syntax/">WP-Syntax</a> genannt. SyntaxHighlighter wollte ich nicht verwenden, weil es Javascript-basiert ist und deshalb nicht sichergestellt ist, dass auch Suchmaschinen, den entsprechenden Inhalt finden. Da mir der Funktionsumfang von Code Markup zu gering erschien habe ich mich schließlich auch aufgrund der <a href="http://wordpress.org/extend/plugins/wp-syntax/other_notes/">Vielfalt an unterstützten Sprachen</a> für WP-Syntax entschieden. Dieses konvertiert Sonderzeichen (z.B. &#8220;&gt;&#8221;) in den entsprechenden HTML-Code (z.B. &#8220;&amp;gt;&#8221;). Beim Schreiben von Artikeln mit der WordPress-Weboberfläche wird im WYSIWYG-Modus allerdings bereits eine entsprechende Konvertierung vorgenommen, so dass man als Resultat im Artikel den HTML-Code angezeigt bekommt. Um dieses Problem zu umgehen, habe ich eine <a href="http://blog.felho.hu/posting-source-code-in-wordpress-escaping-and-syntax-highlighting-the-inserted-code.html">Lösung von Gergely Hodicska</a> gefunden, die es zudem ermöglicht, den Quellcode noch komfortabler einzugeben. Im ersten Schritt wird die wp-content/plugins/wp-syntax/wp-syntax.php analog zu dem <a href="http://blog.m-ri.de/index.php/2008/03/30/wie-man-wp-syntax-noch-etwas-tunen-kann/">Vorschlag von Martin</a> bzw. <a href="http://tech.shantanugoel.com/2008/03/23/hack-fixing-the-code-syntax-highlighter-wordpress-plugins-to-work-with-wysiwyg.html">Shantanu</a> so modifiziert, dass die fälschlicherweise vom WYSIWYG-Editor in HTML-Codes konvertierten Sonderzeichen wiederhergestellt werden:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> wp_syntax_code_trim<span style="color: #009900;">&#40;</span><span style="color: #000088;">$code</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">// special ltrim b/c leading whitespace matters on 1st line of content</span>
    <span style="color: #000088;">$code</span> <span style="color: #339933;">=</span> <span style="color: #990000;">preg_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;/^\s*<span style="color: #000099; font-weight: bold;">\n</span>/siU&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$code</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000088;">$code</span> <span style="color: #339933;">=</span> <span style="color: #990000;">rtrim</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$code</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #666666; font-style: italic;">/* Insertion Code Start */</span>
	<span style="color: #666666; font-style: italic;">// MRi: changes to retranslate html code tags into the normal</span>
	<span style="color: #666666; font-style: italic;">// characters for geshi.</span>
	<span style="color: #000088;">$code</span> <span style="color: #339933;">=</span> <span style="color: #990000;">strip_tags</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$code</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">PHP_VERSION</span> <span style="color: #339933;">&gt;</span> <span style="color:#800080;">5.0</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$code</span> <span style="color: #339933;">=</span> <span style="color: #990000;">html_entity_decode</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$code</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">ENT_QUOTES</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;UTF-8&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #b1b100;">else</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$arrSearch</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;&amp;lt;&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;&amp;gt;&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;&amp;nbsp;&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;&amp;amp;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$arrReplace</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;&lt;&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;&gt;&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot; &quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;&amp;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$code</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$arrSearch</span><span style="color: #339933;">,</span> <span style="color: #000088;">$arrReplace</span><span style="color: #339933;">,</span> <span style="color: #000088;">$code</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #666666; font-style: italic;">/* Insertion Code End */</span>
    <span style="color: #b1b100;">return</span> <span style="color: #000088;">$code</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Nun müssen aber zwangsweise alle Sonderzeichen auch in die HTML-Codes konvertiert werden &#8211; also nicht nur, wenn man im WYSIWYG-Editor arbeitet. Diese Konvertierung erledigt man am Besten durch das Anlegen eines neuen Buttons namens &#8220;pre&#8221; im HTML-Modus der Weboberfläche. Dazu müssen die Dateien wp-includes/js/quicktags.js und wp-includes/js/tinymce/tiny_mce_config.php abgeändert werden.<br />
quicktags.js:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/* Insertion Code Start */</span>
edButtons<span style="color: #009900;">&#91;</span>edButtons.<span style="color: #660066;">length</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span>
<span style="color: #003366; font-weight: bold;">new</span> edButton<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ed_pre'</span>
<span style="color: #339933;">,</span><span style="color: #3366CC;">'pre'</span>
<span style="color: #339933;">,</span><span style="color: #3366CC;">'&lt;pre&gt;'</span>
<span style="color: #339933;">,</span><span style="color: #3366CC;">'&lt;/pre&gt;'</span>
<span style="color: #339933;">,</span><span style="color: #3366CC;">'f'</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">/* Insertion Code End */</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/* Insertion Code Start */</span>
<span style="color: #006600; font-style: italic;">// Prompt for syntax highlighting parameter, and return the appropriate start tag.</span>
<span style="color: #006600; font-style: italic;">// TODO: l10n support.</span>
<span style="color: #003366; font-weight: bold;">function</span> edGetPreStartTag<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> syntaxInfo <span style="color: #339933;">=</span> <span style="color: #000066;">prompt</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Please insert syntax highlighting information:'</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'language[,line number]!'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'php,1'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">'&lt;pre lang=&quot;'</span><span style="color: #339933;">+</span>syntaxInfo<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;'</span><span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>syntaxInfo<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">!=</span> undefined <span style="color: #339933;">?</span> <span style="color: #3366CC;">' line=&quot;'</span><span style="color: #339933;">+</span>syntaxInfo<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&gt;'</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> edhtmlspecialchars<span style="color: #009900;">&#40;</span>p_string<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	p_string <span style="color: #339933;">=</span> p_string.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&amp;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'&amp;amp;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	p_string <span style="color: #339933;">=</span> p_string.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&lt;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'&amp;lt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	p_string <span style="color: #339933;">=</span> p_string.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&gt;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'&amp;gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	p_string <span style="color: #339933;">=</span> p_string.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&quot;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'&amp;quot;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//	p_string = p_string.replace(/'/g, '&amp;#039;');</span>
	<span style="color: #000066; font-weight: bold;">return</span> p_string<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009966; font-style: italic;">/* Insertion Code End */</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// insertion code</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> edInsertTag<span style="color: #009900;">&#40;</span>myField<span style="color: #339933;">,</span> i<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//IE support</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">selection</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		myField.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    sel <span style="color: #339933;">=</span> document.<span style="color: #660066;">selection</span>.<span style="color: #660066;">createRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>sel.<span style="color: #660066;">text</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #009966; font-style: italic;">/* Insertion Code Start */</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'ed_pre'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				sel.<span style="color: #660066;">text</span> <span style="color: #339933;">=</span>edhtmlspecialchars<span style="color: #009900;">&#40;</span>sel.<span style="color: #660066;">text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span> <span style="color: #339933;">=</span> edGetPreStartTag<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #009966; font-style: italic;">/* Insertion Code End */</span>
			sel.<span style="color: #660066;">text</span> <span style="color: #339933;">=</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span> <span style="color: #339933;">+</span> sel.<span style="color: #660066;">text</span> <span style="color: #339933;">+</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagEnd</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>edCheckOpenTags<span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagEnd</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #009966; font-style: italic;">/* Insertion Code Start */</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'ed_pre'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span> <span style="color: #339933;">=</span> edGetPreStartTag<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
				<span style="color: #009966; font-style: italic;">/* Insertion Code End */</span>
				sel.<span style="color: #660066;">text</span> <span style="color: #339933;">=</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span><span style="color: #339933;">;</span>
				edAddTag<span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				sel.<span style="color: #660066;">text</span> <span style="color: #339933;">=</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagEnd</span><span style="color: #339933;">;</span>
				edRemoveTag<span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
		myField.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #006600; font-style: italic;">//MOZILLA/NETSCAPE support</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>myField.<span style="color: #660066;">selectionStart</span> <span style="color: #339933;">||</span> myField.<span style="color: #660066;">selectionStart</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'0'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> startPos <span style="color: #339933;">=</span> myField.<span style="color: #660066;">selectionStart</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> endPos <span style="color: #339933;">=</span> myField.<span style="color: #660066;">selectionEnd</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> cursorPos <span style="color: #339933;">=</span> endPos<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> scrollTop <span style="color: #339933;">=</span> myField.<span style="color: #660066;">scrollTop</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>startPos <span style="color: #339933;">!=</span> endPos<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #009966; font-style: italic;">/* Modification Code Start */</span>
			<span style="color: #003366; font-weight: bold;">var</span> selectedText <span style="color: #339933;">=</span> myField.<span style="color: #660066;">value</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span>startPos<span style="color: #339933;">,</span> endPos<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> selectedTextLengthGrowth <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'ed_pre'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span> <span style="color: #339933;">=</span> edGetPreStartTag<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				selectedTextLengthGrowth <span style="color: #339933;">=</span> selectedText.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
				selectedText <span style="color: #339933;">=</span> edhtmlspecialchars<span style="color: #009900;">&#40;</span>selectedText<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				selectedTextLengthGrowth <span style="color: #339933;">=</span> selectedText.<span style="color: #660066;">length</span> <span style="color: #339933;">-</span> selectedTextLengthGrowth<span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			myField.<span style="color: #660066;">value</span> <span style="color: #339933;">=</span> myField.<span style="color: #660066;">value</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> startPos<span style="color: #009900;">&#41;</span>
			              <span style="color: #339933;">+</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span>
			              <span style="color: #339933;">+</span> selectedText
			              <span style="color: #339933;">+</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagEnd</span>
			              <span style="color: #339933;">+</span> myField.<span style="color: #660066;">value</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span>endPos<span style="color: #339933;">,</span> myField.<span style="color: #660066;">value</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			cursorPos <span style="color: #339933;">+=</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">+</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagEnd</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">+</span> selectedTextLengthGrowth<span style="color: #339933;">;</span>
			<span style="color: #009966; font-style: italic;">/* Modification Code End */</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>edCheckOpenTags<span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagEnd</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #009966; font-style: italic;">/* Insertion Code Start */</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'ed_pre'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span> <span style="color: #339933;">=</span> edGetPreStartTag<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
				<span style="color: #009966; font-style: italic;">/* Insertion Code End */</span>
				myField.<span style="color: #660066;">value</span> <span style="color: #339933;">=</span> myField.<span style="color: #660066;">value</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> startPos<span style="color: #009900;">&#41;</span>
				              <span style="color: #339933;">+</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span>
				              <span style="color: #339933;">+</span> myField.<span style="color: #660066;">value</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span>endPos<span style="color: #339933;">,</span> myField.<span style="color: #660066;">value</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				edAddTag<span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				cursorPos <span style="color: #339933;">=</span> startPos <span style="color: #339933;">+</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				myField.<span style="color: #660066;">value</span> <span style="color: #339933;">=</span> myField.<span style="color: #660066;">value</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> startPos<span style="color: #009900;">&#41;</span>
				              <span style="color: #339933;">+</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagEnd</span>
				              <span style="color: #339933;">+</span> myField.<span style="color: #660066;">value</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span>endPos<span style="color: #339933;">,</span> myField.<span style="color: #660066;">value</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				edRemoveTag<span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				cursorPos <span style="color: #339933;">=</span> startPos <span style="color: #339933;">+</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagEnd</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
		myField.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		myField.<span style="color: #660066;">selectionStart</span> <span style="color: #339933;">=</span> cursorPos<span style="color: #339933;">;</span>
		myField.<span style="color: #660066;">selectionEnd</span> <span style="color: #339933;">=</span> cursorPos<span style="color: #339933;">;</span>
		myField.<span style="color: #660066;">scrollTop</span> <span style="color: #339933;">=</span> scrollTop<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>edCheckOpenTags<span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagEnd</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #009966; font-style: italic;">/* Insertion Code Start */</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'ed_pre'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span> <span style="color: #339933;">=</span> edGetPreStartTag<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #009966; font-style: italic;">/* Insertion Code End */</span>
			myField.<span style="color: #660066;">value</span> <span style="color: #339933;">+=</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagStart</span><span style="color: #339933;">;</span>
			edAddTag<span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			myField.<span style="color: #660066;">value</span> <span style="color: #339933;">+=</span> edButtons<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tagEnd</span><span style="color: #339933;">;</span>
			edRemoveTag<span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		myField.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>tiny_mce_config.php:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">/* Code Modification Start */</span>
<span style="color: #666666; font-style: italic;">/* 'pre' button added for wp-syntax */</span>
<span style="color: #000088;">$mce_buttons</span> <span style="color: #339933;">=</span> apply_filters<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'mce_buttons'</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'bold'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'italic'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'strikethrough'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'|'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'bullist'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'numlist'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'blockquote'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'pre'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'|'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'justifyleft'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'justifycenter'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'justifyright'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'|'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'link'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'unlink'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'wp_more'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'|'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'spellchecker'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'fullscreen'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'wp_adv'</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$mce_buttons</span> <span style="color: #339933;">=</span> <span style="color: #990000;">implode</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$mce_buttons</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">','</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">/* Code Modification End */</span></pre></div></div>

<p>Die eingefügten/veränderten Abschnitte sind zwar jeweils durch Kommentare kenntlich gemacht, aber mit <a href="http://www.effinger.org/blog/wp-content/uploads/2008/12/wp-syntax_modtar.gz">entsprechenden diff-Dateien</a> lassen sich die Dateien doch am Besten patchen. Die diff-Dateien wurden unter Verwendung der von WordPress 2.6.5 und WP-Syntax 0.9.1 erstellt. Bitte unbedingt beachten, dass die durchgeführten Modifikationen beim Update von WordPress bzw. WP-Syntax nochmals durchgeführt werden müssen.</p>
<p>Meinen Quellcode füge ich nach den Modifikationen immer so ein:</p>
<ol>
<li>Quellcode in Zwischenablage kopieren</li>
<li>In der WordPress-Weboberfläche in den HTML-Modus wechseln</li>
<li>Quellcode aus der Zwischenablage einfügen</li>
<li>Eingefügten Quellcode markieren</li>
<li>Auf den Button pre klicken</li>
<li>Im erscheinenden Dialog die Programmiersprache und falls gewünscht die Zeilennummer durch Komma getrennt angeben</li>
<li>Zurück in den visuellen Modus wechseln</li>
</ol>
<p>Eine <a href="http://blog.bit-4-you.de/2008/01/18/source-code-in-wordpress-posten-und-probleme-mit-dem-tinymce-editor-eliminieren/">alternative Lösung</a> für das Konvertierungsproblem in HTML-Entititäten ist der Ersatz des pre-Tags durch div-Tags.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.effinger.org/blog/2008/12/06/wordpress-syntax-highlighting-mit-wp-syntax/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

