🥇Хабрда кодду кантип туура боёш керек жана бул эмне үчүн мынчалык кыйын

Бир нече ай мурун мен жарыялаган менин биринчи постум Хабр боюнча. Мүмкүн, кээ бириңиздер макаладагы код адаттан тыш түстө боёлуп жатканын, эң негизгиси, сайттагы орнотулган текст редактору баштапкы коддун белгилөөсүн колдобой тургандыгына жана көп учурда туура түстүү экенин байкайсыз. анын элементтерин туура эмес баса белгилейт. Ошол эле учурда, кээ бир таптакыр айласы кеткен жазуучулар сыяктуу, код сүрөт менен киргизилбейт.

Менин учурда, белгини сактоо өзгөчө маанилүү болгон, анткени макала коддун үстүндө иштөөнүн сүрөттөлүшү болгон. Мен жараткан маселени чечүү үчүн курал, бул тандалган схемадагы кодду бөлүп көрсөтүүнү IDEAдан Habré боюнча макалага өткөрүүгө мүмкүндүк берет. Мен куралды түзүү процесси жана аны колдонуунун өзгөчөлүктөрү тууралуу айтып берем.

Мунун баары эмне үчүн

Бир караганда, бул жөн гана тег аркылуу ишке ашырылган стандарттуу жарыктандыруу канааттандырарлык эмес болгондуктан, бузукулуктан жасалгандай сезилиши мүмкүн. <source>.

Кандайдыр бир мааниде, бул, албетте, чындык, бирок толугу менен эмес.

Биринчиден, ички жарыктандыруу <source> коддор менен иштей албайт, анткени боёк үчүн маалымат жетишсиз болот. Бөлүмдүн чегинен тышкары жарыяланган бардык элементтер туш келди боёлот. Бул көйгөйдүн эч кандай чечими жок, анткени, мен билгендей, онлайн боёо кызматтарынын бири да төмөндөгүлөрдүн бирин да жасоого мүмкүндүк бербейт:

Долбоордун толук кодун макалага толугу менен көрсөтпөстөн киргизиңиз же GitHub'тагы милдеттенмеге шилтемени киргизиңиз. Макаланын белгилүү жерлеринде толук коддон саптан үзүндүлөрдү колдонуңуз (диапазонду көрсөтүү менен). Бул учурда, бөлүп көрсөтүү, албетте, толук коддун негизинде аныкталышы керек.
Аныкталбаган элементтер үчүн мета маалымат менен камсыз кылуу. Колдонуучу үчүн абдан татаал жол, бирок мен буга макул болмокмун.

Экинчиден, ички жарыктандыруу <source> кадимки IDE менен ар кандай элементтердин түрлөрүнүн саны эч качан дал келбейт. Жана жогоруда сүрөттөлгөн көйгөйдөн улам, өркүндөтүлгөн боёк жасоонун эч кандай мааниси жок: макалага долбоордун толук кодун эч ким киргизбейт, андыктан бул функция иштей албайт.

Ошол эле учурда, чындык - макалаларга коддун бөлүктөрүн киргизүү зарыл жана алар канчалык кичине болсо, ошончолук жакшы.

Сиз кодду жарыксыз окуй аласыз, бирок эмне үчүн?

"Habr" белгилөө өзгөчөлүктөрү

IntelliJ IDEA кодду HTMLге экспорттоо үчүн орнотулган колдоого ээ. Кодду кадимки көчүрүү түстүү кодду алмашуу буферине жайгаштырат, аны HTML катары окуса болот.

Тилекке каршы, Habr HTML белгилерин түздөн-түз макалаларда колдонууга жол бербейт. Мунун себептери караңгылыкка капталган табышмак, бирок, балким, бул макалалардын түрүнүн биригүүсүнө байланыштуу. HTMLди макалаларда колдонууга уруксат берүү менен, пайда болушу мүмкүн болгон көрүү маселелерин толуктоого болот.

Мен көбүнчө макалаларда HTMLге тыюу салуу идеясын колдойм, бирок бир нюанс бар. Код көп талкууланган жана аны макалага туура киргизүүнүн жолу жок болгон IT адистери үчүн бул кандайдыр бир кызык.

Ошентип, бизде тегдер бар , , . Мындан тышкары, мунун баары тегдин ичинде иштейт <code>, форматтоо үчүн зарыл. Анан   Биз аны да сактадык, бул коддун узун саптары жана чегинүүлөр үчүн пайдалуу.

Айта кетчү нерсе, IDEAдан HTML кодун алуунун бардык стандарттуу жолдору такыр башка HTMLди чыгарат, ошондуктан алдыда конверсия иштери көп.

Бир мамиле

Биринчиден, авторго ыраазычылык сөздү айтуу керек. capslocky анын үчүн буюм бул темада. Мен макалада сунуш кылынган куралды түздөн-түз колдонгон жокмун, ал иштебей калышы да күмөн, бирок бул материалдын аркасында мен маселенин тереңдигин түшүндүм жана ошол эле учурда үмүттүн шамалын сездим.

Бул басылманын бир гана терс жагы - бул эмне жана эмне үчүн өтө сейрек түшүндүрмө менен бирге коддун чоң көлөмү.

Мен кырдаалды оңдоого аракет кылам жана эгер сиз аны Habrга киргизүүгө даяр формага келтиргиңиз келсе, HTML белгилөө кодуңуз менен эмне кылуу керек экенин сүрөттөп берем.

Экспорттоодон мурун, мисалы, IDEAда каалаган түс схемасын орнотуу керек Color Themes веб-сайтынан. Код тандалган схема менен экспорттолот. Ак фону бар схеманы тандаган жакшы (анткени фонду Хабрга коюуга болбойт) жана асты сызыксыз. Мен аларды кантип оңой сүйрөп кетүүнү түшүнгөн жокмун, анткени мен чындыгында каалаган эмесмин.
Биз тегдин ички беттери менен гана иштейбиз <pre>. Экспортту IDEAдан эмес, башкасын колдонсоңуз да, HTML белгилөөсүндө бул тег болушу мүмкүн, анткени ансыз кодду туура форматтоо кыйын. Тегдин өзүн алып салабыз, аны менен алмаштырабыз <code>.
Текст, балким, тизме катары көрсөтүлөт  ар кандай стилдер менен. Биз алардын баарын жок кылышыбыз керек. Көптөгөн боёо кызматтары стилдерди стилдер барагына кыйратат, бул логикалуу жана стилдердин аталыштарына шилтемелерди колдонушат. IDEA муну азырынча атайын жасай элек, бул тапшырманы бир аз жеңилдетет (стил орнотуулары туура ).
Тегди колдонуп шрифт түсүн коюңуз . Тилекке каршы, фондун түсүн коюу мүмкүн эмес.
Менчик font-style:italic аны бир нече тегге айлантыңыз жана font-weight:bold - in .
Бардык боштуктарды менен алмаштырыңыз  .
Формада сап котормолору   менен алмаштыруу n.
IDEAдагы HTML белгилөө стилдери менен бош сызыктарды жана стилдер менен боштук сызыктарын жаратат. Мындай стилдерди ыргытып салуу жакшы: бул узундугун бир топ кыскартат жана коддун түшүнүктүүлүгүн жогорулатат.
Биз сызыктардын эч кандай стили жок экенине ынанабыз. Болбосо бош линиялар менен көйгөйлөр жаралат.

Мен акыркы пунктту мисал менен түшүндүрөм:

<code>
1
2
</code>

Бул код Хабр тарабынан өзгөртүлөт 12. Ошол эле тегдерге да тиешелүү  и , ошондой эле алардын ар кандай комбинациялары. Сызыктын тыныгуусу стилге ээ болбошу керек, ошондо баары жакшы болот.

Реализация

Башында, ыктыярдуу HTML коду үчүн конвертер жазуу милдети мага бир топ кыйын көрүндү. Бирок, эгер сиз конкреттүү HTML варианты үчүн чечим чыгарсаңыз, анда баары анчалык деле жаман эмес болуп чыгат. Мен бардыгын таза RegExp аркылуу, башкача айтканда HTML талдоосуз эле жасай алдым. Негизги маселе Habr белгилөө өзгөчөлүктөрүн аныктоо болуп чыкты.

Сызыктын тыныгууларынын стилдерге ээ болушуна жол бербөө үчүн, балким, эң түшүнүксүз болгон бир нече татаал алмаштырууларды жасоого туура келди (popupBr функциясын караңыз). Идея теги болуп саналат   ар бир алмаштыруудан кийин алар форматтоо тегтеринин тереңдигинен сыртка чейин "чыккан". Ошентип, бардык тег алмаштыруудан кийин   форматтан тышкары көрүнөт.

Мындан тышкары, IDEA алмашуу буферине Rich Text гана эмес, ошондой эле татаал объектилерди да жайгаштырары белгилүү болду. application/x-java-jvm-local-objectref. Кыйынчылык - алмашуу буферинде мындай объекттердин болушу менин консолумда DataFlavor түзүүдө дайыма каталарга алып келет. Тилекке каршы, бул тууралуу эч нерсе кыла албайсыз: JDK алмашуу буфери менен дал ушундай иштейт. Бул мен үчүн ачылыш болду бул код. Муну жазган акылдуу жигиттер жакшы болот деп ойлошсо керек. Жалпысынан алганда, курал менен иштөөдө пайда болушу мүмкүн болгон каталардан коркпоңуз.

Долбоор Котлин тилинде жазылган жана жашай берет GitHub.

Жакшыртуу боюнча сунуштар абдан жакты! Мисалы, бул куралды IDEA үчүн плагин катары иштеп чыгуу жакшы болмок. Мен муну жасоонун жөнөкөй жолун таба элекмин: HTML плагини катары көчүрүү булактары, тилекке каршы, жабык жана мындай плагинди нөлдөн баштап кантип жазууну түшүнүү өтө көп убакытты талап кылат.

Сурамжылоого катталган колдонуучулар гана катыша алышат. Кирүү, өтүнөмүн.