Демонстраційний стенд

§1.1Рядкові позначки

Розбір виділення дружній до CJK: жирний закривається навіть упритул до китайської пунктуації — **报文。**同时 рендериться як 报文。同时, а не як буквальні зірочки. Курсив, закреслення та рядковий код працюють як завжди; з увімкненим gemoji шорткод на кшталт :sparkles: рендериться як ✨. Символи всередині рядкового коду не беруть участі в жодному розборі, тож зворотні лапки — безпечний спосіб показати синтаксис: **, $…$ і > [!note] з’являються буквально. Щоб показати зірочку в тексті, екрануйте її — *отак* лишається простим текстом.

§1.2Вікіпосилання

З увімкненим wikilinks посилання [[у подвійних дужках]] розв’язуються по колекції нотаток так, як і належить вікі: за id (design-tokens — з українського дзеркала спершу шукається дзеркало тією самою мовою, і лише за його відсутності посилання веде до англійського оригіналу), за псевдонімом (boundaries досягає нотатки з id three-way-split) і з підписом (інструкція швидкого старту). Ціль, яку не вдалося розв’язати, рендериться позначеним мертвим посиланням, а не валить збірку — про неї звітує рушіїв check-wikilinks у CI, де гниттю посилань і місце.

§1.3Таблиці: прокручування в широкому контейнері, картки у вузькому

Таблиця на шість і більше колонок у вузькому контейнері має перекладатися по картці на рядок, а не тиснути кожну клітинку до двох символів. Ця семиколонкова таблиця — водночас шпаргалка варіантів callout і жива перевірка того перекладання (звузьте вікно до ширини телефона):

Типові заголовки — англійські; сайт міняє весь набір через опцію calloutLabels у siteMarkdown, напр. calloutLabels: { tip: 'Інтуїція', warn: 'Попередження' }. Заголовок, написаний у синтаксисі цитат (> [!tip] Мій заголовок), завжди переважає.

§2.1Callout: три написання

Перше — синтаксис цитат у стилі Obsidian/GitHub (доступний із callouts: true, працює й у файлах із чистим Markdown):

Позначка згортання з Obsidian теж шанується: > [!note]- рендериться згорнутим, > [!note]+ — розгорнутим:

Друге — компонент пакета в MDX (astro-inkstone/components/Callout.astro, імпорт за шляхом). Без title він показує типовий підпис варіанта — той самий, що й у синтаксису цитат:

Третє — сирий HTML, усі шість варіантів за один прохід (один в один із правилами .callout у base.css):

§2.2Математика

Рядкові формули сидять просто в тексті: оптична товща записується як $\tau = \int \kappa \rho \, \mathrm{d}s$. Виносна математика бере трирядкову форму ($$ на окремих рядках) — однорядкову контроль відкидає, бо вона мовчки відрендерилася б маленькою рядковою формулою:

Тло формул — навмисно інший папір, ніж у тексту, і воно міняється разом із темою. Принагідно: ціни в доларах у тексті екрануйте — ця кава коштує $3.

§3.1Кодові рамки

Огорожа з title="…" дістає смугу заголовка з іменем файлу; кнопка копіювання в кутку єдина на весь сайт. Рядкові анотації [!code ++] / [!code --] рендеряться тлом diff-а:

def build_pipeline(opts):
    plugins = [remark_math]  
    plugins = [remark_gemoji, remark_math]  
    return assemble(plugins, guard=opts.guard)

Рамка з позначкою collapse починає згорнутою і займає місце, лише коли її розгорнуть — саме те для довгих конфігураційних файлів:

site:
  markdown:
    numbering: chapters
    math: true
    codeFrame: true
    mermaid: true
    callouts: true
    wikilinks: true
  styles:
    - astro-inkstone/styles/tokens.css
    - astro-inkstone/styles/base.css

Двотемне підсвічування дає shiki, який видає обидва набори кольорів одразу; base.css вибирає один за data-theme в одному-єдиному місці — без перетягування специфічності.

§3.2Діаграми mermaid

Огорожа ```mermaid на етапі збірки лишає тільки заглушку; рендерер довантажується динамічно лише на сторінках із діаграмою (сторінки без неї не платять нічого) і перемальовує її, коли перемикається тема:

flowchart LR
  A["astro-inkbrush<br/>рушій: редагування / діалект / контроль"] --> C["ваш сайт<br/>ідентичність / маршрути / розгортання"]
  B["astro-inkstone<br/>папір: токени / стилі / конвеєр"] --> C
  A -. один спільний діалект .-> B

§3.3Додатки GFM

Списки завдань і виноски їдуть разом із GFM:

• токени імпортовано
• base.css імпортовано
• палітру ідентичності перевизначено

Твердження, варте джерела, дістає виноску.¹

§4.1Що контроль відкидає на цій сторінці

Те, що ця сторінка збирається, якраз і доводить: усе вище — правильної форми. Ось написання, які завалили б збірку на місці (спробуйте одне, а тоді npm run build):

• маркер виділення, якому немає пари, — як-от **, покинутий незакритим наприкінці рядка;
• однорядкове $$x$$ (пишіть трирядкову форму);
• нумерація заголовків руками — запис заголовка цього розділу як ## 9. Що контроль… зіткнувся б із нумерацією часу збірки й був би відхилений;
• MDX, що обчислює фігурні дужки в тексті: {0,1,2,3} відрендерилося б самою лише трійкою, тому контроль вимагає екранованої форми {0,1,2,3};
• формула, яку KaTeX не може відрендерити (контроль наново рендерить кожну формулу в суворому режимі, замість пускати на сторінку червоний текст помилки).