🥇Wéi een op Habr richteg faarwt a firwat et sou schwéier ass

Virun e puer Méint hunn ech publizéiert meng éischt Post op Habr. Vläicht e puer vun iech bemierken datt de Code am Artikel op eng ongewéinlech Manéier faarweg ass, an am wichtegsten ass et richteg faarweg, trotz der Tatsaach datt den agebauten Texteditor op der Säit net den ursprénglechen Codemarkup ënnerstëtzt an dacks beliicht seng Elementer falsch. Zur selwechter Zäit gëtt de Code net mat engem Bild agebaut, wéi e puer komplett verzweifelte Schrëftsteller maachen.

A mengem Fall war d'Späichere vum Markup besonnesch wichteg well den Artikel eng Beschreiwung war fir um Code ze schaffen. Fir de Problem ze léisen, deen ech erstallt hunn Instrument, wat Iech erlaabt Code Highlight an engem ausgewielten Schema vun IDEA op en Artikel iwwer Habré ze transferéieren. Ech wäert iwwer de Prozess vun der Schafung vum Tool schwätzen an d'Features vu senger Benotzung.

Fir wat ass dat alles

Op den éischte Bléck kann et schéngen datt dëst aus Mëssbrauch gemaach gëtt, einfach well d'Standardbeliichtung, déi duerch den Tag implementéiert ass, net zefriddestellend ass <source>.

An engem Sënn ass dëst natierlech richteg, awer net ganz.

Als éischt d'Beliichtung dobannen <source> kann net mat Stécker vum Code schaffen, well et gëtt net genuch Informatioun fir Faarwen. All Elementer, déi ausserhalb vum Ëmfang vum Stéck deklaréiert sinn, ginn zoufälleg gemoolt. Dëse Problem huet keng Léisung, well, souwäit ech weess, keng vun den Online-Faarwen Servicer erlaben Iech eng vun den folgenden ze maachen:

Füügt de ganze Projetcode an den Artikel an ouni et a senger ganzer ze weisen, oder setzt e Link op eng Verpflichtung op GitHub. Op spezifesch Plazen am Artikel benotzt Linn Auszich aus der ganzer Code (beweist der Gamme). An dësem Fall soll d'Highlighting op Basis vum komplette Code bestëmmt ginn, natierlech.
Gitt explizit Meta Informatioun fir ondefinéiert Elementer. Zimlech e schwéiere Wee fir de Benotzer, awer ech géif dat averstanen.

Zweetens, d'Beliichtung dobannen <source> wäert ni d'Zuel vun verschidden Element Zorte mat enger regulärer IDE Match. A wéinst dem uewe beschriwwene Problem ass et kee Sënn fir fortgeschratt Faarwen ze maachen: keen setzt de ganze Projetcode an den Artikel, sou datt dës Funktionalitéit net funktionnéiert.

Zur selwechter Zäit ass d'Realitéit datt et néideg ass Stécker vum Code an Artikelen anzeginn, a wat se méi kleng sinn, wat besser.

Dir kënnt de Code ouni Géigeliicht liesen, mee firwat?

Fonctiounen vun "Habr" Markup

IntelliJ IDEA huet gebaut-an Ënnerstëtzung fir exportéieren Code op HTML. Normal Kopie vum Code setzt de faarwege Code op de Clipboard, deen als HTML gelies ka ginn.

Leider erlaabt Habr net HTML Markup direkt an Artikelen ze benotzen. D'Grënn dofir sinn e Geheimnis, an der Däischtert gehäit, awer vläicht ass dëst wéinst der Vereenegung vun der Art vun Artikelen. Andeems Dir HTML erlaabt an Artikelen ze benotzen, ass et méiglech fir all Gesiichtsprobleemer ze kompenséieren déi optrieden.

Ech ënnerstëtzen allgemeng d'Iddi fir HTML an Artikelen ze verbannen, awer et gëtt eng Nuance. Eng Ressource fir IT-Spezialisten, wou Code dacks diskutéiert gëtt an et kee Wee gëtt et richteg an en Artikel ze setzen ass iergendwéi komesch.

Also, mir hunn Tags zur Verfügung , , . Zousätzlech funktionnéiert dat alles am Tag <code>, déi fir Formatéierung gebraucht gëtt. Gutt   Mir hunn et och gespäichert, wat nëtzlech ass fir laang Zeilen vu Code an Indentatiounen.

Noutlosegkeet ze soen, all Standard Weeër fir HTML Code vun IDEA ze kréien, produzéieren komplett verschidden HTML, sou datt et vill Konversiounsaarbecht ass.

Eng Approche

Éischt vun all, ass et derwäert e Wuert vun Dankbarkeet dem Auteur ze soen. capslocky fir seng Stuff zu dësem Thema. Ech hunn d'Tool net direkt am Artikel proposéiert, an et ass onwahrscheinlech datt et geschafft hätt, awer dank dësem Material hunn ech d'Tiefe vum Problem verstanen a gläichzäiteg de Wand vun der Hoffnung gefillt.

Déi eenzeg negativ vun dëser Verëffentlechung ass déi grouss Quantitéit vu Code kombinéiert mat enger ganz sparsam Erklärung vu wat et mécht a firwat.

Ech probéieren d'Situatioun ze korrigéieren an ze beschreiwen wat Dir mat Ärem HTML-Markup-Code ze dinn hutt, wann Dir en an e Formulaire wëllt bréngen, prett fir an Habr agebaut ze ginn.

Ier Dir exportéiert, musst Dir zum Beispill de gewënschten Faarfschema an IDEA setzen vun Faarf Themen Websäit. De Code gëtt mat dem gewielte Schema exportéiert. Et ass besser e Schema mat engem wäissen Hannergrond ze wielen (well den Hannergrond net op Habr gesat ka ginn) an ouni Ënnersträicher. Ech hunn net erausfonnt wéi ech se einfach zéien, well ech net wierklech wollt.
Mir schaffen nëmme mat der Innere vum Tag <pre>. Och wann Dir Export benotzt net vun IDEA, awer vun engem aneren, gëtt et wahrscheinlech dësen Tag an der HTML Markup, well ouni et ass et schwéier de Code korrekt ze formatéieren. Mir läschen de Tag selwer, ersetzen se mat <code>.
Den Text gëtt héchstwahrscheinlech als Lëscht presentéiert  mat verschiddene Stiler. Mir mussen se all lassloossen. Vill Faarfservicer zerbriechen Stiler an e Stilblat, wat logesch ass, a benotzen Referenzen op Stilnimm. IDEA mécht dëst nach net spezifesch, wat d'Aufgab e bësse méi einfach mécht (d'Stylastellunge si richteg ).
Setzt d'Schrëftfaarf mat engem Tag . Leider ass et net méiglech d'Hannergrondfaarf ze setzen.
Immobilie font-style:italic verwandelt et an e puer Tags an font-weight:bold - an .
Ersat all Plaze mat  .
String Iwwersetzungen an der Form   ersetzen mat n.
HTML Markup an IDEA produzéiert eidel Linnen mat Stiler a Linne vu Raum mat Stiler. Et ass besser esou Stiler ze geheien: dëst wäert d'Längt staark reduzéieren an d'Verständlechkeet vum Code erhéijen.
Mir suergen dofir datt Linnebrieche kee Stil hunn. Soss gëtt et Problemer mat eidel Linnen.

Ech wäert de leschte Punkt mat engem Beispill illustréieren:

<code>
1
2
</code>

Dëse Code gëtt vum Habr ëmgewandelt 12. Dat selwecht gëllt fir Tags  и , wéi och all Kombinatioune vun hinnen. Linn Break soll kee Stil hunn, an da wäert alles gutt sinn.

Ëmsetzung

Am Ufank war d'Aufgab fir e Konverter fir arbiträr HTML Code ze schreiwen zimlech schwéier fir mech. Wéi och ëmmer, wann Dir eng Léisung fir eng spezifesch HTML Variant maacht, da gëtt alles net sou schlecht. Ech hunn et fäerdeg bruecht alles mat pure RegExp ze maachen, dat ass, och ouni HTML Parsing. Den Haaptproblem huet sech erausgestallt fir d'Features vun der Habr Markup z'identifizéieren.

Fir ze verhënneren datt d'Linn Pausen Stiler hunn, hu mir e puer zimlech komplizéiert Ersatzstécker misse maachen, déi wahrscheinlech am meeschte onverständlech sinn (kuckt d'PopupBr Funktioun). D'Iddi ass datt d'Tags   no all Ersatz sinn se aus der Tiefe vun den Formatéierungstags no baussen "opgesprongen". Also, no all Tag Ersatz   erschéngt aus der Formatéierung.

Zousätzlech huet et sech erausgestallt datt IDEA net nëmme Rich Text op de Clipboard setzt, mee och zimlech komplizéiert Objete wéi application/x-java-jvm-local-objectref. De Problem ass datt d'Präsenz vun esou Objeten op der Clipboard zu konstante Feeler a menger Konsole féiert iwwer d'Konstruktioun vun DataFlavor. Leider ass et näischt wat Dir maache kënnt: dat ass just wéi d'JDK mam Clipboard funktionnéiert. Et war eng Offenbarung fir mech ze hunn dëst ass de Code. Anscheinend denken déi schlau Kärelen, déi dëst geschriwwen hunn, datt et gutt geet. Am Allgemengen, fäert net vu Feeler, déi kënne geschéien wann Dir mam Tool schafft.

De Projet ass zu Kotlin geschriwwen a lieft weider GitHub.

Verbesserungsvirschléi sinn häerzlech wëllkomm! Zum Beispill wier et flott dëst Tool als Plugin fir IDEA ze designen. Ech hunn nach keen einfache Wee fonnt fir dëst ze maachen: d'Quellen vum Kopéieren als HTML Plugin sinn leider zou, an erauszefannen wéi ee sou e Plugin vun Null schreift dauert ze laang.

Nëmme registréiert Benotzer kënnen un der Ëmfro deelhuelen. Umellen, wann ech glift.