Unseren Syntaxhighlighter Fixen

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:

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

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="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

HTML:

<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

Unseren Syntaxhighlighter Fixen

Thomas Darimont

Erfahrenes Mitglied

Thomas Darimont

Erfahrenes Mitglied

Maik

Gumbo

Erfahrenes Mitglied

Quaese

Moderator

Sven Mintel

Mitglied

Gumbo

Erfahrenes Mitglied

Sven Mintel

Mitglied

Sven Mintel

Mitglied

flooo

Erfahrenes Mitglied

Anhänge

Neue Beiträge