code-notes-infograph

Markdown-файлы могут быть не только унылой документацией. ✨

🏃‍♂️ Мне только установить

Современный предпросмотр в

/

code-server

с кучей расширений (mermaid + 100500 диаграмм), может сделать из них прекрасное средство порождения инфографических конспектов, которых можно создавать «со скоростью мысли», на порядки легче, чем например, верстка в LaTeX/Beamer, не говоря уже о всяких поверпоинтах. ⚡🧠

Этими инфографическими конспектами. которыми одновременно можно заменить

• майндмапы для мозгового штурма 🧠🗺️
  • ибо можно набрасывать структуру также быстро ⚡
    • работая в одиночку или группой 👤👥
• слайд-презентации 📽️
  • «слайдовая разбивка» нужна только несчастному стендаперу — стоящему-бродящему докладчику с примитивной листалкой. 🎤
  • если вы что-то рассказываете–показываете не отходя от клавиатуры — у вас на порядок больше возможностей навигации, и важно сконцентрироваться на выделении и структуризации ключевых идей (чтобы остальное проговорить голосом) 🧭
• ну и конечно многословные документы-тексты 📄
  • в эпоху ИИ текст не стоит ничего, а авторское выделение важного, «правильные картинки и визуализация для человека» — основная ценность. 🤖

Все это можно хитро оформить CSS-стилями для просмотра Markdown-документов, которых можно выставить для vscode-codeserver workspace. 🎨

Примеры 📌

Какие-то примеры из разных «образовательных» тем 📚

Литература 📚

Сопроводительный материал для просмотра с телеспектаклями: 🎭

• «Горе от ума» 🎬
• «Поэма Полтава» 📖

Физика ⚛️

• Задача о побеге атмосферы, сорсы 🌍

Инфографика из кода 🖼️

• легко делать инфографику из кода ✨

Ключевые идеи 💡

Юзабилити восприятия человека (читающего слева-направо, сорри, кто не) определяется 👀

• структурой блоков с видимыми краями и пустым пространством 🧱
• цветами 🎨
• шрифтами 🔤

---

Структура должна проявляться слева ⬅️

• С помощью обычных списков 📋
  • Чем выше уровень — тем крупнее текст 🔠
  • Лишние слова надо убрать, выделять ключевое ✂️
    • Многострочных абзацев в иделе быть не должно 🚫
      • Разве что только в цитатах 💬
        • их мы рисуем красивыми callouts 🗂️
• Отступами и разделителями
  ---
  ➖
• Ну и конечно разделами 📑

---

Красим цветами и шрифтами 🎨

• Формулы 🧮
• Код 💻
• Термины, слова кода. 🏷️

Семантическая раскраска «псевдоссылками» 🖍️

пока красим синим-красным увеличивая шрифт. 🔵🔴

Картинки 🖼️

• Если иллюстрирующие и не требуют максимальной ширины 📐
  • оформляем «плавающими рядом справа», с помощью
    ![right]
    ➡️

    ![right](./pics/иллюстрация-к-теме.png)

• в отличие от LaTeX, Word и т.п — тут нет ограничений страниц 📄🚫
  • картинки не уедут никуда в даль 📌
  • не придется за ними гоняться с подписями («см. Рис 123, на странице 321») 🏷️

---

Идеограммы 🔣

• да, эмодзи 😀
• взбодрят унылость ⚡
  • без возни с встраиванием картинок. 🚫🖼️

Установка 🛠️

• вычекаутить-подключить сабмодулем в ваше проект 🔗
• выполнить
  scripts/setup.py
  ▶️
  • пропишет CSS 🎨
  • поставит вам нужные расширения 🧩
• если code-server в докере 🐳, выполнить
  scripts/code-server-install.sh
  внутри экземляра
  • поставит python
  • докинет CSS 🎨 + Расширения 🧩