🥇Jak udělat správné vybarvení kódu na "Habr" a proč je to tak těžké

Před několika měsíci jsem publikoval můj první příspěvek na Habr. Možná si někteří z vás všimnou, že kód v článku je obarven nezvyklým způsobem, a co je nejdůležitější, je obarven správně, přestože vestavěný textový editor na webu nepodporuje původní označení kódu a často nesprávně zvýrazní své prvky. Kód přitom není vložen s obrázkem, jak to někteří naprosto zoufalí pisálci dělají.

V mém případě bylo uložení označení obzvláště důležité, protože článek byl popisem práce na kódu. K vyřešení problému, který jsem vytvořil инструмент, který umožňuje přenést zvýraznění kódu ve vybraném schématu z IDEA do článku na Habré. Budu mluvit o procesu vytváření nástroje a vlastnostech jeho použití.

K čemu to všechno je

Na první pohled se může zdát, že je to děláno z nekalosti, jednoduše proto, že standardní osvětlení implementované přes tag není uspokojivé <source>.

V jistém smyslu je to samozřejmě pravda, ale ne úplně.

Za prvé, osvětlení uvnitř <source> nemůže pracovat s kousky kódu, protože nebude dostatek informací pro vybarvení. Všechny prvky deklarované mimo rozsah kusu budou natřeny náhodně. Tento problém nemá žádné řešení, protože pokud vím, žádná z online služeb barvení vám neumožňuje provádět žádné z následujících:

Vložte celý kód projektu do článku, aniž byste jej zobrazili celý, nebo vložte odkaz na odevzdání na GitHubu. Na konkrétních místech v článku použijte úryvky řádků z celého kódu (s uvedením rozsahu). V tomto případě by zvýraznění mělo být určeno samozřejmě na základě úplného kódu.
Explicitně poskytnout metainformace pro nedefinované prvky. Pro uživatele docela náročná cesta, ale s tímto bych souhlasil.

Za druhé, osvětlení uvnitř <source> nikdy nebude odpovídat počtu různých typů prvků s běžným IDE. A kvůli výše popsanému problému nemá smysl dělat pokročilé barvení: nikdo nevloží celý kód projektu do článku, takže tato funkce nebude moci fungovat.

Realita je přitom taková, že do článků je potřeba vkládat kousky kódu a čím jsou menší, tím lépe.

Kód můžete přečíst bez podsvícení, ale proč?

Vlastnosti označení "Habr".

IntelliJ IDEA má vestavěnou podporu pro export kódu do HTML. Normální kopírování kódu umístí barevný kód do schránky, kterou lze číst jako HTML.

Habr bohužel neumožňuje používat HTML značky přímo v článcích. Důvody jsou záhadou, zahalenou temnotou, ale možná je to způsobeno sjednocením typu článků. Povolením použití HTML v článcích bude možné vyrovnat případné problémy se zobrazením, které mohou nastat.

Obecně podporuji myšlenku zákazu HTML v článcích, ale existuje nuance. Zdroj pro IT specialisty, kde se často diskutuje o kódu a neexistuje způsob, jak jej správně vložit do článku, je nějak zvláštní.

Takže máme k dispozici značky , , . To vše navíc funguje uvnitř tagu <code>, který je potřebný pro formátování. Studna   Také jsme to uložili, což je užitečné pro dlouhé řádky kódu a odsazení.

Netřeba dodávat, že všechny standardní způsoby, jak získat HTML kód od IDEA, produkují úplně jiné HTML, takže je před námi spousta práce na převodu.

Přístup

Především stojí za to poděkovat autorovi. capslocky pro něj materiál na toto téma. Nástroj navržený v článku jsem přímo nepoužil a je nepravděpodobné, že by fungoval, ale díky tomuto materiálu jsem pochopil celou hloubku problému a zároveň jsem pocítil vítr naděje.

Jediným negativem této publikace je velké množství kódu v kombinaci s velmi řídkým vysvětlením toho, co dělá a proč.

Pokusím se situaci napravit a popsat, co budete muset udělat s kódem HTML značky, pokud jej chcete přenést do formuláře připraveného k vložení do Habr.

Před exportem je potřeba nastavit požadované barevné schéma např. v IDEA z webu Color Themes. Kód bude exportován se zvoleným schématem. Je lepší zvolit schéma s bílým pozadím (protože pozadí nelze nastavit na Habr) a bez podtržení. Nepřišel jsem na to, jak je snadno přetáhnout, protože jsem to opravdu nechtěl.
Pracujeme pouze s vnitřky tagu <pre>. I když použijete export nikoli z IDEA, ale nějakého jiného, pravděpodobně tento tag v HTML značce bude, protože bez něj je obtížné kód správně naformátovat. Odstraníme samotnou značku a nahradíme ji <code>.
Text bude pravděpodobně prezentován jako seznam  s různými styly. Budeme se jich muset všech zbavit. Mnoho barvicích služeb sbaluje styly do šablony stylů, což je logické, a používá odkazy na názvy stylů. IDEA to zatím konkrétně nedělá, což tento úkol poněkud usnadňuje (nastavení stylu je přímo v ).
Nastavte barvu písma pomocí značky . Bohužel není možné nastavit barvu pozadí.
Vlastnost font-style:italic udělat z něj pár značek a font-weight:bold - v .
Nahraďte všechny mezery za  .
Překlady řetězců ve formuláři   nahradit s n.
HTML značkování v IDEA vytváří prázdné řádky se styly a řádky mezer se styly. Takové styly je lepší vyhodit: výrazně se tím zkrátí délka a zvýší se srozumitelnost kódu.
Dbáme na to, aby zalomení řádků nemělo žádný styl. Jinak nastanou problémy s prázdnými řádky.

Poslední bod ilustruji na příkladu:

<code>
1
2
</code>

Tento kód přemění Habr na 12. Totéž platí pro značky  и stejně jako jakékoli jejich kombinace. Zalomení řádku by nemělo mít styl a pak bude vše v pořádku.

uskutečnění

Úkol napsat konvertor pro libovolný HTML kód se mi zpočátku zdál docela obtížný. Pokud však uděláte řešení pro konkrétní variantu HTML, pak se ukáže, že všechno není tak špatné. Vše se mi podařilo udělat pomocí čistého RegExpu, tedy i bez HTML parsování. Hlavním problémem se ukázala být identifikace rysů značky Habr.

Aby zalomení řádků nemělo styly, museli jsme provést několik poměrně složitých náhrad, které jsou pravděpodobně nejvíce nepochopitelné (viz funkce popupBr). Myšlenka je taková, že značky   po každé výměně „vyskočily“ z hloubek formátovacích značek ven. Tedy po všech výměnách tagů   se objeví mimo formát.

Navíc se ukázalo, že IDEA vkládá do schránky nejen Rich Text, ale také poměrně složité objekty jako application/x-java-jvm-local-objectref. Potíž je v tom, že přítomnost takových objektů ve schránce vede k neustálým chybám v mé konzoli při vytváření DataFlavor. S tím se bohužel nedá nic dělat: JDK tak pracuje se schránkou. Bylo to pro mě zjevení toto je kód. Chytří kluci, kteří to napsali, si zřejmě myslí, že to bude v pohodě. Obecně se nebojte chyb, které mohou při práci s nástrojem nastat.

Projekt je napsán v Kotlinu a žije dál GitHub.

Návrhy na vylepšení jsou velmi vítány! Například by bylo hezké navrhnout tento nástroj jako plugin pro IDEA. Zatím jsem nenašel jednoduchý způsob, jak to udělat: zdroje pluginu Kopírovat jako HTML jsou bohužel zavřené a přijít na to, jak takový plugin od začátku napsat, trvá příliš dlouho.

Průzkumu se mohou zúčastnit pouze registrovaní uživatelé. Přihlásit se, prosím.