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

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

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

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

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

Нормальным людям эта возмож­ность нужна только для того, чтобы встав­лять айфреймы: ХТМЛ-­теги с содер­жимым других сайтов. Вста­вить видео с Ютуба можно так: 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 вклю­чите авто­ти­по­граф — он заменит кавычки на правильные и расставит тире вместо тройных дефи­сов.

typo­grapher: 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. опре­де­лить любое свой­ство тега, напри­мер, load­ing=eager для быст­рого скачи­вания «парадной картинки»

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

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

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

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

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

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

::: container { #markdown-extras }

Pretty cool, huh?

:::