🥇Kā pareizi iekrāsot kodu Habr un kāpēc tas ir tik grūti

Pirms dažiem mēnešiem es publicēju mans pirmais ieraksts Vietnē Habr. Daži no jums, iespējams, pamanīs, ka rakstā esošais kods ir iekrāsots neparastā krāsā, un pats galvenais, tas ir iekrāsots pareizi, neskatoties uz to, ka vietnes iebūvētais teksta redaktors neatbalsta sākotnējo koda iezīmēšanu un bieži vien nepareizi izceļ tā elementus. Turklāt kods nav ievietots kā attēls, kā to dara daži izmisuši rakstnieki.

Manā gadījumā iezīmējuma saglabāšana bija īpaši svarīga, jo rakstā bija aprakstīts, kā strādāt ar kodu. Lai atrisinātu problēmu, es izveidoju instruments, kas ļauj pārnest koda izcelšanu atlasītajā IDEA diagrammā uz rakstu par Habr. Es apspriedīšu rīka izveides procesu un tā lietošanas specifiku.

Kāpēc tas viss?

No pirmā acu uzmetiena var šķist, ka tas tiek darīts palaidnības dēļ, vienkārši tāpēc, ka standarta fona apgaismojums, kas ieviests, izmantojot tagu, nav apmierinošs. <source>.

Savā ziņā tas noteikti ir taisnība, bet ne pilnībā.

Pirmkārt, apgaismojums iekšpusē <source> Tas nevar darboties ar koda fragmentiem, jo nebūs pietiekami daudz informācijas krāsošanai. Visi elementi, kas deklarēti ārpus fragmenta, tiks iekrāsoti nejauši. Šai problēmai nav risinājuma, jo, cik man zināms, neviens no tiešsaistes krāsošanas pakalpojumiem neļauj veikt nevienu no šīm darbībām:

Ievietojiet rakstā pilnu projekta kodu, to nerādot pilnībā, vai iekļaujiet saiti uz GitHub commit. Atsevišķās raksta vietās izmantojiet fragmentus no pilna koda (ar norādītu diapazonu). Izcelšanai, protams, jābalstās uz pilnu kodu.
Sniedziet skaidrus metadatus nedefinētiem elementiem. Lietotājam tas ir diezgan sarežģīts ceļš, bet es tam piekrītu.

Otrkārt, apgaismojums iekšpusē <source> Tas nekad nesakritīs ar standarta IDE dažādo elementu tipu skaitu. Un iepriekš aprakstītās problēmas dēļ nav jēgas ieviest uzlabotu krāsošanu: neviens neielīmē pilnu projekta kodu rakstā, tāpēc šī funkcionalitāte nedarbosies.

Tajā pašā laikā realitātē rakstos ir jāiekļauj koda fragmenti, un jo mazāki tie ir, jo labāk.

Kodu ir iespējams nolasīt bez iezīmēšanas, bet kāpēc?

Habr iezīmēšanas iezīmes

IntelliJ IDEA ir iebūvēts atbalsts koda eksportēšanai uz HTML. Vienkārši kopējot kodu, krāsainais kods tiek pievienots starpliktuvei, ko var nolasīt kā HTML.

Diemžēl Habr neļauj HTML iezīmēšanu tieši rakstos. Iemesli tam ir neskaidri, bet tas, iespējams, ir saistīts ar rakstu formātu standartizāciju. HTML atļaušana rakstos, visticamāk, radītu problēmas ar skatīšanos.

Kopumā es atbalstu ideju par HTML aizliegšanu rakstos, taču ir viens brīdinājums. IT speciālistiem paredzēts resurss, kurā bieži tiek apspriests kods, taču nav iespējas to pareizi ievietot rakstā, ir nedaudz dīvains.

Tātad, mūsu rīcībā ir birkas , , Turklāt tas viss darbojas taga iekšpusē. <code>, kas ir nepieciešams formatēšanai. Nu, un   Mēs to arī saglabājām, kas ir noderīgi garām koda rindām un atkāpēm.

Lieki piebilst, ka visas standarta metodes HTML koda iegūšanai no IDEA rada pilnīgi atšķirīgu HTML, tāpēc konvertēšanas darbs prasīs daudz darba.

Pieeja

Pirmkārt, ir vērts pateikt pateicības vārdus autoram. burtu bloķēšana viņa labā materiāls par šo tēmu. Es neizmantoju rakstā piedāvāto rīku tieši, un maz ticams, ka man tas arī būtu izdevies, taču, pateicoties šim materiālam, es sapratu problēmas pilno dziļumu un vienlaikus sajutu cerības dzirksti.

Vienīgais šī ieraksta trūkums ir lielais koda apjoms apvienojumā ar ļoti maz skaidrojumu par to, ko tas dara un kāpēc.

Es centīšos labot situāciju un aprakstīšu, kas jums būs jādara ar HTML koda iezīmēšanu, ja vēlaties to iegūt formātā, kas ir gatavs ielīmēšanai Habr.

Pirms eksportēšanas IDEA jāiestata vēlamā krāsu shēma, piemēram no Krāsu tēmu tīmekļa vietnesKods tiks eksportēts ar atlasīto shēmu. Vislabāk ir izvēlēties shēmu ar baltu fonu (jo fonus nevar iestatīt Habr valodā) un bez pasvītrojumiem. Es nevarēju saprast, kā tos viegli pārvilkt, jo īsti to negribēju.
Mēs strādājam tikai ar birkas iekšējām daļām <pre>Pat ja izmantojat citu eksportēšanas rīku, nevis IDEA, jūsu HTML iezīmējumā, visticamāk, būs šis tags, jo bez tā ir grūti pareizi formatēt kodu. Noņemiet pašu tagu un aizstājiet to ar <code>.
Teksts, visticamāk, tiks attēlots saraksta veidā.  ar dažādiem stiliem. Jums būs jāatbrīvojas no tiem visiem. Daudzi krāsošanas pakalpojumi apvieno stilus stila lapā, kas ir loģiski, un izmanto atsauces uz stilu nosaukumiem. IDEA to vēl nedara, kas nedaudz atvieglo uzdevumu (stila iestatījumi atrodas tieši ).
Mēs iestatām fonta krāsu, izmantojot tagu Diemžēl fona krāsu nav iespējams iestatīt.
Īpašums font-style:italic pārvērtīsim to pāris tagos Un font-weight:bold - plkst .
Aizstāt visas atstarpes ar  .
Rindas pārtraukumi formā   aizstāt ar n.
Veidojot HTML iezīmēšanu programmā IDEA, jūs iegūsiet tukšas rindas ar stiliem un rindas ar atstarpēm ar stiliem. Vislabāk ir noņemt šos stilus: tas ievērojami samazinās koda garumu un uzlabos tā skaidrību.
Mēs pārliecināmies, ka rindiņu pārtraukumiem nav nekāda stila. Pretējā gadījumā radīsies problēmas ar tukšām rindām.

Pēdējo punktu es ilustrēšu ar piemēru:

<code>
1
2
</code>

Habr konvertēs šo kodu uz 12Tas pats attiecas uz tagiem.  и , kā arī jebkādas to kombinācijas. Rindu pārtraukumiem jābūt bez stila, un tad viss būs kārtībā.

Ieviešana

Sākumā patvaļīga HTML koda pārveidotāja rakstīšana šķita diezgan sarežģīta. Tomēr, ja risinājumu pielāgo konkrētam HTML variantam, viss nav tik slikti. Man izdevās visu izdarīt, izmantojot tīru regulāro izteiksmi (RegExp), tas ir, pat neparsējot HTML. Galvenā problēma izrādījās "Habr" iezīmēšanas specifikas identificēšana.

Lai izvairītos no stiliem rindiņu pārtraukumos, man bija jāveic daži diezgan sarežģīti aizstāšanas veidi, kas, iespējams, ir vismulsinošākie (skatiet popupBr funkciju). Ideja ir izveidot tagus   Pēc katras aizstāšanas tie "izcēlās" no formatēšanas tagu dzīlēm. Tādējādi pēc visām aizstāšanām tags   šķiet, ka tas ir ārpus formatējuma.

Turklāt izrādījās, ka IDEA ievieto starpliktuvē ne tikai bagātināto tekstu (Rich Text), bet arī diezgan sarežģītus objektus, piemēram, application/x-java-jvm-local-objectrefProblēma ir tā, ka šādu objektu klātbūtne starpliktuvē manā konsolē rada pastāvīgas kļūdas, veidojot DataFlavor. Diemžēl es neko nevaru darīt: JDK vienkārši tā apstrādā starpliktuvi. šāds kodsAcīmredzot gudrie puiši, kas to uzrakstīja, domā, ka tas derēs. Īsāk sakot, neuztraucieties par kļūdām, kas var rasties, strādājot ar šo rīku.

Projekts ir rakstīts Kotlin valodā un turpina pastāvēt. GitHub.

Ieteikumi uzlabojumiem ir ļoti gaidīti! Piemēram, būtu lieliski ieviest šo rīku kā IDEA spraudni. Es vēl neesmu atradis vienkāršu veidu, kā to izdarīt: spraudnis “Kopēt kā HTML” diemžēl ir slēgtā koda, un izdomāt, kā uzrakstīt šādu spraudni no nulles, būtu pārāk laikietilpīgi.

Aptaujā var piedalīties tikai reģistrēti lietotāji. Ielogoties, lūdzu.