PB2HTML

[Macros]

Dieses kleine Plugin für die IDE von Purebasic dient dazu,
den Quellcode mitsammt Formatierung in eine HTML Seite umzuwandeln.
Ein muss für jeden dein ein Online-Tutorial erstellen will.

Ich plane auch noch weitere Konvertierungsmöglichkeiten einzubauen,
Vorschläge nehme ich wie immer gerne entgegen.

Die vBulletin Konvertierung ist noch experimentell, und sollte nicht verwendet werden.

Beim Einrichten müssen folgende Parameter übergeben werden:
%Tempfile HTML / vBulletin size:xx lines:1
(Zwingend notwendig)
Falls Standartmäßig zu * konvertiert werden soll
falls man eine bestimmte Schriftgröße nutzen will,
xx entspricht der Schriftgröße
Für das Zuschalten von Zeilennummerierung und Faltung


Downloaden kann man das Programm hier.

Eine Beispielseite



Änderungen:

• Statt Split View Panelgadget
• Optimierungen an der Ausgabe
• html Ordner wird jetzt im Verzeichnis des Tools erstellt
• Links öffnen eine neue Seite
• Zeilennummerierung+Folding
• BBCode hinzugefügt
• Exe kann manuell gestartet werden
• Faltung neugeschrieben, funktioniert jetzt komplett
• IE Bug umgangen

[a14xerus]

Nur ein Wort:
Cool

Edit: Funktioniert auch unter jaPBe
Edit2: und ich find den Screenshot ok

[ts-soft]

Könntest Du irgendwas mit dem Screenshot machen? Ist nichts zu erkennen,
irgendwie sollte man doch auch das Original sehen können. Auf Deiner
schicken Homepage dasselbe Problem.

Bevor ich teste, möchte ich den Unterschied zu meiner Version (sehr alt) sehen

Gruß
Thomas

[Macros]

Was genaus soll ich mit dem Screenshot machen?
Im Hintergrund siehst du den original PB Quellcode in der PB IDE
Das Fenster im Vordergrund ist mein Tool, oben ein Webgadget,
das die HTML Seite anzeigt, unten ein Editorgadget mit dem HTML-Code.

[ts-soft]

>> Was genaus soll ich mit dem Screenshot machen?
Ich sehe nur wischiwaschi, da ist nichts zu erkennen. Link zum Original, also
unverkleinerten Version. Diese ist so unnütz, man erkennt auch garnichts,
ausser Farben und verschwommene Zeichen
Kannste höchstens als Thumbnail zum Original nutzen.

[Macros]

Hier extra für dich in Originalgröße.

Der Kunde ist ja König

[ts-soft]

Danke, so kann man was erkennen
PS: ähnliches Tool hier: http://www.purebasic.fr/german/viewtopi ... ht=pb2html

[AND51]

Ich habe das Programm zwar noch nicht benutzt, habe aber einen sehr wichtigen Hinweis für dich.

Ich sehe (anhand des Quelltextes im Screenshot), dass du jede Zeile einzeln mit <font color="#00AAA"> formatierst? Warum?
ich verstehe sehr gut, ass es für dich mehr Programmierarbeit ist, aber bitte sei doch so nett und reduziere die Grlöße der HTML Datei, indem du entweder alles nur einmal mir dem Tag formatierst oder eine externe CSS-Datei benutzt. Dadurch lassen sich enorm viel bytes einsparen, was sich auch wirklich summiert!
Das darfst du mir gern glauben, denn erst gestern habe ich in meinem Projekt eine Funktio fertiggestellt, die dynamich eine HTML-Datei mit Tabellen erzeugt. Würde ich keine externe CSS-Datei benutzen, würde sich die Dateigröße verfielfachen.
Vorteil 2 der CSS-Datei: Der Benutzer kann das Layout bei Bedarf nachträglich sehr viel einfacher verändern.
Vorteil 3: Nicht nur die Dateigröße wird geringer, sondern auch die Übersichtlichkeit des Quellcodes wird größer.



Mein anderer VOrschlag, weswegen ich eigentlich poste ist dieser:
Du schreibst sehr oft &nbsp; um geschütze Leerzeichen zu erzwingen. Schön, dass du auf diese Idee gekommen bist, um Einrüclkungen unter HTML verwirklichen zu können.
Aber hast du schon mal von <PRE>-tag gehört? Damit kannst du deine &nbsp;'s vergessen, der Text zwischen dem Tag wird im Brwoser genauso angezeigt, wie du in im Quelltext formatierst.
Schreibst du im Quelltext also 3 Zeilenumbrüche (indem du Return drücklst und keine <BR>'s verwendest), dann werden im Browser auch 3 Zeilenumbrüche angezeigt. Dasselbe mit Leerzeichen: 4 getippte Leerzeichen ersetzen 4 Mal &nbsp; und werden auch im browser als 4 Leerzeichen angezeigt.
Dadurch verringert sich die Dateigröße um ein Vielfaches, was letzlich für Modemuser wie auch für Leute mit geringem Webspace von Bedeutung ist. Der HTML-Code wird so auch übersichtlicher.

Bitte siehe hier für den <PRE>-Tag: http://de.selfhtml.org/html/text/praeformatiert.htm

[Macros]

Ich werd versuchen, bis morgen Mittag das alles umzusetzen,
danke für die Vorschläge AND, auch wenn sie fett daherkommen ^^

edit: Pre Tag umgesetzt

[AND51]

Habe dein Programm getestet, weil es mich doch mal reizt, mneinen PB Code als HTML-Seite zu sehen, ich bin beeindruckt!

Sogar meine Editor Einstellungen (Verdana, 10pt) werden übernommen!!!
Nun hätte ich natürlich noch mehr Verbesserungsvorschläge:
*RäUSPER*

• Zeilennummerierung. Einfach zu relisieren, indem du den gesamten Code in eine blinde Tabelle mit nur 2 Zellen packst: In die linke Zelle (ca. 60 px breit) kommt die Zeilennumemrierung, in die rechte kommt natürlich der Code. Dieses Feature sollte man dynamisch an- und abschalten können.
• Ich benutze für die Einrückungen "echte" Tabs (Chr(9)) und habe in der PB IDE die Breite 8 eingestellt. Leider machst du darauf "nur" 2 Leerzeichen. Bitte verbesser diese Stelle noch.
• Die Ausgabe. Warum oben Anzeige und unten HTML-Code? Das bringt nichts, denn wer mehr als 200 Zeilen Code hat, muss schon scrollen. Bitte packe beide Sachen in ein Panelgadget; Anzeige und HTML-Code gehlren in ein eigenes Panel.
• Mir kommt gerade noch diese Idee: Du kannst ganz leicht das Folding der IDE nachahmen, indem du in die linke Spalte bei der Zeilennummerierung (siehe Tipp oben) ein kleines Plus-Bild reinsetzt. Dieses Bild ist von einem Link umgeben, das bei Klick eine JavaScript-Funktion auslöst, die dann den entsprechenden Bereich versteckt oder anzeigt. Hierbei kann ich dir gern Behilflich sien, indem ich dir ein Beispielcode zusende. Dazu müsstest du am besten die IDE-Einstellungen auslesen um zu wissen, welche Schlüsselwörter der Benutzer gefaltet haben möchte (beispielsweise lasse ich nicht nur Procedure/EndProcedure und ;{ / ;} falten, sondern auch Macro/EndMacro, With/EndWith, Enumeration/EndEnumeration, usw.).
• Bitte nicht einfach einen Ordner namens "html" in meinem PureBasic-Ordner erstellen Ich habe für dein cooloes Tool extra einen Unterordner angelegt:
  #PB_Compiler_Home+"Werkzeuge\PB2HTML\", dann sollten deine Temp-Files auch bitte da rein!
• Ändere HTML-Code created with PB2HTML Converter from Macrosmal zu HTML-Code generated with PB2HTML Converter by Macros. Klingt besser.
  Und: Ergänze deinen Werbe-Link um folgendes Attribut: target="_blank", sonst sehe ich mich gezwungen, den Werbelink zu entfernen...
• Habe gerade getestet: Für Chr(9) kannst du innerhalb von <PRE>-Tags auch tabs benutzen (einfach im Notepad mal Tab drücken), diese werden dann korrekt umgesetzt (zumindest im IE 7). Ich frage mich nur, ob die Tablänge dann auch korrekt ist. Warum ich das mit dem Tab schreibe: Dein Toll macht bei mir einen Fehler:

  Code: Alles auswählen

  DataSection
  	toolbox1:	IncludeBinary "TOOLBOX1.TPU"
  	toolbox2:	IncludeBinary "TOOLBOX2.TPU"
  	ico:		IncludeBinary "tppm.ico"
  EndDataSection

  wird zu

  Code: Alles auswählen

  <font color="#000000">	toolbox1:</font><font color="#006666"><b>	IncludeBinary </b></font><font color="#000000">"TOOLBOX1.TPU"</font><font color="#000000">
  </font><font color="#000000">	toolbox2:</font><font color="#006666"><b>	IncludeBinary </b></font><font color="#000000">"TOOLBOX2.TPU"</font><font color="#000000">
  </font><font color="#000000">	ico:</font><font color="#006666"><b>		IncludeBinary </b></font><font color="#000000">"tppm.ico"</font><font color="#000000">
  </font><font color="#006666"><b>EndDataSection
  </b></font>

  Bei den Toolbox1+2 Zeilen ist vor dem InlcudeBinary im Code zwar ein Tab, dieser wird im Browser aber nicht angezeigt.

Jaja, ich hör ja jetzt auf Und bin gespannt, wie dir meine Ideen gefallen.



// Edit: Sorry, ich wollte dich nicht für dumm verkaufen oder so; ich sehe, dass du das mit der dynamischen Ein- und Ausblendung vias JavaScript bereits hinbekommst (siehe deine HP, wenn man da auf "Beschr. ausklappen" klickt).