Markdown Image Generator

中文 | English | 日本語

项目预览

示例 1	示例 2

---

中文

项目简介

Markdown Image Generator 是一个将 Markdown 文本转换为精美图片的网页工具。用户可以输入 Markdown 格式的文本，自定义字体、样式、背景和作者署名，并下载为 9:16 比例的高清图片。

开发团队: tibidabo 和 Deepseek 共同完成

主要功能

• ✅ 支持 Markdown 语法（粗体、斜体、标题、列表、链接等）
• 🎨 多种字体选择（衬线体、无衬线体、连笔字等）
• 🔍 可调节字体大小（14px-60px）
• ✒️ 文字样式（常规、斜体、粗体）
• 🎨 自定义文字颜色
• 🌈 8种精美渐变背景
• ✍️ 作者署名
• 📊 字数统计
• 👁️ 实时预览
• 💾 下载高清图片（720x1280）

使用说明

1. 在文本框中输入 Markdown 格式的文本
2. 设置作者署名（如 @tibidabo）
3. 选择字体、大小、样式和颜色
4. 选择背景风格
5. 点击"生成精美图片"按钮预览效果
6. 满意后点击"下载图片"按钮保存

示例

- 🧠*Be the one who you needed when you were younger.*
- 🌎**不要忽视梦想。不要工作过久。说出想法。交朋友。 要开心。**
- [Tibidabo](https://github.com/Rarestq)

项目结构

├── index.html         # 主页面文件
├── style.css          # 样式表
├── script.js          # 脚本文件
└── README.md          # 项目文档

技术栈

• HTML5
• CSS3（Flexbox、Grid、渐变）
• JavaScript（ES6）
• Marked.js - Markdown解析器
• html2canvas - HTML转Canvas工具

---

English

Project Overview

Markdown Image Generator is a web tool that converts Markdown text into beautiful images. Users can input Markdown-formatted text, customize fonts, styles, backgrounds, and author signatures, and download high-definition images in 9:16 aspect ratio.

Development Team: Created by tibidabo and Deepseek

Key Features

• ✅ Markdown syntax support (bold, italic, headings, lists, links, etc.)
• 🎨 Multiple font choices (serif, sans-serif, cursive, etc.)
• 🔍 Adjustable font size (14px-60px)
• ✒️ Text styles (normal, italic, bold)
• 🎨 Custom text color
• 🌈 8 beautiful gradient backgrounds
• ✍️ Author signature
• 📊 Word count
• 👁️ Real-time preview
• 💾 Download high-definition images (720x1280)

Usage

1. Enter Markdown text in the input box
2. Set author signature (e.g., @tibidabo)
3. Select font, size, style, and color
4. Choose a background style
5. Click the "Generate" button to preview
6. Click the "Download" button to save the image

Example

- 🧠*Be the one who you needed when you were younger.*
- 🌎**不要忽视梦想。不要工作过久。说出想法。交朋友。 要开心。**
- [Tibidabo](https://github.com/Rarestq)

Project Structure

├── index.html         # Main HTML file
├── style.css          # Stylesheet
├── script.js          # JavaScript file
└── README.md          # Project documentation

Technology Stack

• HTML5
• CSS3 (Flexbox, Grid, Gradients)
• JavaScript (ES6)
• Marked.js - Markdown parser
• html2canvas - HTML to Canvas library

---

日本語

プロジェクト概要

Markdown Image Generatorは、Markdownテキストを美しい画像に変換するウェブツールです。ユーザーはMarkdown形式のテキストを入力し、フォント、スタイル、背景、著者署名をカスタマイズして、9:16の高解像度画像としてダウンロードできます。

開発チーム: tibidabo と Deepseek によって共同開発されました

主な機能

• ✅ Markdown構文のサポート（太字、斜体、見出し、リスト、リンクなど）
• 🎨 複数のフォント選択（セリフ、サンセリフ、筆記体など）
• 🔍 フォントサイズの調整（14px-60px）
• ✒️ テキストスタイル（標準、斜体、太字）
• 🎨 カスタムテキストカラー
• 🌈 8種類の美しいグラデーションバックグラウンド
• ✍️ 著者署名
• 📊 文字数カウント
• 👁️ リアルタイムプレビュー
• 💾 高解像度画像ダウンロード（720x1280）

使用方法

1. テキストボックスにMarkdown形式のテキストを入力します
2. 著者署名を設定します（例：@tibidabo）
3. フォント、サイズ、スタイル、色を選択します
4. 背景スタイルを選択します
5. 「生成」ボタンをクリックしてプレビューします
6. 満足したら「ダウンロード」ボタンをクリックして画像を保存します

例

- 🧠*Be the one who you needed when you were younger.*
- 🌎**不要忽视梦想。不要工作过久。说出想法。交朋友。 要开心。**
- [Tibidabo](https://github.com/Rarestq)

プロジェクト構成

├── index.html         # メインページファイル
├── style.css          # スタイルシート
├── script.js          # スクリプトファイル
└── README.md          # プロジェクトドキュメント

技術スタック

• HTML5
• CSS3（Flexbox、Grid、グラデーション）
• JavaScript（ES6）
• Marked.js - Markdownパーサー
• html2canvas - HTMLからCanvasへの変換ライブラリ

---

许可证

本项目采用 GPL-3.0 许可证