Skip to content

MARKDOWN_SUPPORT.md

Latest commit

 

History

History
203 lines (157 loc) · 5.95 KB

MARKDOWN_SUPPORT.md

File metadata and controls

203 lines (157 loc) · 5.95 KB

Поддержка Markdown

Приложение теперь поддерживает полный Markdown синтаксис для создания красивых сообщений, топиков и форумов.

Реализованные возможности

1. Markdown парсер

Библиотеки:

  • react-markdown - основной парсер
  • remark-gfm - поддержка таблиц и зачеркнутого текста
  • rehype-highlight - подсветка синтаксиса кода

Поддерживаемые элементы:

  • ✅ Текст: жирный, курсив, зачеркнутый
  • ✅ Заголовки: H1-H6
  • ✅ Списки: маркированные и нумерованные
  • ✅ Ссылки: [text](url)
  • ✅ Код: inline code и блоки кода
  • ✅ Цитаты: > quote
  • ✅ Таблицы: GitHub Flavored Markdown
  • ✅ Изображения: ![alt](url)

2. Markdown редактор

Компонент MarkdownEditor:

  • Панель инструментов с кнопками форматирования
  • Горячие клавиши (Ctrl+B, Ctrl+I, etc.)
  • Предварительный просмотр
  • Подсказки синтаксиса

Инструменты:

  • Жирный текст: **text** или Ctrl+B
  • Курсив: *text* или Ctrl+I
  • Код: `code` или Ctrl+`
  • Ссылка: [text](url) или Ctrl+K
  • Список: - item или Ctrl+Shift+8
  • Нумерованный список: 1. item или Ctrl+Shift+7
  • Цитата: > text или Ctrl+Shift+>

3. Интеграция в компоненты

Обновленные страницы:

  • ✅ TopicPage: ответы с Markdown
  • ✅ ForumPage: создание топиков с Markdown
  • ✅ HomePage: описания форумов с Markdown

Компоненты:

  • ✅ MarkdownContent: отображение отформатированного текста
  • ✅ MarkdownEditor: редактор с подсказками

Синтаксис Markdown

Основной текст

**Жирный текст**
*Курсив*
~~Зачеркнутый~~
`inline code`

Заголовки

# Заголовок 1
## Заголовок 2
### Заголовок 3

Списки

- Маркированный список
- Второй пункт

1. Нумерованный список
2. Второй пункт

Ссылки и изображения

[Текст ссылки](https://example.com)
![Альтернативный текст](https://example.com/image.jpg)

Код

`inline code`

```javascript
// Блок кода с подсветкой
function hello() {
  console.log('Hello, World!');
}

### Цитаты
```markdown
> Это цитата
> Продолжение цитаты

Таблицы

| Заголовок 1 | Заголовок 2 |
|-------------|-------------|
| Ячейка 1    | Ячейка 2    |
| Ячейка 3    | Ячейка 4    |

Стилизация

Темная тема

  • Автоматическая адаптация под темную тему
  • Подсветка кода в темных тонах
  • Контрастные цвета для лучшей читаемости

Адаптивность

  • Таблицы с горизонтальной прокруткой на мобильных
  • Оптимизированные отступы и размеры
  • Поддержка touch устройств

Производительность

Оптимизации

  • Ленивая загрузка компонентов Markdown
  • Эффективный парсинг только при необходимости
  • Минимальные зависимости

Кеширование

  • Компоненты переиспользуются
  • Стили загружаются один раз
  • Минимизированный CSS

Совместимость

Браузеры

  • ✅ Chrome 70+
  • ✅ Firefox 65+
  • ✅ Safari 12+
  • ✅ Edge 79+

Устройства

  • ✅ Desktop
  • ✅ Tablet
  • ✅ Mobile (iOS Safari, Android Chrome)

Примеры использования

Создание топика

# Как использовать React Hooks

React Hooks позволяют использовать состояние и другие возможности React без классов.

## Основные хуки

### useState
```javascript
const [count, setCount] = useState(0);

useEffect

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

Заключение

Hooks делают код более читаемым и переиспользуемым!


### Ответ на сообщение
```markdown
Спасибо за подробное объяснение! 👍

Особенно полезным показался пример с `useEffect`:

```javascript
useEffect(() => {
  // Эффект выполняется при изменении count
  console.log('Count changed:', count);
}, [count]);

Теперь все стало намного понятнее!


## Безопасность

- ✅ **XSS защита:** автоматическое экранирование HTML
- ✅ **Санитизация:** удаление опасных тегов
- ✅ **Валидация:** проверка синтаксиса Markdown

## Расширения

Возможно добавить в будущем:
- Кастомные компоненты (спойлеры, предупреждения)
- Drag & drop изображений
- Автосохранение черновиков
- Предпросмотр в реальном времени
- Экспорт в PDF/HTML