feat(reader): full markdown rendering, styled code blocks and precise popup positioning
This commit is contained in:
1 parent
e7586ee1b4
commit
cbd65decd5
4 files changed
+414
-60
No files matched your search
@@ -7,26 +7,26 @@
|
||||
## 🚀 Очередь реализации (Пошаговый план)
|
||||
|
||||
### 1. 📑 Полноценный рендеринг Markdown (.md) в читалке
|
||||
- [ ] **Блоки кода (Fenced Code Blocks ```` ```language ````)**:
|
||||
- [x] **Блоки кода (Fenced Code Blocks ```` ```language ````)**:
|
||||
- Выделение блоков кода в контейнер `<pre><code class="language-...">`.
|
||||
- Моноширинный шрифт (`JetBrains Mono`, `Consolas`), сохранение отступов и табуляции (`white-space: pre`).
|
||||
- Тёмная подложка, горизонтальный скролл при переполнении, отключение красной строки (`text-indent: 0`).
|
||||
- Кнопка «Копировать код» в шапке блока.
|
||||
- Отключение создания интерактивных словарных спанов `<span class="reader-word">` для кода, чтобы синтаксис не ломал форматирование.
|
||||
- [ ] **Инлайн-код (`` `variable` ``)**:
|
||||
- [x] **Инлайн-код (`` `variable` ``)**:
|
||||
- Оборачивание в нативный тег `<code class="reader-inline-code">` с бейджик-стилем.
|
||||
- [ ] **Списки и цитаты**:
|
||||
- [x] **Списки и цитаты**:
|
||||
- Преобразование маркированных (`- `, `* `) и нумерованных (`1. `) списков в `<ul><li>` / `<ol><li>`.
|
||||
- Преобразование цитат (`> `) в `<blockquote>` с акцентной левой границей.
|
||||
- **Слова внутри списков и цитат остаются кликабельными** (интерактивный клик-перевод работает!).
|
||||
- [ ] **Заголовки Markdown (`##`, `###`)**:
|
||||
- [x] **Заголовки Markdown (`##`, `###`)**:
|
||||
- Конвертация в `<h3>`, `<h4>` с удалением сырых решёток `#`.
|
||||
- [ ] **Точное позиционирование окна перевода у курсора/слова (Popup Positioning)**:
|
||||
- Исправить баг двойного смещения координат: у элемента `.reader-word-popup` в CSS задан `position: fixed`, а в JS к `rect.bottom` ошибочно прибавлялся `window.scrollY`, из-за чего окно улетало далеко вниз при любом скролле страницы.
|
||||
- Позиционировать окно точно под кликнутым словом (`rect.bottom + 6`) либо над ним (`rect.top - popupHeight - 6`), если снизу недостаточно места до края экрана.
|
||||
- Центрировать окно относительно слова с ограничением по границам вьюпорта (отступы минимум 12px от краёв экрана).
|
||||
- [ ] **Стилизация в CSS ([`app/static/css/style.css`](file:///home/ai-projects/services/study.qpid.pro/app/static/css/style.css))**:
|
||||
- Добавить стили для `.reader-content-body pre`, `code`, `blockquote`, `ul`, `ol`.
|
||||
- [x] **Точное позиционирование окна перевода у курсора/слова (Popup Positioning)**:
|
||||
- Исправлен баг двойного смещения координат: убран `window.scrollY` при `position: fixed`.
|
||||
- Окно позиционируется точно под кликнутым словом (`rect.bottom + 8`) либо над ним (`rect.top - popupHeight - 8`), если снизу недостаточно места.
|
||||
- Окно центрируется относительно кликнутого слова с проверкой границ вьюпорта (отступы минимум 12px от краёв).
|
||||
- [x] **Стилизация в CSS ([`app/static/css/style.css`](file:///home/ai-projects/services/study.qpid.pro/app/static/css/style.css))**:
|
||||
- Добавлены стили для `.reader-content-body pre`, `code`, `blockquote`, `ul`, `ol`, `.reader-code-block`, `.reader-inline-code`.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in new issue
Block a user