Оформляем вторую заметку: из Маркдаун в ХТМЛ

Вы думали, что избе­жали рикрола в преды­дущей заметке и я больше не буду исполь­зо­вать этот заез­женный прикол?

Может быть, больше и не буду.

Айфреймы: вставляем видео, карты и дэшборды с других сайтов

И Обси­диан, и Три­рема спокойно едят чистый ХТМЛ внутри маркдаун-­разметки — так что вы, при ­же­ла­нии, можете захард­ко­дить какой-­нибудь сложно свёр­станный элемент себе в за­метку. Ну или захо­тите завести блог о веб-­разработке, я не знаю.

Нормальным людям эта возмож­ность нужна только для того, чтобы встав­лять айфреймы: ХТМЛ-­теги с со­дер­жимым других сайтов. Вста­вить видео с Ютуба можно так: Share › Embed › Ctrl+C и Ctrl+V в за­метку. Должно выйти что-то такое.

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Такой же трюк прово­ра­чи­ва­ется с ви­дже­тами карт, дэшбор­дами Табло и плюс-­минус любым сайтом (просто поме­няйте src).

markdown-it: расширяем .md-разметку плагинами

Как вы могли понять из предыдущей заметки, спой­леров и иконок в стан­дарте Mark­down нет. В Три­реме они подклю­чены как ­от­дельные модули к пар­серу markdown-­it, равно как ещё пара крутых надстроек, о ко­торых ниже.

Что такое markdown-­it, нагляд­но

Если вы до сих пор не поль­зу­е­тесь типо­граф­скими расклад­ками (будь то Бирмана или моя), в  _config/markdown-it.js вклю­чите авто­ти­по­граф — он заменит кавычки на пра­вильные и рас­ставит тире вместо тройных дефи­сов.

typographer: false, // замени на true
quotes: "«»„“",     // и подключатся кавычки
})

Есть целая библио­тека плагинов под md-­it: https://mdit-plugins.github.io/. Если вам что-то пригля­ну­лось, будь-­то концевые сноски, чеклисты или ещё какая ересь, уста­но­вите плагин через Терминал командой npm install @mdit/plugin-xxx и под­клю­чите его в _config/markdown-it.js по а­на­ло­гии.

Аттрибуты: прописываем элементам кастомный вид, не выходя из заметочника

Вот этот абзац — марги­на­лия. Контрин­ту­и­тивным образом его нужно вста­вить на блок выше того элемента, к ко­то­рому он прикле­ится.

Един­ственная причина, по ко­торой я не под­ключил плагин с кон­це­выми снос­ка­ми — воз­мож­ность легко пропи­сы­вать сноски боко­вые, они же марги­на­лии, заметки на по­лях, etc. Делаю я это, просто допи­сывая в конце нужно абзаца {.sidenote}

Могу вместо этого припи­сать {.green .bold} и сде­лать текст жирным и зе­лё­ным.

Или поме­нять стиль отдель­ного элемента текста, не трогая осталь­ные — вплотную присо­бачив к нему {.red}.

Проша­ренные ребята уже поняли, что через фигурные скобочки я задаю ЦСС-­классы, в чём мне помо­гает очередной markdown-­it плагин. Для ­всех осталь­ных: если вы хотите задать элементу кастомное форма­ти­ро­ва­ние, идёте в ЧатГПТ с за­просом вроде «Сделай так, чтобы у ЦСС-­класса .xxx были радужный фон, рамочка и текст курсивным Гара­мо­ном», копи­руете результат в public/css/custom.css и жи­вёте счаст­ливой жизнью, пропи­сывая {.xxx} направо и на­лево.

Потен­циал аттри­бутов этим не за­кан­чи­ва­ется: вместе с клас­сами внутрь фигурных скобочек можно

1. пропи­сать #id и в custom.css задать правила для кон­крет­ного элемента
2. вста­вить стилевой быст­ро­фикс в фор­мате style=margin-left:-5px
3. запре­тить 11ty сжимать изоб­ра­же­ние, приписав eleventy:ignore
4. опре­де­лить любое свой­ство тега, напри­мер, loading=eager для ­быст­рого скачи­вания «парадной картинки»

Я же говорю, тотальная касто­ми­за­ция.

Контейнеры: верстаем сложные вещи, не выходя из... вы поняли.

Аттрибут {.sidenote}всегда имеет один из двух врож­дённых поро­ков:

• либо ты пишешь абзац-­маргиналию выше того абзаца, к ко­то­рому она должна прилип­нуть — и в мобильной версии полу­чаешь марги­на­лию, пред­ше­ству­ющую своему абзацу;
• либо не мо­ро­чишь себе голову пере­ста­новкой абзацев и по­лу­чаешь нормальную мобильную версию — но за счет того, что на де­ск­топе марги­налия прили­пает к не к тому абзацу.

Эти поро­ки — неиз­бежное след­ствие того, что полу­чив­шийся из Марк­дауна ХТМЛ доку­мент имеет линейную после­до­ва­тель­ность блоков, в ко­торой всякого рода марги­налии возможны только через костыли.

Контей­неры удобны для того, чтобы распо­ло­жить несколько фото­графий в ряд — ­по­смот­рите заметки «Оптимизация изоб­ра­жений из коробки» и «Почему дефолтная Трирема выглядит как Эгея?», чтобы увидеть их в дей­ствии.

::: container { #markdown-extras }

Pretty cool, huh?

:::