Unseren Syntaxhighlighter Fixen

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
 
@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)
 
Dann hoffe ich mal, dass Sven mehr daraus machen kann. Er scheint sich mit JavaScript doch noch etwas mehr auszukennen als ich.
 
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
 
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 :(
 
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:rolleyes:
 
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
 

Anhänge

  • 24676attachment.jpg
    24676attachment.jpg
    1,8 KB · Aufrufe: 15
Zurück