<?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>CodeMirror | Nerdpress.org</title>
	<atom:link href="https://nerdpress.org/tag/codemirror/feed/" rel="self" type="application/rss+xml" />
	<link>https://nerdpress.org</link>
	<description>...dev, tech problems and solutions.</description>
	<lastBuildDate>Sun, 31 Mar 2013 16:08:53 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>JSfiddle Bookmarklet Generator with jQuery &#038; Codemirror</title>
		<link>https://nerdpress.org/2013/03/08/jsfiddle-bookmarklet-generator-with-jquery-codemirror/</link>
					<comments>https://nerdpress.org/2013/03/08/jsfiddle-bookmarklet-generator-with-jquery-codemirror/#comments</comments>
		
		<dc:creator><![CDATA[Max Girkens]]></dc:creator>
		<pubDate>Fri, 08 Mar 2013 11:41:59 +0000</pubDate>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[JS]]></category>
		<category><![CDATA[bookmarklet]]></category>
		<category><![CDATA[CodeMirror]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jsfiddle]]></category>
		<guid isPermaLink="false">https://nerdpress.org/?p=2410</guid>

					<description><![CDATA[<p>This is a little bookmarklet generator i put together this morning: http://jsfiddle.net/QMeuV/1/embedded/result/ Its hosted on jsfiddle.net and enables you to create Bookmarklets which use jQuery based on the code i found here: http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/ It also features Javascript Syntax Highlighting using http://codemirror.net/. *UPDATE* this tool now (also) lives on https://github.com/gherkins/bookmarklet-generator</p>
The post <a href="https://nerdpress.org/2013/03/08/jsfiddle-bookmarklet-generator-with-jquery-codemirror/">JSfiddle Bookmarklet Generator with jQuery & Codemirror</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></description>
										<content:encoded><![CDATA[<p>This is a little bookmarklet generator i put together this morning:</p>
<p><a href="http://jsfiddle.net/QMeuV/1/embedded/result/">http://jsfiddle.net/QMeuV/1/embedded/result/<span id="more-2410"></span></a></p>
<p><a href="https://nerdpress.org/wp-content/uploads/2013/03/Bildschirmfoto-2013-03-08-um-12.24.55.png"><img fetchpriority="high" decoding="async" class="alignnone size-medium wp-image-2411" alt="Bildschirmfoto 2013-03-08 um 12.24.55" src="https://nerdpress.org/wp-content/uploads/2013/03/Bildschirmfoto-2013-03-08-um-12.24.55-300x224.png" width="300" height="224" srcset="https://nerdpress.org/wp-content/uploads/2013/03/Bildschirmfoto-2013-03-08-um-12.24.55-300x224.png 300w, https://nerdpress.org/wp-content/uploads/2013/03/Bildschirmfoto-2013-03-08-um-12.24.55-1024x767.png 1024w, https://nerdpress.org/wp-content/uploads/2013/03/Bildschirmfoto-2013-03-08-um-12.24.55.png 1559w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>Its hosted on <a href="http://jsfiddle.net/">jsfiddle.net</a> and enables you to create Bookmarklets which use jQuery based on the code i found here:<br />
<a href="http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/">http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/</a></p>
<p>It also features Javascript Syntax Highlighting using <a href="http://codemirror.net/">http://codemirror.net/</a>.</p>
<p>*UPDATE*<br />
this tool now (also) lives on <a href="https://github.com/gherkins/bookmarklet-generator">https://github.com/gherkins/bookmarklet-generator</a></p>The post <a href="https://nerdpress.org/2013/03/08/jsfiddle-bookmarklet-generator-with-jquery-codemirror/">JSfiddle Bookmarklet Generator with jQuery & Codemirror</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></content:encoded>
					
					<wfw:commentRss>https://nerdpress.org/2013/03/08/jsfiddle-bookmarklet-generator-with-jquery-codemirror/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Textarea mit Code Highlighting</title>
		<link>https://nerdpress.org/2010/01/18/textarea-mit-code-highlighting/</link>
					<comments>https://nerdpress.org/2010/01/18/textarea-mit-code-highlighting/#comments</comments>
		
		<dc:creator><![CDATA[Ivo Bathke]]></dc:creator>
		<pubDate>Mon, 18 Jan 2010 16:35:25 +0000</pubDate>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[CodeMirror]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>
		<guid isPermaLink="false">https://nerdpress.org/?p=733</guid>

					<description><![CDATA[<p>Um eine HTML Textarea mit Code Highlighting zu versehen muss man ein bißchen tricksen. Zum Glück gibts ja da schon fertige Libs, die das erledigen. Sucht man mit Google, findet man schnell dieses hier: http://codepress.sourceforge.net/ Dies wird aber scheinbar nicht weiterentwickelt und hat zudem einige Bugs. Weiterhin gibts dann http://sourcepad.org. Das sieht ganz gut aus, &#8230; </p>
<p class="link-more"><a href="https://nerdpress.org/2010/01/18/textarea-mit-code-highlighting/" class="more-link">Continue reading<span class="screen-reader-text"> "Textarea mit Code Highlighting"</span></a></p>
The post <a href="https://nerdpress.org/2010/01/18/textarea-mit-code-highlighting/">Textarea mit Code Highlighting</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></description>
										<content:encoded><![CDATA[<p>Um eine HTML Textarea mit Code Highlighting zu versehen muss man ein bißchen tricksen.<br />
Zum Glück gibts ja da schon fertige Libs, die das erledigen.<br />
Sucht man mit Google, findet man schnell dieses hier:</p>
<p><a href="http://codepress.sourceforge.net/ " target="_blank">http://codepress.sourceforge.net/ </a><br />
Dies wird aber scheinbar nicht weiterentwickelt und hat zudem einige Bugs.<br />
<span id="more-733"></span><br />
Weiterhin gibts dann <a href="http://sourcepad.org" target="_blank">http://sourcepad.org</a>.<br />
Das sieht ganz gut aus, für meine Zwecke schon zu gut, daher habe ich mich für dieses entschieden:<br />
<a href="http://marijn.haverbeke.nl/codemirror" target="_blank">http://marijn.haverbeke.nl/codemirror</a></p>
<p>Also der CodeMirror:<br />
Installation ist einfach:<br />
Runterladen, die nötigen Files einbinden:</p>
<pre class="brush: xml; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/codemirror.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/docs.css&quot;&gt;
</pre>
<p>Den linenumber style setzen (warum das nicht in der docs.css schon drin, fragt man sich?)</p>
<pre class="brush: xml; title: ; notranslate">
&lt;style type=&quot;text/css&quot;&gt;
      .CodeMirror-line-numbers {
        width: 2.2em;
        color: #aaa;
        background-color: #eee;
        text-align: right;
        padding-right: .3em;
        font-size: 10pt;
        font-family: monospace;
        padding-top: .4em;
      }
&lt;/style&gt;
</pre>
<p>Eine Textarea anlegen:</p>
<pre class="brush: xml; title: ; notranslate">
&lt;textarea id=&quot;code&quot; name=&quot;PAGE_CONTENT&quot;&gt;&lt;/textarea&gt;
</pre>
<p>und das Highlighting aktivieren:</p>
<pre class="brush: jscript; title: ; notranslate">
    var editor = CodeMirror.fromTextArea(&#039;code&#039;, {
    height: &quot;350px&quot;,
    width: &quot;700px&quot;,
    parserfile: &quot;parsexml.js&quot;,
    stylesheet: &quot;css/xmlcolors.css&quot;,
    path: &quot;js/&quot;,
    continuousScanning: 500,
    lineNumbers: true
  });
</pre>
<p>Das wars schon.<br />
Die Konfigurationsmöglichkeiten werden im Manual ganz gut erklärt, da gibts dann weitere Infos.</p>
<p>Spannend wirds allerdings wenn nun die Form submitted werden soll um den geänderten Code zu verarbeiten.<br />
Denn der Trick bei dieser, wie auch bei den anderen Libs ist, dass das die Textarea unsichtbar gemacht wird und stattdessen ein iFrame gerendert wird mit dem Highlighting.</p>
<p>Submitted man nun die Form, wird natürlich nicht der aktuelle Inhalt übertragen sondern unverändert der alte.<br />
Um zu erreichen, dass der neue Inhalt übertragen wird, muss man vorher den Code aus dem iFrame holen und in die ursprungliche Textarea setzen.<br />
Daher besser keinen Submit Button benutzen, da ein Submit direkt feuert.<br />
Besser ein onclick auf einen normalen Button und eine javascript funktion zwischenschalten die den Transfer übernimmt und danach submittet.<br />
CodeMirror bietet dafür, sehr praktisch, eine Funktion an, die einem den geänderten Code liefert: getCode()<br />
Als prototype event sehe das dann so aus:</p>
<pre class="brush: jscript; title: ; notranslate">
//button id=save
Event.observe(&#039;save&#039;,&#039;click&#039;,function(event) {
 	 	  $(&#039;code&#039;).value = editor.getCode();
		  $(&#039;form&#039;).submit();//die form mit id = form
});
</pre>
<p>So siehts aus:<br />
<a href="https://nerdpress.org/wp-content/uploads/2010/01/codemirror.jpg"><img decoding="async" class="alignnone size-medium wp-image-732" title="codemirror" src="https://nerdpress.org/wp-content/uploads/2010/01/codemirror-300x154.jpg" alt="" width="300" height="154" /></a></p>
<p>coole sache!</p>The post <a href="https://nerdpress.org/2010/01/18/textarea-mit-code-highlighting/">Textarea mit Code Highlighting</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></content:encoded>
					
					<wfw:commentRss>https://nerdpress.org/2010/01/18/textarea-mit-code-highlighting/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
			</item>
	</channel>
</rss>
