Markdown To Poster: конвертируйте Markdown в социальные сети/маленькие красные плакаты с поддержкой онлайн-редактирования и развертывания в один клик.

Общее введение

Markdown to Image - это React-компонент для преобразования текста в формате Markdown в визуально привлекательные изображения для социальных сетей. Проект также включает встроенный веб-редактор, который можно использовать в качестве онлайн-редактора Markdown to Poster и поддерживает развертывание в один клик. Пользователи могут использовать компонент различными способами, в том числе интегрировать его в проект или использовать онлайн-редактор для редактирования и создания изображений.

Опыт работы в Интернете: https://readpo.com/poster

Список функций

• Рендеринг Markdown для изображений плакатов, оптимизированных для социального обмена
• Встроенные шаблоны поддерживают пользовательские шаблоны
• Предоставляет 9 предустановленных тем на выбор
• Копирование вывода в виде изображения
• Развертывание одним щелчком мыши на таких платформах, как Vercel
• Встроенный CORS-прокси для изображений позволяет легко вставлять онлайн-изображения в плакаты
• Копирование вывода в виде HTML-кода для удобства вставки в электронные письма и редакторы

Использование помощи

Процесс установки

1. проект клонирования ::

git clone https://github.com/gcui-art/markdown-to-image
cd markdown-to-image

2. Установка зависимостей ::

npm install

3. Начальные услуги ::

npm run dev

4. Доступ к редактору ::
   Откройте браузер и посетите http://localhost:3000Теперь доступен онлайн-редактор.

Использование веб-редактора

1. Откройте редактор ::
   интервью Онлайн-редактор.
2. Ввод содержимого в формате Markdown ::
   Введите или вставьте содержимое в формате Markdown в редактор.
3. Выберите шаблон и тему ::
   Выберите один из готовых шаблонов и тем или создайте свой собственный.
4. Создать изображение ::
   Нажмите кнопку "Создать", чтобы создать красивые изображения для социальных сетей.
5. Скопировать или скачать ::
   Вы можете скопировать созданное изображение в буфер обмена или загрузить его в виде файла изображения.

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

1. установленный компонент ::

npm i markdown-to-poster

2. Представляем компоненты ::

import 'markdown-to-poster/dist/style.css';
import { Md2Poster, Md2PosterContent, Md2PosterHeader, Md2PosterFooter } from 'markdown-to-poster';

3. Использование компонентов ::

const markdown = `# 标题\n这是一个示例 Markdown 内容。`;
return (
<Md2Poster>
<Md2PosterHeader>海报标题</Md2PosterHeader>
<Md2PosterContent>{markdown}</Md2PosterContent>
<Md2PosterFooter>海报底部</Md2PosterFooter>
</Md2Poster>
);

Индивидуальные шаблоны и темы

1. Выберите предустановленную тему ::
   Проект предлагает 9 предустановленных тем, которые вы можете выбрать в редакторе.
2. Индивидуальные шаблоны ::
   Вы можете настроить шаблон, чтобы изменить стиль и макет по своему усмотрению.

Развертывание в Верселе

1. Развертывание одним щелчком мыши ::
   удар (по клавиатуре)страница проектаНажмите кнопку "Развернуть с помощью Vercel" и следуйте подсказкам, чтобы завершить развертывание.
2. Пользовательские доменные имена ::
   После развертывания вы можете настроить пользовательское доменное имя для своего редактора.

Подробный порядок работы функций

1. Передача Markdown в виде изображения: Введите текст в формате Markdown в редактор, выберите предустановленную тему или собственный шаблон и нажмите кнопку Generate, чтобы сгенерировать изображение постера, оптимизированное для социального обмена.
2. Копирование вывода в виде изображения: После создания изображения нажмите кнопку Копировать, чтобы скопировать изображение в буфер обмена для удобства вставки в другие приложения.
3. Развертывание одним щелчком мыши: Развертывание в один клик с помощью таких платформ, как Vercel, для быстрого создания собственного онлайн-редактора Markdown to Poster Editor.
4. Интегрированный Picture CORS Agent: При вставке ссылки на онлайн-изображение в текст Markdown редактор автоматически обработает вопросы CORS и обеспечит правильное отображение изображения.