🥇Хабрда кодты қалай дұрыс бояуға болады және бұл неге соншалықты қиын

Бірнеше ай бұрын мен жарияладым менің бірінші жазбам Хабрда. Мүмкін сіздердің кейбіреулеріңіз мақаладағы код әдеттен тыс жолмен боялғанын байқайсыз, ең бастысы, сайттағы кірістірілген мәтіндік редактор бастапқы кодты белгілеуді қолдамайтынына және жиі оның элементтерін қате белгілейді. Сонымен қатар, кейбір мүлдем үмітсіз жазушылар сияқты код суретпен бірге енгізілмейді.

Менің жағдайда, түзетуді сақтау әсіресе маңызды болды, өйткені мақала кодпен жұмыс істеудің сипаттамасы болды. Мен жасаған мәселені шешу үшін құрал, бұл таңдалған схемадағы кодты бөлектеуді IDEA-дан Habré туралы мақалаға тасымалдауға мүмкіндік береді. Мен құралды жасау процесі және оны пайдалану ерекшеліктері туралы айтатын боламын.

Мұның бәрі не үшін

Бір қарағанда, бұл жай ғана тег арқылы енгізілген стандартты жарықтандыру қанағаттанарлық емес болғандықтан, бұзақылықтан жасалған сияқты көрінуі мүмкін. <source>.

Бір мағынада, бұл, әрине, шындық, бірақ толығымен емес.

Біріншіден, ішкі жарықтандыру <source> код бөліктерімен жұмыс істей алмайды, өйткені бояу үшін ақпарат жеткіліксіз болады. Бөлім аумағынан тыс жарияланған барлық элементтер кездейсоқ түрде боялады. Бұл мәселенің шешімі жоқ, өйткені менің білуімше, онлайн бояу қызметтерінің ешқайсысы келесі әрекеттерді орындауға мүмкіндік бермейді:

Толық жоба кодын мақалаға толық көрсетпей енгізіңіз немесе GitHub сайтында міндеттемеге сілтемені енгізіңіз. Мақаланың белгілі бір жерлерінде толық кодтан жол үзінділерін пайдаланыңыз (диапазонды көрсете отырып). Бұл жағдайда бөлектеу, әрине, толық код негізінде анықталуы керек.
Анықталмаған элементтер үшін метаақпаратты анық беріңіз. Пайдаланушы үшін өте қиын жол, бірақ мен бұған келісетін едім.

Екіншіден, ішкі жарықтандыру <source> әдеттегі IDE-мен әртүрлі элемент түрлерінің саны ешқашан сәйкес келмейді. Жоғарыда сипатталған мәселеге байланысты кеңейтілген бояуды жасаудың қажеті жоқ: ешкім мақалаға толық жоба кодын енгізбейді, сондықтан бұл функционалдылық жұмыс істей алмайды.

Сонымен қатар, шындық мынада, мақалаларға код бөліктерін енгізу қажет және олар неғұрлым аз болса, соғұрлым жақсы.

Сіз кодты жарықтандырусыз оқи аласыз, бірақ неге?

«Хабр» белгілеуінің ерекшеліктері

IntelliJ IDEA кодты HTML тіліне экспорттауға арналған кірістірілген қолдауға ие. Кодты қалыпты көшіру HTML ретінде оқуға болатын түрлі-түсті кодты алмасу буферіне орналастырады.

Өкінішке орай, Habr мақалаларда тікелей HTML белгілеуді пайдалануға рұқсат бермейді. Мұның себептері қараңғылықпен көмкерілген жұмбақ, бірақ бұл мақалалар түрінің бірізділігіне байланысты шығар. HTML тілін мақалаларда пайдалануға рұқсат беру арқылы кез келген көру мәселелерін шешуге болады.

Мен мақалаларда HTML-ге тыйым салу идеясын қолдаймын, бірақ бір нюанс бар. Код жиі талқыланатын және оны мақалаға дұрыс енгізудің жолы жоқ IT мамандарына арналған ресурс қандай да бір таңқаларлық.

Сонымен, бізде тегтер бар , , . Сонымен қатар, мұның бәрі тегтің ішінде жұмыс істейді <code>пішімдеу үшін қажет. Сонымен   Сондай-ақ біз оны сақтадық, бұл кодтың ұзын жолдары мен шегіністер үшін пайдалы.

Айта кету керек, IDEA-дан HTML кодын алудың барлық стандартты жолдары мүлдем басқа HTML шығарады, сондықтан алда көп түрлендіру жұмыстары бар.

Көзқарас

Ең алдымен, авторға алғыс айту керек. капслокты оның үшін заттар осы тақырып бойынша. Мен мақалада ұсынылған құралды тікелей пайдаланбадым және оның жұмыс істеуі екіталай, бірақ осы материалдың арқасында мен мәселенің толық тереңдігін түсіндім және сонымен бірге үміт желін сезіндім.

Бұл жарияланымның жалғыз теріс жағы - бұл не істейтінін және не үшін жасайтыны туралы өте сирек түсініктемемен біріктірілген кодтың үлкен көлемі.

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

Экспорттау алдында, мысалы, IDEA-да қалаған түс схемасын орнату керек Түс тақырыптары веб-сайтынан. Код таңдалған схемамен экспортталады. Ақ фоны бар схеманы таңдаған дұрыс (өйткені Habr-да фон орнату мүмкін емес) және астын сызусыз. Мен оларды қалай оңай сүйреуге болатынын түсінбедім, өйткені мен шынымен де қаламадым.
Біз тек тегтің ішкі жағымен жұмыс істейміз <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 ретінде көшіру плагинінің көздері, өкінішке орай, жабық және мұндай плагинді нөлден қалай жазу керектігін анықтау тым көп уақытты алады.

Сауалнамаға тек тіркелген пайдаланушылар қатыса алады. Кіру, өтінемін.