마크다운을 포스터로: 온라인 편집 및 원클릭 배포 지원을 통해 마크다운을 소셜 미디어/작은 빨간색 포스터로 변환하세요.

2.1K 00

일반 소개

마크다운 투 이미지는 마크다운 텍스트를 시각적으로 매력적인 소셜 미디어 이미지로 렌더링하기 위한 React 컴포넌트입니다. 이 프로젝트에는 온라인 마크다운 투 포스터 편집기로 사용할 수 있는 내장 웹 편집기도 포함되어 있으며 원클릭 배포를 지원합니다. 사용자는 컴포넌트를 프로젝트에 통합하거나 온라인 편집기를 사용하여 이미지를 편집하고 생성하는 등 다양한 방법으로 이 컴포넌트를 사용할 수 있습니다.

Markdown To Poster：将Markdown转换为社交媒体/小红书海报，支持在线编辑和一键部署。

온라인 체험: https://readpo.com/poster

기능 목록

소셜 공유에 최적화된 포스터 이미지 렌더링 마크다운
기본 제공 템플릿은 사용자 지정 템플릿을 지원합니다.
선택할 수 있는 9가지 사전 설정 테마 제공
출력을 이미지로 복사
Vercel과 같은 플랫폼에 원클릭 배포
온라인 이미지를 포스터에 쉽게 삽입할 수 있는 통합 이미지 CORS 프록시
이메일과 편집기에 쉽게 붙여넣을 수 있도록 출력을 HTML 코드로 복사하세요.

도움말 사용

설치 프로세스

복제 프로젝트 ::

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

종속성 설치 ::

npm install

서비스 시작 ::

npm run dev

편집기 액세스 ::
브라우저를 열고 다음 사이트를 방문하세요. http://localhost:3000이제 온라인 편집기를 사용할 수 있습니다.

웹 편집기 사용

편집기를 엽니다. ::
인터뷰 온라인 편집기.
마크다운 콘텐츠 입력 ::
편집기에 마크다운 콘텐츠를 입력하거나 붙여넣습니다.
템플릿 및 테마 선택 ::
미리 설정된 템플릿과 테마 중 하나를 선택하거나 사용자 지정할 수 있습니다.
이미지 생성 ::
생성 버튼을 클릭하여 멋진 소셜 미디어 이미지를 렌더링합니다.
복사 또는 다운로드 ::
생성된 이미지를 클립보드에 복사하거나 이미지 파일로 다운로드할 수 있습니다.

프로젝트에 통합

설치된 구성 요소 ::

npm i markdown-to-poster

구성 요소 소개 ::

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

컴포넌트 사용 ::

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

사용자 지정 템플릿 및 테마

사전 설정 테마 선택 ::
이 프로젝트는 편집기에서 선택할 수 있는 9가지 사전 설정 테마를 제공합니다.
사용자 지정 템플릿 ::
템플릿을 사용자 지정하여 필요에 따라 스타일과 레이아웃을 수정할 수 있습니다.

Vercel에 배포

원클릭 배포 ::
스트라이크(키보드에서)프로젝트 페이지"Vercel로 배포" 버튼을 클릭하고 지시에 따라 배포를 완료합니다.
사용자 지정 도메인 이름 ::
배포가 완료되면 편집기의 사용자 지정 도메인 이름을 구성할 수 있습니다.

세부 기능 작동 흐름

마크다운을 이미지로 렌더링하기편집기에 마크다운 텍스트를 입력하고 미리 설정된 테마 또는 사용자 지정 템플릿을 선택한 다음 생성 버튼을 클릭하면 소셜 공유에 최적화된 포스터 이미지가 생성됩니다.
출력을 이미지로 복사이미지를 생성한 후 복사 버튼을 클릭하여 이미지를 클립보드에 복사하면 다른 애플리케이션에 쉽게 붙여넣을 수 있습니다.
원클릭 배포Vercel과 같은 플랫폼을 통해 클릭 한 번으로 배포하여 온라인 마크다운에서 포스터 에디터로 빠르게 구축할 수 있습니다.
통합 사진 CORS 에이전트온라인 이미지 링크를 마크다운 텍스트에 삽입하면 편집기가 자동으로 CORS 문제를 처리하고 이미지가 제대로 표시되도록 합니다.