🥇Kaip teisingai nuspalvinti kodą Habr ir kodėl tai taip sunku

Prieš kelis mėnesius paskelbiau mano pirmas įrašas apie Habr. Galbūt kai kurie iš jūsų pastebės, kad straipsnyje esantis kodas yra nudažytas neįprastai, o svarbiausia - teisingai nuspalvintas, nepaisant to, kad svetainėje įtaisytas teksto rengyklė nepalaiko originalaus kodo žymėjimo ir dažnai neteisingai išryškina jo elementus. Tuo pačiu metu kodas nėra įterptas su paveikslėliu, kaip tai daro kai kurie visiškai beviltiški rašytojai.

Mano atveju žymėjimo išsaugojimas buvo ypač svarbus, nes straipsnis buvo darbo su kodu aprašymas. Norėdami išspręsti mano sukurtą problemą įrankis, kuri leidžia perkelti kodo paryškinimą pasirinktoje schemoje iš IDEA į straipsnį apie Habré. Pakalbėsiu apie įrankio kūrimo procesą ir jo naudojimo ypatybes.

Kam visa tai

Iš pirmo žvilgsnio gali atrodyti, kad tai daroma iš piktybiškumo, nes standartinis apšvietimas naudojant žymą nėra patenkinamas <source>.

Tam tikra prasme tai, žinoma, tiesa, bet ne visiškai.

Pirma, apšvietimas viduje <source> negali dirbti su kodo dalimis, nes nebus pakankamai informacijos spalvinimui. Visi elementai, kurie nepatenka į kūrinio apimtį, bus nudažyti atsitiktinai. Ši problema neturi sprendimo, nes, kiek žinau, nė viena iš internetinių dažymo paslaugų neleidžia atlikti šių veiksmų:

Įdėkite visą projekto kodą į straipsnį, nerodydami jo viso, arba įterpkite nuorodą į įsipareigojimą „GitHub“. Tam tikrose straipsnio vietose naudokite eilučių ištraukas iš viso kodo (nurodant diapazoną). Šiuo atveju, žinoma, paryškinimas turėtų būti nustatomas remiantis visu kodu.
Aiškiai pateikite neapibrėžtų elementų meta informaciją. Gana sunkus kelias vartotojui, bet aš su tuo sutikčiau.

Antra, apšvietimas viduje <source> niekada nesutaps skirtingų elementų tipų skaičiaus su įprastu IDE. Ir dėl aukščiau aprašytos problemos nėra prasmės daryti išplėstinį spalvinimą: niekas neįterpia viso projekto kodo į straipsnį, todėl ši funkcija neveiks.

Tuo pačiu realybė tokia, kad į straipsnius būtina įterpti kodo fragmentus, ir kuo jie mažesni, tuo geriau.

Galite perskaityti kodą be foninio apšvietimo, bet kodėl?

„Habr“ žymėjimo ypatybės

„IntelliJ IDEA“ turi integruotą kodo eksportavimo į HTML palaikymą. Įprastas kodo kopijavimas įdeda spalvotą kodą į mainų sritį, kurį galima nuskaityti kaip HTML.

Deja, Habras neleidžia naudoti HTML žymėjimo tiesiogiai straipsniuose. To priežastys yra paslaptingos, gaubtos tamsos, bet galbūt taip yra dėl straipsnių tipo suvienodinimo. Leidžiant straipsniuose naudoti HTML, bus galima kompensuoti bet kokias peržiūros problemas, kurios gali kilti.

Apskritai palaikau idėją uždrausti HTML straipsniuose, tačiau yra niuansas. Informacinių technologijų specialistams skirtas šaltinis, kuriame dažnai kalbama apie kodą ir nėra galimybės jo teisingai įterpti į straipsnį, yra kažkaip keistas.

Taigi, mes turime žymes , , . Be to, visa tai veikia žymos viduje <code>, kuris reikalingas formatavimui. Na   Mes taip pat jį išsaugojome, o tai naudinga ilgoms kodo eilutėms ir įtraukoms.

Nereikia nė sakyti, kad visi standartiniai būdai gauti HTML kodą iš IDEA sukuria visiškai skirtingą HTML, todėl laukia daug konvertavimo darbų.

Požiūris

Visų pirma, verta pasakyti padėkos žodį autoriui. capslocky jo medžiaga šia tema. Straipsnyje pasiūlytos priemonės tiesiogiai nenaudojau ir vargu ar ji būtų pasiteisinusi, tačiau šios medžiagos dėka supratau visą problemos gilumą ir tuo pačiu pajutau vilties vėją.

Vienintelis šio leidinio neigiamas aspektas yra didelis kodo kiekis kartu su labai menku paaiškinimu, ką jis daro ir kodėl.

Pabandysiu ištaisyti situaciją ir aprašyti, ką turėsite daryti su savo HTML žymėjimo kodu, jei norite jį perkelti į formą, paruoštą įterpti į Habr.

Prieš eksportuodami, turite, pavyzdžiui, IDEA nustatyti norimą spalvų schemą iš „Color Themes“ svetainės. Kodas bus eksportuotas su pasirinkta schema. Geriau pasirinkti schemą su baltu fonu (nes Habr fone negalima nustatyti) ir be pabraukimų. Nesugalvojau, kaip juos lengvai nutempti, nes nelabai norėjau.
Dirbame tik su etiketės vidinėmis dalimis <pre>. Net jei naudojate eksportą ne iš IDEA, o iš kito, greičiausiai HTML žymėjime bus ši žyma, nes be jos sunku teisingai suformatuoti kodą. Pašaliname pačią žymą, pakeisdami ją <code>.
Tekstas greičiausiai bus pateiktas kaip sąrašas  su skirtingais stiliais. Turėsime jų visų atsikratyti. Daugelis spalvinimo paslaugų sutraukia stilius į stiliaus lapą, kuris yra logiškas, ir naudoja nuorodas į stilių pavadinimus. IDEA to dar specialiai nedaro, todėl užduotis yra šiek tiek lengvesnė (stiliaus nustatymai yra tinkami ).
Nustatykite šrifto spalvą naudodami žymą . Deja, neįmanoma nustatyti fono spalvos.
Nuosavybė font-style:italic paverskite jį keliomis žymomis Ir font-weight:bold - į .
Pakeiskite visas erdves su  .
Eilučių vertimai formoje   pakeisti n.
HTML žymėjimas programoje IDEA sukuria tuščias eilutes su stiliais ir tarpus su stiliais. Tokius stilius geriau išmesti: tai labai sumažins kodo ilgį ir padidins kodo suprantamumą.
Užtikriname, kad eilučių lūžiai neturi jokio stiliaus. Priešingu atveju bus problemų dėl tuščių eilučių.

Paskutinį tašką iliustruosiu pavyzdžiu:

<code>
1
2
</code>

Šį kodą Habras pavers į 12. Tas pats pasakytina ir apie etiketes  и , taip pat bet kokie jų deriniai. Eilučių lūžiai neturėtų turėti stiliaus, tada viskas bus gerai.

Vykdymas

Iš pradžių užduotis parašyti savavališko HTML kodo konverterį man atrodė gana sudėtinga. Tačiau jei padarysite sprendimą konkrečiam HTML variantui, tada viskas pasirodo ne taip jau blogai. Viską pavyko padaryti naudojant gryną RegExp, tai yra net be HTML analizavimo. Paaiškėjo, kad pagrindinė problema yra Habr žymėjimo ypatybių nustatymas.

Kad eilučių lūžiai neturėtų stilių, turėjome atlikti keletą gana sudėtingų pakeitimų, kurie tikriausiai yra labiausiai nesuprantami (žr. funkciją popupBr). Idėja ta, kad žymės   po kiekvieno pakeitimo jie „iššokdavo“ iš formatavimo žymų gelmių į išorę. Taigi, po visų žymų keitimų   pasirodo neformatuotas.

Be to, paaiškėjo, kad IDEA į mainų sritį įdeda ne tik raiškųjį tekstą, bet ir gana sudėtingus objektus, pvz. application/x-java-jvm-local-objectref. Bėda ta, kad tokių objektų buvimas iškarpinėje sukelia nuolatines klaidas mano konsolėje kuriant DataFlavor. Deja, nieko negalite padaryti: būtent taip JDK veikia su iškarpine. Man tai buvo apreiškimas tai yra kodas. Matyt, protingi vaikinai, kurie tai parašė, mano, kad viskas bus gerai. Apskritai, nebijokite klaidų, kurios gali atsirasti dirbant su įrankiu.

Projektas parašytas Kotlin ir gyvuoja GitHub.

Labai laukiami pasiūlymai dėl tobulinimo! Pavyzdžiui, būtų malonu sukurti šį įrankį kaip IDEA įskiepį. Dar neradau paprasto būdo tai padaryti: įskiepio Copy as HTML šaltiniai, deja, yra uždaryti, o sugalvoti, kaip parašyti tokį įskiepį nuo nulio, užtrunka per ilgai.

Apklausoje gali dalyvauti tik registruoti vartotojai. Prisijungti, Prašau.