Markdown To Poster: オンライン編集とワンクリック配備サポートで、Markdownをソーシャルメディアや小赤字ポスターに変換します。

Markdown to Imageは、Markdownテキストを視覚的に魅力的なソーシャルメディア画像にレンダリングするためのReactコンポーネントです。このプロジェクトには、オンラインのMarkdown to Posterエディタとして使用できる組み込みWebエディタも含まれており、ワンクリックのデプロイメントをサポートしています。ユーザーは、プロジェクトに統合したり、オンラインエディタを使って画像を編集・生成するなど、さまざまな方法でコンポーネントを使用することができます。

オンライン経験：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コンテンツをエディタに入力またはペーストしてください。
3. テンプレートとテーマを選ぶ ::
   あらかじめ用意されたテンプレートやテーマから選ぶか、カスタマイズすることができます。
4. 画像の生成 ::
   Generateボタンをクリックすると、美しいソーシャルメディア画像がレンダリングされます。
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エディタを素早く構築できます。
4. 統合画像CORSエージェントオンライン画像リンクをMarkdownテキストに挿入すると、エディタは自動的にCORSの問題を処理し、画像が適切に表示されるようにします。