Оформ­ле­ние строч­ных бло­ков кода

Ко­гда я ра­бо­тал над но­вой вер­си­ей мо­е­го сай­та, я пы­тал­ся по­боль­ше ду­мать о том, как всё бу­дет вы­гля­деть и чи­тать­ся с точ­ки зре­ния ти­по­гра­фи­ки. Од­ной из ве­щей, с ко­то­ры­ми у меня все­гда были про­бле­мы —как оформ­лять строч­ные бло­ки кода. Чаще все­го, на их ме­сте мы ви­дим ма­лень­кие раз­но­цвет­ные пря­мо­уголь­ни­ки. И чем боль­ше ими на­би­ва­ешь текст, тем хуже ста­но­вит­ся его чи­та­бель­ность.

При­мер взят из ста­тьи в Ви­ки­пе­дии о CSS. По­гля­ди­те на все эти раз­но­цвет­ные пря­мо­уголь­ни­ки. Кро­ме того, за­меть­те, что в тек­сте есть несколь­ко мест, ко­то­рые мож­но было бы раз­ме­тить строч­ны­ми бло­ка­ми кода. Воз­мож­но, это не было сде­ла­но как раз из-за того, что текст стал бы ещё силь­нее за­хлам­лён.
Скриншот из Википедии

Что, если это слиш­ком ча­сто ис­поль­зу­е­мое оформ­ле­ние строч­ных бло­ков кода —из­лишне?

Прак­ти­че­ски всё, что мы ви­дим, при­хо­дит от пол­но­цен­ных мно­го­строч­ных бло­ков кода. Но точ­но ли нам нуж­ны все эти сти­ли в строч­ном кон­тексте?

Ну­жен ли нам мо­но­ши­рин­ный шрифт? Неа. Мо­но­ши­рин­ность по­лез­на то­гда, ко­гда у нас есть несколь­ко строк, внут­ри ко­то­рых нам нуж­но вы­рав­ни­вать сим­во­лы друг от­но­си­тель­но дру­га опре­де­лён­ным об­ра­зом. Но вот внут­ри обыч­но­го тек­ста? Нам это не нуж­но. Ухо­ди, мо­но­ши­рин­ный шрифт.

Нуж­ны ли нам ка­кие-то бор­де­ры или цвет фона? Вряд ли. На боль­ших бло­ках кода они вы­гля­дят нор­маль­но, но в строч­ном кон­тек­сте по­доб­ное оформ­ле­ние очень силь­но вы­пя­чи­ва­ет наши строч­ные бло­ки, де­лая их слиш­ком жир­ны­ми. А это, в свою оче­редь, ухуд­ша­ет чи­та­е­мость тек­ста, так как глаз на­чи­на­ет спо­ты­кать­ся, об­ра­щать вни­ма­ние на эти яр­кие пят­на ещё до того, как мы до­чи­та­ем до нуж­но места.

Нуж­на ли нам под­свет­ка син­так­си­са? Со­мне­ва­юсь. Она по­лез­на то­гда, ко­гда у нас есть мно­го кода, и нам нуж­но от­де­лить одни кон­струк­ции в нём от дру­гих. А вот в строч­ном кон­тек­сте, ко­гда в бло­ках кода ока­зы­ва­ют­ся лишь одно-два сло­ва, под­свет­ка ста­но­вит­ся из­лиш­ней и ни­че­го нам не даёт кро­ме ненуж­но­го при­вле­че­ния вни­мания.

Моё ре­шение

Итак, если все эти сти­ли лиш­ние, а то и вред­ные для на­ше­го тек­ста, что нам ис­поль­зо­вать вме­сто них? По­сле об­ду­мы­ва­ния всех этих мо­мен­тов, я ре­шил вспом­нить о том, как же оформ­ля­ют по­хо­жие сущ­но­сти в обыч­ных кни­гах. И, ока­зы­ва­ет­ся, что ко­гда до­хо­дит дело до нена­вяз­чи­во­го вы­де­ле­ния неболь­ших фраг­мен­тов тек­ста, ре­ше­ние оче­вид­но. Кур­сив. И если он под­хо­дит для боль­шин­ства обыч­ных тек­стов, то по­че­му бы не ис­поль­зо­вать кур­сив и для оформ­ле­ния строч­ных бло­ков кода?

Моя вер­сия при­ме­ра выше, те­перь хоть чи­та­ет­ся как текст. Ниж­ние строч­ные бло­ки кода, с пол­ны­ми CSS-пра­ви­ла­ми, в прин­ци­пе, в чём-то вы­иг­ры­ва­ли от под­свет­ки, так что, воз­мож­но, сто­ит в та­ких ме­стах её воз­вра­щать, но уж точ­но не та­кую яр­кую, ка­кой она была до это­го.
Исправленный скриншот из Википедии

Соб­ствен­но, мож­но по­смот­реть на строч­ный блок кода пря­мо в этом тек­сте (Пря­мо тут я ис­поль­зо­вал <em>, так как этот текст мо­жет ока­зать­ся, на­при­мер, в RSS-чи­тал­ке, то есть там, где вы, ско­рее все­го, не уви­ди­те сти­лей, спе­ци­фич­ных для мо­е­го бло­га.): font-style: italic. На мой взгляд, вы­гля­дит вполне непло­хо —нена­вяз­чи­во, но явно от­де­ле­но от ос­нов­но­го текста.

Кур­сив до­ста­точ­но от­де­ля­ет код от осталь­но­го тек­ста, в боль­шин­стве слу­ча­ев мож­но во­об­ще боль­ше ни­че­го не до­бав­лять. Са­мый про­стой спо­соб сде­лать та­кие бло­ки кода кур­сив­ны­ми сле­ду­ющий:

:not(pre) > code {
    font: in­herit;
    font-style: italic;
}

Этим мы сде­ла­ем наши стан­дарт­ные мо­но­ши­рин­ные бло­ки кода стан­дарт­ным кур­со­вом. Об­ра­ти­те вни­ма­ние на :not(pre) —если раз­ме­чать пол­но­цен­ные бло­ки кода с по­мо­щью <pre><code>, этот се­лек­тор к ним не при­ме­нит­ся. Ко­неч­но, если мы ис­поль­зу­ем ка­кую-то под­свет­ку син­так­си­са, нам надо бу­дет её от­клю­чить для строч­ных бло­ков кода (или пе­ре­опре­де­лить её сти­ли). В неко­то­рых слу­ча­ях, ко­гда вы ис­поль­зу­е­те от­дель­ный шрифт для кур­сив­но­го на­чер­та­ния, а в на­шем веб-шриф­те его нет, нам надо бу­дет не за­быть ука­зать от­дель­ны веб-шрифт и для на­ших бло­ков кода, ина­че мы по­лу­чим псев­до­курсив.

Да, это всё субъ­ек­тивно

Кур­сив для строч­ных бло­ков тек­ста, ко­неч­но, мо­жет быть непри­вы­чен. Я и не го­во­рю, что это един­ствен­ный пра­виль­ный ва­ри­ант. Мож­но ска­зать, что это дело сти­ля —как вы бу­де­те оформ­лять строч­ные бло­ки кода. Ино­гда вы мо­же­те и за­хо­теть, что­бы они вы­пя­чи­ва­лись и при­вле­ка­ли вни­ма­ние. Но, если вам за­хо­чет­ся до­ба­вить чи­та­е­мо­сти ва­шим ис­пещ­рён­ным строч­ны­ми бло­ка­ми кода тек­стам, —кур­сив вам в этом по­может.