+ 
{
+ if (articleId <= 1) return;
+
+ if (back)
+ navigate(`/article/${articleId - 1}?back=${back}`);
+ else navigate(`/article/${articleId - 1}`);
+ }}
+ />
+ #{articleId}
+ 
{
+ if (back)
+ navigate(`/article/${articleId + 1}?back=${back}`);
+ else navigate(`/article/${articleId + 1}`);
+ }}
+ />
+
+ ![\"img\"/](\"https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg\")
+
+или если нужно выравнивание по центру
+
+
+
+
+
+
+---
+
+## 🧠 8. Цитаты и вложенность
+
+> 💭 Это обычная цитата.
+>
+> > А это — **вложенная цитата**.
+> >
+> > > Можно вкладывать сколько угодно уровней!
+
+---
+
+## ⚙️ 9. Горизонтальные линии
+
+---
+
+***
+
+---
+
+## 🧮 10. Таблица внутри цитаты
+
+> Вот таблица прямо внутри блока цитаты:
+>
+> | Язык | Назначение |
+> |-------|-------------|
+> | JS | Web-разработка |
+> | TS | Строгая типизация |
+> | PY | Скрипты и AI |
+
+---
+
+## 🧩 11. Встроенный HTML
+
+
+
+
+
+---
+## 🎨 12. Вложенные списки с кодом
+
+- Этапы:
+ 1. Создай проект
+ 2. Добавь зависимости:
+ \`\`\`bash
+ npm install react-markdown remark-gfm rehype-highlight highlight.js
+ \`\`\`
+ 3. Импортируй стили:
+ \`\`\`tsx
+ import "highlight.js/styles/github-dark.css";
+ \`\`\`
+ 4. Готово!
+
+---
+
+## 🚀 13. Финал
+
+Поздравляю! 🎉
+Ты только что увидел все ключевые возможности **Markdown + GFM** в действии.
+
+> ✨ Используй этот текст как шаблон для тестирования рендерера.
+> 💡 Совет: попробуй поменять тему \`highlight.js\` (например \`monokai.css\` или \`atom-one-dark.css\`).
+
+---
+
+**🖤 Конец демонстрации. Спасибо, что используешь Markdown-редактор!**
+
+`,
+ );
+
+ useEffect(() => {
+ onChange(markdown);
+ }, [markdown]);
+
+ // Обработчик вставки
+ const handlePaste = async (
+ e: React.ClipboardEvent📂 Раскрывающийся блок
+ Этот текст виден только после раскрытия! +-
+
- HTML списки работают +
- И даже жирный текст +
+ {/* Предпросмотр */}
+
+
+
+ {/* Редактор */}
+
+
+ + 👀 Предпросмотр +
+
+
+