Skip to content

dhjz/markdown-export

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Markdown 转换器

一个简洁优雅的 Markdown 转换工具,支持将 Markdown 内容转换为 Word、PDF、HTML 等多种格式,并提供丰富的模板样式。

功能特性

  • 实时预览 - 输入 Markdown 内容即时渲染预览
  • 多格式导出 - 支持导出 Word (.docx)、PDF、HTML 文件
  • 富文本复制 - 一键复制渲染后的富文本到剪贴板
  • 模板系统 - 内置多种精美模板,支持自定义样式配置
  • 数学公式 - 支持 LaTeX 数学公式渲染 (KaTeX)
  • 代码高亮 - 支持多种编程语言语法高亮 (Prism.js)
  • 历史记录 - 自动保存编辑历史,方便快速恢复
  • 本地存储 - 模板选择和配置自动保存,下次打开自动恢复

项目结构

dmd/
├── index.html              # 主页面
├── static/
│   ├── index.js            # 主程序逻辑 (Vue 3)
│   ├── index.css           # 样式文件
│   ├── utils.js            # 工具函数
│   ├── tpl.js              # 模板配置数组
│   └── lib/
│       └── html-docx.min.js # HTML 转 Word 库
└── README.md

内置模板

模板名称 分类 说明
默认模板 极简 简洁清爽的默认样式
商务蓝 商务 适合商务报告文档
学术风格 学术 严谨规范的学术论文样式
清新绿 极简 自然清新的绿色主题
科技灰 商务 现代科技感灰色主题
温暖橙 商务 温暖活力的橙色主题
优雅紫 学术 优雅高贵的紫色主题
简约黑白 极简 极简主义黑白风格
深蓝海洋 商务 深邃稳重的蓝色主题

使用方法

  1. 直接用浏览器打开 index.html 文件
  2. 在左侧输入框中输入 Markdown 内容
  3. 点击「选择模板」选择喜欢的样式
  4. 点击「编辑模板」自定义颜色、字体、大小等
  5. 点击导出按钮选择需要的格式

模板配置说明

每个模板包含以下可配置项:

{
  colors: {
    title: '#1a1a1a',      // 标题颜色
    text: '#333333',       // 正文颜色
    link: '#0066cc',       // 链接颜色
    codeBg: '#f5f5f5',     // 代码背景色
    quoteColor: '#666666', // 引用文字颜色
    quoteBorder: '#dddddd' // 引用边框颜色
  },
  fonts: {
    title: "'Microsoft YaHei', sans-serif",  // 标题字体
    text: "'Microsoft YaHei', sans-serif",   // 正文字体
    code: "'Consolas', 'Monaco', monospace"  // 代码字体
  },
  sizes: {
    h1: 22,    // 一级标题字号 (pt)
    h2: 16,    // 二级标题字号 (pt)
    h3: 14,    // 三级标题字号 (pt)
    text: 12   // 正文字号 (pt)
  },
  spacing: {
    lineHeight: 1.8,       // 行高
    paragraphMargin: 16    // 段落间距 (px)
  }
}

扩展模板

static/tpl.js 文件中添加新的模板对象即可扩展:

var templates = [
  {
    id: 10,  // 唯一ID
    name: '我的模板',
    category: '自定义',
    preview: '# 预览文字',
    config: {
      // 配置项...
    }
  },
  // ... 其他模板
];

技术栈

  • Vue 3 - 渐进式 JavaScript 框架 (选项式 API)
  • Element Plus - Vue 3 UI 组件库
  • marked - Markdown 解析器
  • KaTeX - 数学公式渲染
  • Prism.js - 代码语法高亮
  • html-docx-js - HTML 转 Word 文档

其他说明

许可证

MIT License

About

一个简洁优雅的 Markdown 转换工具,纯前端html实现, 支持将 Markdown 内容转换为 Word、PDF、HTML 等多种格式,并提供丰富的模板样式。Markdown 转换器

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors