Отлично, вот большая тестовая статья в Markdown (rich text) с максимально разнообразными элементами, которые обычно поддерживаются и используются в Strapi для проверки рендеринга.
🚀 Большая тестовая статья для проверки Markdown в Strapi
Цель статьи:
Протестировать рендеринг Markdown / Rich Text в админке Strapi, включая заголовки, списки, таблицы, код, цитаты, изображения, ссылки, эмодзи и вложенные структуры.
📌 Содержание
- Введение
- Заголовки всех уровней
- Форматирование текста
- Списки
- Чек-листы
- Ссылки и якоря
- Изображения
- Таблицы
- Код и подсветка синтаксиса
- Цитаты и вложенные блоки
- HTML внутри Markdown
- Эмодзи и спецсимволы
- Разделители и структурирование
- Большой текстовый блок
- Заключение
Введение
Markdown — это удобный формат разметки, который широко используется в CMS, документации и блогах.
В Strapi Markdown применяется для:
- статей
- новостей
- блог-постов
- технической документации
- SEO-контента
Данная статья специально перегружена элементами, чтобы выявить возможные проблемы рендеринга.
Заголовки всех уровней
Заголовок H1
Заголовок H2
Заголовок H3
Заголовок H4
Заголовок H5
Заголовок H6
Форматирование текста
Примеры форматирования:
- Жирный текст
- Курсив
- Жирный + курсив
Зачёркнутый текстinline code- <mark>Выделение (HTML)</mark>
Пример абзаца:
Strapi — это headless CMS, которая позволяет гибко управлять контентом и доставлять его в любые клиенты: web, mobile, TV, IoT и другие.
Списки
Маркированный список
-
Frontend
- Next.js
- React
- Vue
-
Backend
- Strapi
- NestJS
- Express
-
Database
- PostgreSQL
- MySQL
- MongoDB
Нумерованный список
- Установить Strapi
- Создать Content Type
- Добавить Rich Text поле
- Опубликовать статью
- Проверить API
Вложенные списки
-
CMS
-
Headless
- Strapi
- Directus
-
Traditional
- WordPress
- Joomla
-
Чек-листы
- Markdown поддерживается
- Заголовки отображаются
- Код подсвечивается
- Нет багов рендеринга
- Проверить mobile view
Ссылки и якоря
Обычная ссылка:
👉 Официальный сайт Strapi
Ссылка с title:
Strapi Docs
Якорь внутри статьи:
Перейти к таблицам
Изображения
Изображение с alt-текстом:
Изображение с подписью (через HTML):
<figure> <img src="https://dummyimage.com/800x300/000/fff&text=Markdown+Test" alt="Markdown test image"> <figcaption>Рисунок 1 — Тестовое изображение для Strapi</figcaption> </figure>Таблицы
| Фича | Поддержка | Комментарий |
|---|---|---|
| Markdown | ✅ | Полная |
| HTML внутри MD | ⚠️ | Зависит от настроек |
| Таблицы | ✅ | Стандартные |
| Emojis | ✅ | UTF-8 |
| Mermaid | ❌ | Обычно нет |
Выравнивание:
| Left | Center | Right |
|---|---|---|
| A | B | C |
| 1 | 2 | 3 |
Код и подсветка синтаксиса
Inline code
Используйте npm run build для сборки проекта.
Bash
npm install
npm run develop
JavaScript
export default {
async find(ctx) {
const entities = await strapi.service('api::article.article').find();
return entities;
}
};
TypeScript
interface Article {
id: number;
title: string;
content: string;
publishedAt?: string;
}
SQL
SELECT id, title, published_at
FROM articles
WHERE published_at IS NOT NULL
ORDER BY published_at DESC;
Цитаты и вложенные блоки
Это простая цитата.
❗ Важное замечание:
Вложенная цитата
Markdown может вести себя по-разному в зависимости от рендерера.
HTML внутри Markdown
<div style="padding:16px; border:2px dashed #999; border-radius:8px;"> <strong>HTML-блок:</strong><br/> Этот блок написан напрямую на HTML внутри Markdown. </div> <br/> <details> <summary>Нажми, чтобы раскрыть</summary> Скрытый контент внутри <code><details></code> </details>Эмодзи и спецсимволы
🔥 🚀 ✅ ❌ ⚠️ 💡
© ® ™ € $ ₽ ₿
Unicode-текст:
Пример — длинное тире, кавычки «ёлочки», неразрывные пробелы.
Разделители и структурирование
Большой текстовый блок
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa.
Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Этот блок нужен для проверки:
- переносов строк
- ширины контейнера
- читабельности текста
Заключение
🎯 Результат:
Эта статья покрывает большинство Markdown-конструкций, которые могут использоваться в Strapi:
- заголовки
- списки
- таблицы
- код
- HTML
- изображения
- эмодзи
Если хочешь, дальше могу:
- адаптировать под конкретный Markdown-плагин Strapi
- сделать SEO-статью
- проверить что сломается в твоём текущем рендерере
- или подготовить stress-test с edge cases
Скажи 👍
