# 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.


```
<?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!
	
	
	



```
<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.


----------



## Thomas Darimont (3. Juni 2006)

Hallo!

Danke Gumbo ich schau gleich mal rein,
in der Zwischenzeit hat Fabian Hoffmann alias Nuimundo dies hier gezaubert:


```
<html><head><title>Code Listing</title>
    <style type="text/css">
    code.HighlightCode {
      display: block;
      margin-left: 5em;
    }

    div.HighlightCodeLines {
      font-family: monospace;
      float: left;
      width: 4.5em;
      text-align: right;
    }
    </style>

    <script type="text/javascript">
    function addLineNumbers(el)
    {
        /* hier lassen sich natuerlich auch LFs matchen */
        var nls = el.innerHTML.match(/<br( ?\/)?>/ig);

        if (nls.length < 0)
            return false;
        var nlcnt = nls.length + 1;
        var lines = window.document.createElement('div');

        /* setAttribute doesn't work properly for IE */
        lines.className = 'HighlightCodeLines';

        for (var i=0; i<nlcnt; i++)
            lines.appendChild(createLineNumber(i+1));

        el.parentNode.insertBefore(lines, el);
    }

    function createLineNumber(n)
    {
        var line = window.document.createElement('div');
        line.appendChild(window.document.createTextNode(n.toString(2)));

        return line;
    }

    function blahfasel()
    {
        var c = window.document.getElementsByTagName('code');

        for (var i=0; i<c.length; i++)
            addLineNumbers(c[i]);
    }
    </script></head><body onload="blahfasel();">
    <h1>Code Listing Example</h1>

<code class="HighlightCode">
      Code Zeile 1<br>
      Code Zeile 2<br>
      Code Zeile 3<br>
      Code Zeile 4<br>
      Code Zeile 5<br>
      Code Zeile 6<br>
      Code Zeile 7<br>
      Code Zeile 8
    </code>

    <p>
      Text, blah blah fdsfdsf
    </p>

</body></html>
```
 
Gruß Tom


----------



## Thomas Darimont (3. Juni 2006)

Hallo,

@Gumbo 
Ich bekomme damit im IE und im FF immernoch alles nur in einer Zeile angezeigt.

Gruß  Tom


----------



## Maik (3. Juni 2006)

@Gumbo: wenn man nach dem Markieren in den Bereich klickt, tauchen die Zeilennummerierungen auf, und bei einem weiteren Klick in das Fenster wird der Code in einer Zeile ausgegeben.

(OS: Win2k, FF 1.5.0.4, IE6.0)


----------



## Gumbo (3. Juni 2006)

Dann hoffe ich mal, dass Sven mehr daraus machen kann. Er scheint sich mit JavaScript doch noch etwas mehr auszukennen als ich.


----------



## Quaese (3. Juni 2006)

Hi,

ich finde @Gumbos Ansatz schon recht gut. Ich würde nur anhand von BR-Tags den Text splitten.
Testen konnte ich das Ganze nur im Firefox 1.5, Opera 7.54 und 8.5, IE 5.01, IE 5.5 und IE 6 unter WinXP.

```
<?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="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/g);
  obj.firstChild.innerHTML = obj.firstChild.innerHTML.replace(/\r\n|\r|\n/g, "<br />");
  var lines = obj.firstChild.innerHTML.split(/<br[\s]?\/?>/ig);
  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++) {
    preElement.innerHTML += items[i].firstChild.innerHTML + "<br />";
  }
  obj.replaceChild(preElement, obj.firstChild);
}
//-->
</script>
<style type="text/css">
.source {
	height: 20em;
	overflow: auto;
}
li pre {
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
<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>
</body>
</html>
Ciao
Quaese
```


----------



## Sven Mintel (5. Juni 2006)

Was die Zeile im IE betrifft: da reicht es, wenn man das <pre> herausnimmt...


----------



## Gumbo (5. Juni 2006)

Hast du eine Idee, wie man das Ganze für alle Browser flicken kann, Sven?


----------



## Sven Mintel (5. Juni 2006)

Naja...das mit JS zu lösen, halte ich eigentlich für murksig...ihr ja sicher auch 
Ne schnelle JS-Lösung für das Problem mit den Nummern wäre es, wenn man beim Anklicken/Auswählen/weissdergeier...mit JS den list-style-type der listen dort auf 'none' setzt. 
Anstatt da grossartig die Events zu überwachen, würd ich allerdings einen Button etc. bevorzugen, mit dem man das nach Gusto macht.

Eine CSS-Lösung für die Nummern könnte ich mir vorstellen, wenn man bspw. als Hintergrundbild einen langen Streifen mit der Nummerierung nimmt...ob das praktikabel und exakt machbar ist, hab ich aber noch nicht probiert...ich glaub aber eher nicht


----------



## Sven Mintel (5. Juni 2006)

Vergesst das mit den Nummerierungen: der FF macht da beim Kopieren immer was rein.
Selbst wenn man die Nummerierung per list-style-type:none abstellt, macht er beim Kopieren was rein...Rauten


----------



## flooo (6. Juni 2006)

Morgen,
das Problem ist also die Ausgabe als Liste. Dann halt ohne Liste und mit Bildern. Hab es grade mal probiert. Einfach jede Zeile in ein Block-Element mit padding-left: ..., halt eingerückt und als Hintergrundbild ein Bild mit der entsprechenden zeilennummer und Hintergrundfarbe = Bildhintergrundfarbe. Das geht doch, oder?
flooo


```
<span style="display: block; padding-left: 20px; background: BBE0E3 url(test.jpg) no-repeat;">erste zeile</span>
<span style="display: block; padding-left: 20px; background: BBE0E3 url(test.jpg) no-repeat;">zweite zeile</span>
```
das ist nur ein schneller Versuch


----------



## Gumbo (6. Juni 2006)

Grafiken zu Nummerierung zu verwenden wäre zwar möglich, aber das auch nur mit ungeheurem Aufwand. Denn am besten müsste für jede Zeile eine eigene Grafik eingesetzt werden, die in der Horizontalen nie endet – man weiß ja nie wie lang eine Zeile wird.
Ich plädiere immer noch für meinen Vorschlag. Nur komisch, dass alle ihn so unterschiedlich umsetzen.


----------



## flooo (6. Juni 2006)

hi,
das mit den nie endenden Zeilen ist doch egal, das kann man ja einfach über die Hintergrundfarbe machen, und die Grafiken können ja von php erstellt werden. Tja, und wie Sven schon sagte ist ne Javascript-Lösung irgendwie nicht das wahre.
flooo


----------



## Thomas Darimont (6. Juni 2006)

Hallo!

Kann man da nicht einfach eine Tabelle mit zwei Spalten nehmen?
In der ersten spalte stehen die Zeilennummern und in der 2ten Spalte stehen die Programmzeilen.
Wenn man nun den Quelltext kopieren moechte nimmt man einfach nur die 2te Spalte.
Oder ist das zu einfach gedacht?

Gruss Tom


----------



## flooo (6. Juni 2006)

so weit ich das weiß, kann keine einzelne Spalte markieren.


----------



## Gumbo (6. Juni 2006)

> Kann man da nicht einfach eine Tabelle mit zwei Spalten nehmen? […] Wenn man nun den Quelltext kopieren moechte nimmt man einfach nur die 2te Spalte.


Dann nimm mal nur die zweite Spalte. Mir fällt gerade kein Browser ein, der das mitmacht.

Ich verstehe nur nicht, wieso die Browser meinen Vorschlag alle so unterschiedlich interpretieren. Ich schätze, dass es mit „innerHTML“ irgendwie zusammenhängt. Ich werde mich mal hinsetzen und eine reine DOM-Lösung zusammenschustern.


----------



## Thomas Darimont (6. Juni 2006)

Hallo!

und wie waers damit:

```
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    AAAAA1
                    <br />
                    AAAAA2
                    <br />
                    AAAAA3
                </td>
                <td>
                    <table>
                        <tr>
                            <td>AAAAA1</td>
                        </tr>
                        <tr>
                            <td>AAAAA2</td>
                        </tr>
                        <tr>
                            <td>AAAAA3</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>
```
Damit kann man wunderbar auch nur die 2te Spalte markieren  Mann muss nur dafuer sorgen, dass die Zeilennummern auch auf der gleichen Hoehe mit den entsprechenden Codezeilen sind.

Gruss Tom


----------



## flooo (6. Juni 2006)

Thomas Darimont hat gesagt.:
			
		

> Mann muss nur dafuer sorgen, dass die Zeilennummern auch auf der gleichen Hoehe mit den entsprechenden Codezeilen sind.


da liegt unter anderem der Hase begraben, eine Zeile zu lang und mit Zeilenumbruch und schon hat man ein Problem


----------



## Gumbo (6. Juni 2006)

Dann reicht ja auch eine Tabelle mit zwei Zellen.


> Mann muss nur dafuer sorgen, dass die Zeilennummern auch auf der gleichen Hoehe mit den entsprechenden Codezeilen sind.


Genau das ist das Problem bei solchen Tabellenkonstrukten.

Wie wär’s, wenn wir die Nummerierung einfach weglassen? Ich meine, sie macht ja derzeit mehr Probleme als dass sie hilft.


----------



## Thomas Darimont (6. Juni 2006)

... und wie waers damit:

```
<html>
<head>
<title>Test</title>
</head>
<body>
<table>
	<tr>
		<td>
		<table>
			<tr bgcolor="red">
				<td>AAAAA1</td>
			</tr>
			<tr bgcolor="yellow">
				<td>AAAAA2</td>
			</tr>
			<tr>
				<td>AAAAA3</td>
			</tr>
			<tr>
				<td>AAAAA4</td>
			</tr>
			<tr>
				<td>AAAAA5</td>
			</tr>
		</table>
		<td>
		<table>
			<tr bgcolor="red">
				<td>AAAAA1</td>
			</tr>
			<tr bgcolor="yellow">
				<td>AAAAA2</td>
			</tr>
			<tr>
				<td>AAAAA3</td>
			</tr>
			<tr>
				<td>AAAAA4</td>
			</tr>
			<tr>
				<td>AAAAA5</td>
			</tr>
		</table>
		</td>
	</tr>
</table>
</body>
</html>
```
 Funktioniert einwandfrei 

Gruss Tom


----------



## Gumbo (6. Juni 2006)

Ja aber nur so lange wie beide Zeilenpaare den selben Inhalt haben. Setze mal in eine Zelle einen ellenlangen Text oder gleich einen Zeilenumbruch und du wirst das Problem sehen.


----------



## Thomas Darimont (6. Juni 2006)

Versuchen wirs doch mal:

```
public static void main(String[] args) {
        System.out.println(Math.sin(Math.toRadians(45)));
        System.out.println((calculateSinusApproximationFor(Math.toRadians(45),
                20)));
        System.out.println((calculateExactSinusApproximationFor(Math
                .toRadians(45), 20)));
    }
```

Schaut mit:

```
<html>
<head>
<title>Test</title>
</head>
<body>
<table>
    <tr>
        <td>
        <table>
            <tr bgcolor="red">
                <td>1.</td>
            </tr>
            <tr bgcolor="yellow">
                <td>2.</td>
            </tr>
            <tr>
                <td>3.</td>
            </tr>
            <tr>
                <td>4.</td>
            </tr>
            <tr>
                <td>5.</td>
            </tr>
            <tr>
                <td>6.</td>
            </tr>
            <tr>
                <td>7.</td>
            </tr>
        </table>
        <td>
        <table>
            <tr bgcolor="red">
                <td>&nbsp;&nbsp;&nbsp;&nbsp;public static void main(String[] args) {</td>
            </tr>
            <tr bgcolor="yellow">
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println(Math.sin(Math.toRadians(45)));</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println((calculateSinusApproximationFor(Math.toRadians(45),</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20)));
            </td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println((calculateExactSinusApproximationFor(Math</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.toRadians(45), 20)));</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;}</td>
            </tr>
        </table>
        </td>
    </tr>
</table>
</body>
</html>
```

So aus:

geht doch, oder?

Gruss Tom


----------



## flooo (6. Juni 2006)

nein, eben nicht, weil die Zeile, die umgebrochen wurde ne neue Zeilennummer bekommt, soll sie aber nicht.


----------



## Thomas Darimont (6. Juni 2006)

Hallo!

Dann laesst man die Zeile eben nicht umbrechen... aktuell werden die Zeilen in den Codetags ja auch nicht umgebrochen, statt dessen werden Horizontale Scrollbars eingeblendet wenn der Code sehr lang wird (dieses Verhalten kann man ja beibehalten). Wenn im Quellcode ein Zeilumbruch steht muss man eben eine neue Zeile fuer anfangen (wie das unser aktueller Highlighter auch schon macht).

Ein Nachteil dieser Loesung ist, das wenn man den Quelltext MIT Zeilennummern markieren moechte sowas bekommt:

```
1.
2.
3.
4.
5.
6.
7.
	
    public static void main(String[] args) {
        System.out.println(Math.sin(Math.toRadians(45)));
        System.out.println((calculateSinusApproximationFor(Math.toRadians(45),
                20)));
        System.out.println((calculateExactSinusApproximationFor(Math
                .toRadians(45), 20)));
    }
```
Aber ich denke, dass ist ein vernachlaessigbares Uebel.

Gruss Tom


----------



## Gumbo (6. Juni 2006)

Klar, das ist möglich. Aber wir müssen es mit den Tabellen ja nicht übertreiben.
	
	
	



```
<table>
	<tr>
		<td><pre>1.
2.
3.
4.
5.
6.
7.</pre></td>
		<td><pre>&nbsp;&nbsp;&nbsp;&nbsp;public static void main(String[] args) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println(Math.sin(Math.toRadians(45)));
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println((calculateSinusApproximationFor(Math.toRadians(45),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20)));
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println((calculateExactSinusApproximationFor(Math
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.toRadians(45), 20)));
&nbsp;&nbsp;&nbsp;&nbsp;}</pre>
		</td>
	</tr>
</table>
```
Alternativ könnten die Zeilenumbrüche auch durch br-Elemente ersetzt werden.


----------



## Thomas Darimont (6. Juni 2006)

Hallo!

Stimmt,

Das ging auch, gefaellt mir auch viel besser als die Tabellenloesung, danke Gumbo 
Getreu dem Motto: „Simple is good. Simplier is better.“ 

```
<html>
<head>
<title>Test2</title>
</head>
<body>
<table>
<tr>
<td><pre>
1.
2. 
3. 
4. 
5. 
6. 
7.
</pre>
</td>
 <td>
 <pre>
 
    public static void main(String[] args) {        
        System.out.println(Math.sin(Math.toRadians(45))); 
        System.out.println((calculateSinusApproximationFor(Math.toRadians(45),
                            20)));
        System.out.println((calculateExactSinusApproximationFor(Math
                            .toRadians(45), 20)));
    }
 </pre>
</td>
</tr>
</table>
</body>
</html>
```

Welche Loesung bauen wir nun ein?

Gruss Tom


----------



## Gumbo (6. Juni 2006)

Tja, da die dynamische Bäumchen-wechsel-dich-Lösung nicht in allen Browsern zu funktionieren scheint, sollten wir auf die Tabellenlösung umsteigen, auch wenn sie in meinen Augen dreckig ist.


----------



## flooo (6. Juni 2006)

aber so weit ich weiß, werden Zeilenumbrüche nicht mit neuen Nummer versehen, oder?


----------



## Thomas Darimont (6. Juni 2006)

Hallo!

Probieren wirs doch einfach mal aus:

```
public static void main(String[] args) {

              System.out.println(Math.sin(Math.toRadians(45)));

              System.out.println((calculateSinusApproximationFor(Math.toRadians(45),

                      20)));

              System.out.println((calculateExactSinusApproximationFor(Math

                      .toRadians(45), 20)));
        }
```

Gruss Tom


----------



## flooo (6. Juni 2006)

es war nicht die Frage, ob es hier passiert sondern ob die gängigen Editoren dies so umsetzten oder nicht. Und meines erachtes ist es üblich, dass eine umgebrochene Zeile keine Nummer erhält


----------



## Thomas Darimont (6. Juni 2006)

Hallo!

Also alle Editoren die ich kenne machen auf fuer einen Zeilenumbruch eine neue Zeilennummer.

Gruss Tom


----------



## flooo (6. Juni 2006)

das ist ja ungünstig, denn wenn du eine Fehlermeldung erhälst sagt dir der Fehler die Zeilennummer und dann kannst du suchen, wenn du für jeden automatische Zeilenumbruch ne neue Nummer vergeben hast
Beispiel: http://www.weaverslave.ws/screenshots.49.html?bab[mode]=max&bab[idx]=0&bab[img]=0


----------

