Unseren Syntaxhighlighter Fixen

Thomas Darimont · 3. Juni 2006

Hallo!

Seit wir den Syntaxhighlighter GeShi (http://qbnz.com/highlighter/) eingebaut haben,
haben wir zwar wieder ein wunderschönes Highlighting jedoch wird durch einen kleinen
Bug in der Darstellung jedes mal die Freude ein wenig getrübt. Wenn man in dem Codebereich nur den Code markiert, diesen dann in die Zwischenablage kopiert und anschließend in einen Texteditor einfügt werden die Zeilennummern mitkopiert (Firefox).
Im Internet Explorer werden die Zeilennummern nicht mitkopiert, jedoch werden dafür die Zeilenumbrüche weggeworfen.

HTML:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css" id="vbulletin_css" />
</head>
<body>
<div style="margin:20px; margin-top:5px">
    <div class="smallfont" style="margin-bottom:2px">java Code:</div>
    <pre class="alt2" style="margin:0px; padding:6px; border:1px inset; width:640px; height:516px; overflow:auto">
    <div dir="ltr" style="text-align:left;" class="codehighlight"><div class="java"><ol class="codehighlight_bullet"><li class="li1"><div class="de1"><span class="coMULTI">/**</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1">package de.<span class="me1">tutorials</span>;</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co2">import java.awt.Color;</span></div></li><li class="li1"><div class="de1"><span class="co2">import java.awt.Graphics;</span></div></li><li class="li1"><div class="de1"><span class="co2">import java.awt.geom.RoundRectangle2D;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co2">import javax.swing.JFrame;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="coMULTI">/**</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * @author Tom</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> *</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"><span class="kw2">public</span> <span class="kw2">class</span> RoundRectangleClipAreaExample <span class="kw2">extends</span> <a href="http://www.google.com/search?q=allinurl%3AJFrame+java.sun.com&amp;bntl=1"><span class="kw3">JFrame</span></a><span class="br0">{</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">&nbsp; &nbsp; <span class="kw2">public</span> RoundRectangleClipAreaExample<span class="br0">(</span><span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; super<span class="br0">(</span><span class="st0">"RoundRectangleClipAreaExample"</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; setDefaultCloseOperation<span class="br0">(</span>EXIT_ON_CLOSE<span class="br0">)</span>;</div></li><li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; </div></li><li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; setSize<span class="br0">(</span><span class="nu0">400</span>,<span class="nu0">300</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; setVisible<span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">&nbsp; &nbsp; <span class="br0">}</span></div></li><li class="li1"><div class="de1">&nbsp; &nbsp; </div></li><li class="li1"><div class="de1">&nbsp; &nbsp; <span class="coMULTI">/**</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp;* @param args</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp;*/</span></div></li><li class="li1"><div class="de1">&nbsp; &nbsp; <span class="kw2">public</span> <span class="kw4">static</span> <span class="kw4">void</span> main<span class="br0">(</span><a href="http://www.google.com/search?q=allinurl%3AString+java.sun.com&amp;bntl=1"><span class="kw3">String</span></a><span class="br0">[</span><span class="br0">]</span> args<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">new</span> RoundRectangleClipAreaExample<span class="br0">(</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">&nbsp; &nbsp; <span class="br0">}</span></div></li><li class="li1"><div class="de1">&nbsp; &nbsp; </div></li><li class="li1"><div class="de1">&nbsp; &nbsp; <span class="kw2">public</span> <span class="kw4">void</span> paint<span class="br0">(</span><a href="http://www.google.com/search?q=allinurl%3AGraphics+java.sun.com&amp;bntl=1"><span class="kw3">Graphics</span></a> g<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; g.<span class="me1">setColor</span><span class="br0">(</span><a href="http://www.google.com/search?q=allinurl%3AColor+java.sun.com&amp;bntl=1"><span class="kw3">Color</span></a>.<span class="me1">RED</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1"><span class="co1">//&nbsp; &nbsp; &nbsp; &nbsp; Mach mal die Kommentare weg ;-)</span></div></li><li class="li1"><div class="de1"><span class="co1">//&nbsp; &nbsp; &nbsp; &nbsp; RoundRectangle2D roundRectangle2D = new RoundRectangle2D.Double(50,50,300,200,20,20);</span></div></li><li class="li1"><div class="de1"><span class="co1">//&nbsp; &nbsp; &nbsp; &nbsp; g.setClip(roundRectangle2D);</span></div></li><li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; g.<span class="me1">fillRect</span><span class="br0">(</span><span class="nu0">0</span>,<span class="nu0">0</span>,<span class="nu0">400</span>,<span class="nu0">300</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">&nbsp; &nbsp; <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span> </div></li></ol></div></div></pre>
</div>
</body>
</html>

Das style.css ist einfach das aus dem Forum:
http://www.tutorials.de/forum/clientscript/vbulletin_css/style-bc90d075-00029.css

Weis jemand vielleicht eine Lösung für dieses Problem? Wir hätten gerne, dass man wenn man nur den Codetext markiert auch nur dieser kopiert wird (ohne Zeilennummern, ohne # Zeichen aber mit entsprechenden Zeilenumbrüchen).

Viele User ( + Moi) wären der- bzw. demjenigen unendlich dankbar

Tut mal was für die Community die so viel für euch tut

Gruß Tom

Maik · 3. Juni 2006

Hallo Tom,

das Fehlen der zuvor eingegebenen Zeilenumbrüche liegt wohl daran, daß die generierten Elemente (DIVs, Listenpunkte) innerhalb des pre-Elements im HTML-Quelltext nicht untereinander, sondern in einer einzigen Zeile ausgegeben werden.

Ob und wenn ja, wie sich die Übernahme der Zeilennummerierungen bzw. die Ausgabe des #-Zeichens (beim Kopieren eines Codeabschnitts) mit CSS abstellen lässt, entzieht sich leider meiner Kenntnis

Aber vielleicht fällt Markus (Gumbo), Quaese oder Sven hierzu ein Lösungsansatz ein?

LG, Michael

Thomas Darimont · 3. Juni 2006

Hallo!

Danke für deine Hilfe Michael

Ich habs nun mal ins html Forum verschoben.

Gruß Tom

Gumbo · 3. Juni 2006

Endlich werden meine Gebete erhört! Ich habe auch schon eine Lösung: der dp.SyntaxHighlighter ermöglicht es, die zuvor als Klartext ausgezeichneten Quellcodes als Listen darzustellen. Damit dürfte das Problem behoben sein.
PS: Block-Level-Elemente sind übrigens innerhalb von pre-Elementen nicht erlaubt.

Thomas Darimont · 3. Juni 2006

Hallo Gumbo,

ich hab mir jetzt mal diesen Syntaxhighlighter (http://www.dreamprojections.com/syntaxhighlighter/Default.aspx) angeschaut.
Leider unterstützt der nur wenige Sprachen out-of-the-box und wenn man den Code aus den Beispielen (http://www.dreamprojections.com/syntaxhighlighter/Examples.aspx) kopiert, hat man auch die Zeilennummern dabei.

Das Syntaxhighlighting für eine jeweilige Sprache ist über ein entsprechends Java Script File realisiert, welche Regex enthält um die Sprachspezifischen Tokens identifizieren und dann entsprechend Colorieren zu können. Dieses File wird dann vom Highlighter geladen. Ich denke, dass damit eine Anpassung in den meisten Fällen recht einfach ist (vor allem wenn sich die Sprachen von der Syntax her ähneln (C# - Java).

Jedoch wäre es mir persönlich lieber, wenn wir eine Lösung für den vorhandenen Highlighter bauen könnten. Kann da nicht mal jemand einen entsprechenden Prototypen aufsetzen?

Gruß Tom

Gumbo · 3. Juni 2006

Gut, der dp.SyntaxHighlighter selbst ist vielleicht nicht besonders umfangreich. Viel mehr geht es mir um das Prinzip, dass die Quellcodes als Klartext ausgezeichnet werden und erst von JavaScript zu Listen formatiert werden. Dies hätte den Vorteil, dass zwischen beiden Formaten einfach gewechselt werden könnte.

Thomas Darimont · 3. Juni 2006

Hallo!

Kannst du dazu mal ein Beispiel zusammenbasteln?

Gruß Tom

Gumbo · 3. Juni 2006

Tada!

HTML:

<link rel="stylesheet" type="text/css" href="http://www.tutorials.de/forum/clientscript/vbulletin_css/style-bc90d075-00029.css" id="vbulletin_css" />
<script type="text/javascript"><!--
window.onload = function() {
	var divElements = document.getElementsByTagName("div");
	for(var i=0; i<divElements.length; i++) {
		if( ! divElements[i].className.match(/\s*source\s*/) ) {
			continue;
		}
		divElements[i].onclick = new Function("toggleFormat(this)");
//		pre2list(divElements[i]);
	}
}
function toggleFormat( obj )
{
	if( obj.firstChild.tagName == 'OL' ) {
		list2pre(obj);
	} else {
		pre2list(obj);
	}
}
function pre2list( obj )
{
	var olElement = document.createElement("ol");
	olElement.className = obj.firstChild.className;
	var lines = obj.firstChild.innerHTML.split(/\r\n|\r|\n/);
	for(var i=0; i<lines.length; i++) {
		var preElement = document.createElement("pre");
		preElement.innerHTML = lines[i];
		var liElement = document.createElement("li");
		liElement.appendChild(preElement);
		olElement.appendChild(liElement);
		olElement.appendChild(document.createTextNode(String.fromCharCode(13, 10)));
	}
	obj.replaceChild(olElement, obj.firstChild);
}
function list2pre( obj )
{
	var preElement = document.createElement("pre");
	preElement.className = obj.firstChild.className;
	var items = obj.getElementsByTagName("li");
	for(var i=0; i<items.length; i++) {
		if( i > 0 ) {
			preElement.appendChild(document.createTextNode(String.fromCharCode(13, 10)));
		}
		preElement.innerHTML += items[i].firstChild.innerHTML;
	}
	obj.replaceChild(preElement, obj.firstChild);
}
//-->
</script>
<style type="text/css">
.source {
	height: 20em;
	overflow: auto;
}
li pre {
	margin: 0;
	padding: 0;
}
</style>

<div class="source"><pre class="codehighlight java"><span class="coMULTI">/**</span>
<span class="coMULTI"> * </span>
<span class="coMULTI"> */</span>
package de.<span class="me1">tutorials</span>;
&nbsp;
<span class="co2">import java.awt.Color;</span>
<span class="co2">import java.awt.Graphics;</span>
<span class="co2">import java.awt.geom.RoundRectangle2D;</span>
&nbsp;
<span class="co2">import javax.swing.JFrame;</span>
&nbsp;
<span class="coMULTI">/**</span>
<span class="coMULTI"> * @author Tom</span>
<span class="coMULTI"> *</span>
<span class="coMULTI"> */</span>
<span class="kw2">public</span> <span class="kw2">class</span> RoundRectangleClipAreaExample <span class="kw2">extends</span> <a href="http://www.google.com/search?q=allinurl%3AJFrame+java.sun.com&amp;bntl=1"><span class="kw3">JFrame</span></a><span class="br0">{</span>
&nbsp;
&nbsp; &nbsp; <span class="kw2">public</span> RoundRectangleClipAreaExample<span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
&nbsp; &nbsp; &nbsp; &nbsp; super<span class="br0">(</span><span class="st0">"RoundRectangleClipAreaExample"</span><span class="br0">)</span>;
&nbsp; &nbsp; &nbsp; &nbsp; setDefaultCloseOperation<span class="br0">(</span>EXIT_ON_CLOSE<span class="br0">)</span>;
&nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; setSize<span class="br0">(</span><span class="nu0">400</span>,<span class="nu0">300</span><span class="br0">)</span>;
&nbsp; &nbsp; &nbsp; &nbsp; setVisible<span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span>;
&nbsp; &nbsp; <span class="br0">}</span>
&nbsp; &nbsp; 
&nbsp; &nbsp; <span class="coMULTI">/**</span>
<span class="coMULTI">&nbsp; &nbsp; &nbsp;* @param args</span>
<span class="coMULTI">&nbsp; &nbsp; &nbsp;*/</span>
&nbsp; &nbsp; <span class="kw2">public</span> <span class="kw4">static</span> <span class="kw4">void</span> main<span class="br0">(</span><a href="http://www.google.com/search?q=allinurl%3AString+java.sun.com&amp;bntl=1"><span class="kw3">String</span></a><span class="br0">[</span><span class="br0">]</span> args<span class="br0">)</span> <span class="br0">{</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">new</span> RoundRectangleClipAreaExample<span class="br0">(</span><span class="br0">)</span>;
&nbsp; &nbsp; <span class="br0">}</span>
&nbsp; &nbsp; 
&nbsp; &nbsp; <span class="kw2">public</span> <span class="kw4">void</span> paint<span class="br0">(</span><a href="http://www.google.com/search?q=allinurl%3AGraphics+java.sun.com&amp;bntl=1"><span class="kw3">Graphics</span></a> g<span class="br0">)</span> <span class="br0">{</span>
&nbsp; &nbsp; &nbsp; &nbsp; g.<span class="me1">setColor</span><span class="br0">(</span><a href="http://www.google.com/search?q=allinurl%3AColor+java.sun.com&amp;bntl=1"><span class="kw3">Color</span></a>.<span class="me1">RED</span><span class="br0">)</span>;
<span class="co1">//&nbsp; &nbsp; &nbsp; &nbsp; Mach mal die Kommentare weg ;-)</span>
<span class="co1">//&nbsp; &nbsp; &nbsp; &nbsp; RoundRectangle2D roundRectangle2D = new RoundRectangle2D.Double(50,50,300,200,20,20);</span>
<span class="co1">//&nbsp; &nbsp; &nbsp; &nbsp; g.setClip(roundRectangle2D);</span>
&nbsp; &nbsp; &nbsp; &nbsp; g.<span class="me1">fillRect</span><span class="br0">(</span><span class="nu0">0</span>,<span class="nu0">0</span>,<span class="nu0">400</span>,<span class="nu0">300</span><span class="br0">)</span>;
&nbsp; &nbsp; <span class="br0">}</span>
<span class="br0">}</span></pre></div>

Vielleicht kann Sven den Algorithmus noch verbessern/optimieren. Safari und einige andere Mac-OS-Browser scheint damit irgendwie noch Probleme zu haben.

Thomas Darimont · 3. Juni 2006

Hallo!

Hey, sehr cool, danke

Wenn ich das Snippet in den body eines HTML Dokuments kopiere und mir das dann im Firefox oder IE anschaue bekomme ich den Code nur in einer Zeile

Gruß Tom

Gumbo · 3. Juni 2006

Auf das Problem bin ich auch gestoßen. In meinem Firefox (Mac OS) läuft es komischerweise einwandfrei.

Nachtrag: Ich habe noch etwas daran herumgefeilt und meinen vorherigen Beitrag aktualisiert. Probier es nun mal.

Unseren Syntaxhighlighter Fixen

Thomas Darimont

Erfahrenes Mitglied

Maik

Thomas Darimont

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Thomas Darimont

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Thomas Darimont

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Thomas Darimont

Erfahrenes Mitglied

Anhänge

Gumbo

Erfahrenes Mitglied

Neue Beiträge