Zum Inhalt springen

javascript syntaxhighlighter

Callam

Von Callam
in Webdesign

 Teilen

Empfohlene Beiträge

Callam

Callam

Geschrieben
Geschrieben

Hi,

ich versuche mich grade an einem einfachen Syntaxhighlighter für sql.

für das highlighting benutze ich ein div element, in dem der text per javascript und regex farblich formatiert wird, was auch soweit funktioniert

eingaben in das div element mache ich per tastatur eventhandler, aber ich habe keine idee wie ich da einen curser einbaue der im text anzeigt, wo man grade schreibt oder einfügt, bzw mit dem man per pfeiltasten im text navigieren kann (der kleine blinkende strich den es in so gut wie jedem texteditor gibt). meine ideen waren bisher, das man nen 2 px breites bild oder nen | (alt gr + '<') nimmt, aber bei dem bild ka wie ichs positionieren soll und der strich verändert die zeilenlänge um ein zeichen und verursacht so nervige effekte bei automatischen zeilenumbrüchen

ich habe es auch schon mit dem attribut contenteditable (oder so ähnlich) versucht, allerdings wird da der text schon von vornherein mit <p> tags formatiert und im firefox funktioniert es auch nicht sonderlich gut.

hat da jemand eine idee, wie ich den cursor realisieren kann?

bitte keine fertigen syntaxhighlighter, da es bei meinem versuch einen zu basteln nicht um praktischen nutzen, sondern nur um den lerneffekt geht...

Link zu diesem Kommentar
Auf anderen Seiten teilen
_n4p_

_n4p_

Geschrieben
Geschrieben (bearbeitet)

CodePress - Real Time Syntax Highlighting Editor written in JavaScript tut genau das und einiges mehr (auto-complete, ..)

is zwar knapp 2 jahre her, aber ich glaube das ließ sich sogar recht leicht benutzen und anpassen.

wobei ich grad seh, das die zwar an ne textarea binden aber die darstellung dann in html passiert ^^

Bearbeitet von _n4p_
Link zu diesem Kommentar
Auf anderen Seiten teilen
Callam

Callam

Geschrieben
  • Autor
Geschrieben (bearbeitet)

deswegen:

bitte keine fertigen syntaxhighlighter, da es bei meinem versuch einen zu basteln nicht um praktischen nutzen, sondern nur um den lerneffekt geht...
... und weil ich da noch nen paar andere sachen als syntaxhighlighter mit ausprobieren wollte Bearbeitet von Callam
Link zu diesem Kommentar
Auf anderen Seiten teilen
Callam

Callam

Geschrieben
  • Autor
Geschrieben

ein bisschen weiter gekommen bin ich durch die beispiele, aber ich hab immer noch n paar kleine probleme...

Mein Quellcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

  <meta name="generator" content="PSPad editor, www.pspad.com">

  <style>

  body {

    text-align:right;

  }  

  p {

    margin:0px;

  }

  </style>

  <script src="prototype.js" type="text/javascript" language="Javascript"></script>  

  <title></title>

  <script>

  var dingens = new PeriodicalExecuter(function(evt) {

    //Highlighting zurücksetzen

    if(document.body.innerText.length >0) {

      var range  = document.selection.createRange();

      range.moveStart("character", -10000000000000000);

      range.moveEnd  ("character", -10000000000000000);

      range.moveStart('character',0);

      range.moveEnd('character',document.body.innerText.length);

      range.execCommand("ForeColor",false,"#000000"); 

    }

    //sonst Verschiebung d. Highlighting durch Zeilenumbrüche

    var txt = document.body.innerText.replace(/\n/g,"");

    //Start u. Endposition d. Hervorhebung

    var rStart = txt.search(/\'(.*?)(\')/);

    var rEnd   = txt.match(/\'(.*?)(\')/);

    rEnd = rEnd ? rEnd[0].length : false;

    //Hervorheben

    if(rEnd&&rStart) {

      var range  = document.selection.createRange();

      range.moveStart("character", -10000000000000000);

      range.moveEnd  ("character", -10000000000000000);

      range.moveEnd("character",rEnd);

      range.moveStart("character", -10000000000000000);

      range.moveEnd  ("character", -10000000000000000);

      range.moveStart("character",rStart);

      range.moveEnd("character",rEnd);

      range.

      var test = range.htmlText.match(/<\/P>/g); 

      range.execCommand("ForeColor",false,"#FF0033");

    }

  }, 5); //wenn fertig 1, jetzt 5 damit Testausgaben mit alert nicht nerven

  </script>

  </head>

  <body contenteditable="true" id="body" valign="right" oncontextmenu="alert(document.body.innerHTML);alert(document.body.innerText);return false;">


  </body>


</html>

zum testen hab ich jetzt mal alles in eine datei gepackt, javascript und css kommen später natürlich in eigene dateien.

mein problem ist nun an der stelle:

var rStart = txt.search(/\'(.*?)(\')/);

var rEnd = txt.match(/\'(.*?)(\')/);

rEnd = rEnd ? rEnd[0].length : false;

so bekomm ich leider nur den ersten treffer. versucht habe ich es, in dem ich alle treffer von txt.match(/\'(.*?)(\')/); durchgegangen bin, und dann wollte ich mit range.findText (hatt ich gestern irgendwo gefunden) die treffer markieren und dann mit

range.execCommand("ForeColor",false,"#FF0033"); färben, hat aber nicht funktioniert...

das ganze soll vor allem im ie6+ laufen, von der idee, das auch für andere browser zu machen habe ich mich vererst mal verabschiedet, da mir der aufwand für ein "nur mal schauen ob ichs hinbekomm" zu groß wäre

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...