3.2 KiB
3.2 KiB
Инструкция (Промпт) для AI Агента
Ты — Senior Vue.js разработчик. Мне нужно исправить рендеринг Markdown в компоненте.
Проблема: Компонент отображает сырой Markdown (символы #, *, таблицы в виде текста), вместо HTML разметки. Стили CSS есть, но они не применяются, так как HTML не генерируется.
Анализ кода:
- В секции imports из 'vue' забыли добавить
computed. - Функция
renderMarkdownскорее всего падает вcatchи возвращает исходную строку. - Библиотека
markedв последних версиях изменила API (удаленsetOptions, используетсяmarked.parse).
Задача:
Перепиши секцию <script setup> и исправь логику рендеринга.
Требования к исправлению:
- Добавь
computedв импорты из 'vue'. - Обнови использование библиотеки
marked. Убедись, что используетсяmarked.parse(text). Вместо устаревшегоsetOptionsиспользуй современный подход (илиmarked.use(), или просто дефолтный парсинг, так какgfmиbreaksобычно включены по умолчанию). - Убедись, что переменная
renderedSummaryкорректно обрабатываетreport.summaryи возвращает безопасный HTML (если summary нет, возвращать пустую строку). - (Опционально) Добавь импорт
DomPurify(если он есть в проекте) для очистки HTML перед выводом вv-html, но если нет — оставь просто парсинг.
Ожидаемый результат:
Код компонента, где renderedSummary возвращает корректный HTML, и заголовки/таблицы отображаются красиво согласно CSS стилям .markdown-content.
### Что именно должен изменить агент (для вашего понимания):
Агент должен изменить блок скрипта примерно так:
```javascript
// Было
import { onBeforeUnmount, onMounted, ref } from 'vue';
// Станет (добавится computed)
import { onBeforeUnmount, onMounted, ref, computed } from 'vue';
// Было (конфигурация marked)
if (marked.setOptions) { ... }
// Станет (упрощенно и надежно)
const renderMarkdown = (markdown) => {
if (!markdown) return '';
try {
// Просто парсим, так как в новых версиях gfm включен по умолчанию
return marked.parse(markdown, { breaks: true });
} catch (e) {
console.error('Markdown parsing error:', e);
return markdown;
}
};