Vor ein paar Monaten habe ich
meinen ersten Beitrag auf Habré veröffentlicht. Vielleicht werden einige von Ihnen feststellen, dass der Code im Artikel auf ungewöhnliche Weise und vor allem korrekt gefärbt ist, obwohl der integrierte Texteditor auf der Website das ursprüngliche Markup des Codes nicht unterstützt und seine Elemente häufig falsch hervorhebt. Gleichzeitig wird der Code nicht in das Bild eingefügt, wie es einige völlig verzweifelte Schriftsteller tun.
In meinem Fall war es besonders wichtig, das Markup beizubehalten, da der Artikel eine Beschreibung der Arbeit mit dem Code enthielt. Um das Problem zu lösen, habe ich ein
Tool erstellt , mit dem Sie die Code-Hervorhebung im ausgewählten Schema von IDEA auf einen Artikel über Habré übertragen können. Ich werde über den Prozess der Erstellung eines Tools und die Funktionen seiner Verwendung sprechen.
Warum das alles?
Auf den ersten Blick scheint es, dass dies aus Unfug geschieht, einfach weil die durch das
<source> -Tag implementierte Standardbeleuchtung nicht passt.
In gewisser Weise ist dies natürlich wahr, aber nicht ganz.
Erstens kann die Hervorhebung in der
<source> nicht mit Codeteilen funktionieren, da nicht genügend Informationen zum Färben vorhanden sind. Alle außerhalb des Geltungsbereichs des Stücks deklarierten Elemente werden nach dem Zufallsprinzip gemalt. Dieses Problem hat keine Lösung, da meines Wissens keiner der Dienste für Online-Färbung eine der folgenden Aktionen ermöglicht:
- Fügen Sie den vollständigen Projektcode in den Artikel ein, ohne ihn vollständig anzuzeigen, oder fügen Sie den Link zum Commit auf GitHub ein. Verwenden Sie an bestimmten Stellen im Artikel Zeilenausschnitte aus dem vollständigen Code (mit einem Bereich). In diesem Fall sollte die Hintergrundbeleuchtung natürlich anhand des vollständigen Codes bestimmt werden.
- Geben Sie explizite Metainformationen für undefinierte Elemente an. Ein ziemlich schwieriger Weg für den Benutzer, aber ich würde so etwas zustimmen.
Zweitens entspricht die Hervorhebung in der
<source> niemals der Anzahl der verschiedenen Elementtypen mit einer regulären IDE. Und aufgrund des oben beschriebenen Problems macht es keinen Sinn, erweiterte Farben zu erstellen: Niemand fügt den vollständigen Projektcode in den Artikel ein, sodass diese Funktionalität nicht funktioniert.
Gleichzeitig ist die Realität, dass Codeteile in Artikel eingefügt werden müssen, und je kleiner sie sind, desto besser.
Sie können den Code lesen, ohne ihn hervorzuheben, aber warum.
Eigenschaften von Habr
IntelliJ IDEA bietet integrierte Unterstützung für den Export von Code nach HTML. Durch regelmäßiges Kopieren des Codes wird in die Zwischenablage verschoben, einschließlich farbigem Code, der als HTML gelesen werden kann.
Leider erlaubt Habr die direkte Verwendung von HTML-Markups in Artikeln nicht. Die Gründe dafür sind ein Rätsel, das in der Dunkelheit verborgen ist, aber vielleicht liegt dies an der Vereinheitlichung des Erscheinungsbilds der Artikel. Wenn Sie die Verwendung von HTML in Artikeln zulassen, können Sie dies nachholen, sodass Probleme beim Anzeigen auftreten.
Ich unterstütze im Allgemeinen die Idee, HTML in Artikeln zu verbieten, aber es gibt eine Einschränkung. Eine Ressource für IT-Experten, in der Code häufig diskutiert wird und es keine Möglichkeit gibt, ihn korrekt in einen Artikel einzufügen, ist irgendwie seltsam.
Wir haben also die Tags
<b> ,
<i> ,
<font> . Darüber hinaus funktioniert dies alles innerhalb des
<code> , das für die Formatierung benötigt wird. Nun,
; Sie haben uns auch gerettet, was für lange Codezeilen und Einrückungen nützlich ist.
Es ist unnötig zu erwähnen, dass alle Standardmethoden zum Abrufen von HTML-Code von IDEA überhaupt kein solches HTML enthalten, sodass die Konvertierungsarbeit ziemlich umfangreich sein wird.
Der Ansatz
Zunächst lohnt es sich, dem Autor
capslocky für sein
Material zu diesem Thema zu
danken . Ich habe das im Artikel vorgeschlagene Tool nicht direkt verwendet, und es wäre kaum passiert, aber dank dieses Materials habe ich die gesamte Tiefe des Problems verstanden und gleichzeitig den Wind der Hoffnung gespürt.
Das einzige Minus dieser Veröffentlichung ist die große Menge an Code, kombiniert mit einer sehr mageren Erklärung dessen, was es tut und warum.
Ich werde versuchen, die Situation zu korrigieren und zu beschreiben, was Sie mit Ihrem HTML-Markup tun müssen, wenn Sie es in ein Formular bringen möchten, das zum Einfügen in Habr bereit ist.
- Vor dem Export müssen Sie das gewünschte Farbschema in IDEA festlegen, z. B. auf der Website für Farbthemen . Der Code wird mit dem ausgewählten Schema exportiert. Es ist besser, ein Schema mit weißem Hintergrund (da der Hintergrund auf dem Habré nicht eingestellt werden kann) und ohne Unterstreichung zu wählen. Ich habe nicht daran gedacht, wie einfach es ist, sie zu ziehen, weil ich es nicht wirklich wollte.
- Wir arbeiten nur mit den Interna des
<pre> . Selbst wenn Sie den Export nicht aus IDEA, sondern aus einem anderen verwenden, wird dieses Tag wahrscheinlich im HTML-Markup enthalten sein, da es ohne es schwierig ist, den Code korrekt zu formatieren. Das Tag selbst wird entfernt und durch <code> . - Der Text wird höchstwahrscheinlich als
<span> mit verschiedenen Stilen dargestellt. Sie müssen alle loswerden. Viele Maldienste bringen Stile in ein Stylesheet, was logisch ist, und verwenden Links zu Stilnamen. Insbesondere macht IDEA dies noch nicht, was die Aufgabe etwas erleichtert (Stileinstellungen liegen direkt im <span> ). - Stellen Sie die Schriftfarbe über das
<font> . Leider kann die Hintergrundfarbe nicht eingestellt werden. - Wir verwandeln die Eigenschaft
font-style:italic in ein Paar von <i> </i> -Tags und font-weight:bold in <b> </b> . - Ersetzen Sie alle Leerzeichen durch
; . - Zeilenumbrüche in Form von
<br> durch \n . - HTML-Markup in IDEA erzeugt Leerzeilen mit Stilen und Leerzeichen aus Leerzeichen mit Stilen. Es ist besser, solche Stile wegzuwerfen: Dies verringert die Länge erheblich und erhöht die Verständlichkeit des Codes.
- Stellen Sie sicher, dass Zeilenvorschübe keinen Stil haben. Andernfalls treten Probleme mit Leerzeilen auf.
Der letzte Absatz wird durch ein Beispiel veranschaulicht:
<code>1 <font color="000000"></font> 2</code>Der angegebene Code wird von "Habr" in
12 . Gleiches gilt für die Tags
<b> und
<i> sowie für jede Kombination davon. Zeilenumbrüche sollten keinen Stil haben, und dann ist alles in Ordnung.
Implementierung
Die Aufgabe, einen Konverter für beliebigen HTML-Code zu schreiben, erschien mir zunächst ziemlich kompliziert. Wenn Sie sich jedoch für eine bestimmte HTML-Version entscheiden, ist nicht alles so schlecht. Ich habe es geschafft, alles auf reinem RegExp zu machen, das heißt, auch ohne HTML-Analyse. Das Hauptproblem bestand darin, die Merkmale des Markups "Habr" zu identifizieren.
Damit Zeilenvorschübe keine Stile hatten, musste ich ziemlich knifflige Ersetzungen vornehmen, die wahrscheinlich am unverständlichsten sind (siehe die Funktion popupBr). Die Idee ist, dass die Tags
<br> nach jedem Austausch aus der Tiefe der Formatierungs-Tags nach außen "auftauchen". Daher ist das Tag
<br> nach allen Ersetzungen nicht mehr formatiert.
Darüber hinaus stellte sich heraus, dass IDEA nicht nur Rich Text in die Zwischenablage
application/x-java-jvm-local-objectref , sondern auch ziemlich knifflige Objekte wie
application/x-java-jvm-local-objectref . Das Problem ist, dass das Vorhandensein solcher Objekte in der Zwischenablage zu dauerhaften Fehlern in meiner Konsole beim Erstellen von DataFlavor führt. Leider können Sie nichts tun: JDK funktioniert nur mit der Zwischenablage. Für mich war die Entdeckung eines
solchen Codes eine Entdeckung. Anscheinend glauben die klugen Onkel, die dies geschrieben haben, dass es funktionieren wird. Haben Sie im Allgemeinen keine Angst vor Fehlern, die bei der Arbeit mit dem Werkzeug auftreten können.
Das Projekt ist in Kotlin geschrieben und lebt auf
GitHub .
Verbesserungsvorschläge sind willkommen! Zum Beispiel wäre es schön, dieses Tool als Plugin für IDEA zu entwerfen. Ich habe noch keinen einfachen Weg gefunden, dies zu tun: Die Quellen des Plugins "Als HTML kopieren" sind leider geschlossen, und es dauert zu lange, um herauszufinden, wie man ein solches Plugin von Grund auf neu schreibt.