Каталог примеров кода (IT Code Examples)
Энциклопедия Вселенная IT не может бесконечно раздувать HTML и JS-бандл тысячами длинных листингов. Для тяжёлых и мультифайловых примеров есть отдельный открытый сервис IT Code Examples — лёгкий статический каталог на Astro + Shiki.
В статье остаётся объяснение; полный код подгружается с code.spirzen.ru во встроенном блоке ниже. Это пилот интеграции: один пример, один компонент, один контракт postMessage.
Зачем выносить код отдельно
| Проблема в энциклопедии | Решение в IT Code Examples |
|---|---|
| Длинные листинги раздувают HTML статей | Код живёт в examples/ отдельного репозитория |
| Мультифайловые практикумы тяжело читать в markdown | Вкладки файлов, подсветка на сборке |
| Лимит GitHub Pages (~1 GB) | Второй репозиторий — второй лимит |
| Нужны «приколюхи» для чтения кода | Копирование, diff, поиск — roadmap каталога |
Короткие фрагменты (3–15 строк) по-прежнему уместны прямо в markdown. Всё, что длиннее ~30 строк или состоит из нескольких файлов, логичнее держать в каталоге.
Как это выглядит в статье
Ниже — живой пример Python — Hello World из каталога. Блок подстраивает высоту под содержимое; ссылка внизу открывает полную страницу примера.
Исходники примера лежат в репозитории it-code-examples в папке examples/python/hello-world/.
Для авторов статей
В MDX подключите компонент и укажите slug примера (язык + имя папки):
import ExternalCodeEmbed from '@site/src/components/ExternalCodeEmbed';
<ExternalCodeEmbed example="python/hello-world" title="Python — Hello World" />
| Проп | Назначение |
|---|---|
example | Slug вида python/hello-world → /e/embed/python/hello-world/ |
title | Заголовок iframe (доступность) |
src | Полный URL embed (если нужен override) |
minHeight | Минимальная высота, по умолчанию 320 |
Локально при разработке энциклопедии (npm start, порт 3000) и каталога (npm run dev, порт 4321) URL подставляется автоматически. В продакшене — https://code.spirzen.ru.