md-preview-cli-plus 1.0.0

package/.previewrc

@@ -0,0 +1,6 @@
+{
+  "theme": "default",
+  "pluginsFolder": [
+    "./plugins"
+  ]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 70v
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# Md-preview-CLI
+Markdown real-time preview + export
+
+Markdown 实时预览 + 导出工具
+
+CLI + Web + Markdown 三位一体
+
+由于CLI对兼容性要求高，选择 CommonJS 模块化方式
+# Get Start
+```bash
+npx md-preview --help #help
+npx md-preview README.md --port 4000 --theme dark --export ./666.html #无需下载 用完删除 不占空间
+```
+# Features
+1. **Build CLI Tool:** Use `commander` for argument parsing, help messages (`--help`), versioning (`-V` / `--version`), and error handling.
+2. **Watch File Changes:** Leverage `chokidar` for efficient, cross-platform file watching.
+3. **Open Files:** Use `open` to launch files or apps across platforms.
+4. **Colorful Terminal:** Integrate `chalk` for vibrant console output. 🌈
+5. **Hot Reloading:** Wrap `socket.io` in a `useSocket()` function to watch file changes and trigger browser refresh (similar to Vite).
+6. **HTML Exporting:** Add `--export <path>` to save rendered HTML output to a file.
+7. **Theme Support:** Provide multi-theme styling via `--theme=dark` or similar options.
+8. **Plugin Architecture:** Support custom parser plugins.
+9. **Packaging & Publishing:** Publish as an NPM package; allow usage via `npx md-preview`.
+10. **Syntax Highlighting:** Use `highlight.js` to render beautifully highlighted code blocks.
+# 🔌 Plugin System
+1. **Multiple Integration Options:**
+   - Pass plugin path via CLI arguments.
+   - Place plugins inside a directory (e.g. `plugins/`) and use a configuration file `.previewrc`.
+   - In case of conflicts, CLI arguments have higher priority than `.previewrc`.
+2. **Custom Plugin Lifecycle Hooks Supported:**
+   - `init`
+   - `beforeRender`
+   - `afterRender`
+# 功能细化
+1. 构建CLI 采用commander 解析参数、增加帮助信息--help、版本控制-V --version、错误处理
+2. 文件监听变化 chokidar 跨平台兼容性好 低耗能
+3. 打开open 打开各种文件程序 跨平台兼容性好 
+4. 打造彩色终端 🌈chalk
+5. 热刷新页面：封装socket.io为useSocket()监听变化并通知刷新页面（类似 Vite）
+6. 导出 HTML 功能：增加 --export 参数保存 HTML 文件
+7. 多主题支持：通过 --theme=dark 选择不同样式
+8. 插件机制：支持定制解析器 
+9. 打包发布：发布为 NPM 包，支持 npx md-preview
+10. 引入代码高亮 highlight.js
+# 插件机制
+1. 任选其一：可通过命令行传插件地址;也可以将插件放入某个目录下（例如plugins/）并设置插件配置文件`.previewrc`;如有冲突，则`.previewrc`配置优先级小于命令行参数
+2. 支持自定义插件，插件系统生命周期钩子 init、beforeRender/afterRender
+# 项目结构
+```bash
+md-preview/
+├── bin/
+│   └── cli.js              # CLI 命令入口
+├── lib/
+│   ├── plugins.js           # 插件加载器
+│   ├── preview.js          # 启动本地服务
+│   └── renderMarkdown.js   # Markdown 渲染函数
+├── public/
+│   └── template.html       # HTML 模板页面
+├── styles/
+│   └── style.css           # 样式（可替换主题）
+├── README.md
+├── package.json
+└── .gitignore
+plugins/
+├── copyright-plugin.js      # 示例插件
+```
+```js
+console.log("hello world")
+```
+

package/bin/cli.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+//const inquirer=require('inquirer')
+const { program } = require('commander')
+const path = require('path')
+const startPreview = require('../lib/preview')
+const pluginManager = require('../lib/pluginManager')
+const loadConfig=require('../lib/loadConfig')
+const loadPlugins=require('../lib/loader')
+
+//帮助信息自动生成，不需要手动写
+//默认命令触发条件就是和基本信息分开
+let file_d='path to the Markdown file'
+let port_d='specify preview port'
+let theme_d='choose theme style: default/dark'
+let export_d='export HTML to a given path (optional)'
+let plugin_d='load your plugins'
+
+program
+  .name('md-preview')
+  .description('Markdown real-time preview CLI')
+  .version('1.0.0')
+  
+  program
+      .argument('<file>',`${file_d}` )
+      .option('--port <port>',`${port_d}` , 3000)
+      .option('--theme <theme>',`${theme_d}` , 'default')
+      .option('--export <path>',`${export_d}` , null)
+      //修改CLI支持--plugin参数 可多个
+      .option('--plugin <path...>', `${plugin_d}`)//...是commander里的rest参数 
+      .action((file, options) => {
+        //console.log(options)
+
+        //调用加载配置并合并参数
+        // 加载 .previewrc
+        const rc = loadConfig()
+
+        // 合并 theme 设置（命令行优先生效）
+        options.theme = options.theme || rc.theme || 'default'
+
+        // 加载插件（来自 CLI 参数 + .previewrc + plugins/ 目录）
+        options.plugin = Array.from(new Set([
+          ...(loadPlugins(rc.pluginsFolder) || []),
+          ...(options.plugin || [])
+        ]));
+        //console.log(options.plugin)
+        // 注册所有传入的插件
+        if (options.plugin && options.plugin.length) {
+          for (const pluginPath of options.plugin) {
+            const abs = path.resolve(process.cwd(), pluginPath)
+            const plugin = require(abs)
+            pluginManager.use(plugin)
+          }
+        }
+
+        const absolutePath = path.resolve(process.cwd(), file);
+        startPreview(absolutePath, options,pluginManager);
+      });
+
+program.parse() // 默认使用 process.argv

package/lib/loadConfig.js

@@ -0,0 +1,21 @@
+//配置读取模块 lib/loadConfig.js
+
+const fs = require('fs')
+const path = require('path')
+
+function loadConfig() {
+  const configPath = path.resolve(process.cwd(), '.previewrc')
+  if (!fs.existsSync(configPath)) return {}
+
+  try {
+    const raw = fs.readFileSync(configPath, 'utf-8')
+    const config = JSON.parse(raw)
+    return config
+  } catch (e) {
+    console.warn('⚠️ Failed to load .previewrc :', e.message)
+    return {}
+  }
+}
+
+module.exports = loadConfig
+

package/lib/loader.js

@@ -0,0 +1,30 @@
+//loader.js 
+//把配置的插件都加载放入并返回
+const path = require('path')
+const fs = require('fs')
+
+function loadPlugins(folder_path) {
+  let plugins = []
+  //把folder_path中每个目录里的插件注册完
+  for(const folder of folder_path){
+    const pluginsDir = path.resolve(process.cwd(), folder);
+  
+    fs.readdirSync(pluginsDir).forEach(file => {
+      const fullPath = path.join(pluginsDir, file);
+
+      // 只加载 .js 文件
+      if (fs.statSync(fullPath).isFile() && file.endsWith('.js')) {
+          //const plugin = require(fullPath);
+        plugins.push(fullPath)
+        
+      }else console.warn(`⚠️ Plugin not found at ${fullPath}`)
+    });
+  }
+  
+  return plugins
+}
+
+module.exports = loadPlugins
+
+    
+    

package/lib/pluginManager.js

@@ -0,0 +1,58 @@
+//lib/pluginManager.js
+const fs = require('fs')
+const path = require('path')
+
+class PluginManager {
+  constructor() {
+    this.plugins = []
+  }
+  // 注册插件
+  use(plugin) {
+    if (typeof plugin === 'object') {
+      // 调用 init 钩子
+      if (typeof plugin.init === 'function') {
+        try {
+          plugin.init()
+        } catch (e) {
+          console.warn(`Failed to init plugin： ${plugin.name} `, e)
+        }
+        console.log(`✅ Loaded plugin: ${plugin.name}`);
+      }
+      this.plugins.push(plugin)
+    } else {
+      console.warn(`Invalid plugin：${plugin}`)
+    }
+    return this // 支持链式调用
+  }
+
+  allBeforeRender(content,theme='default'){
+  try{
+    // 插件处理原始内容
+    for (const plugin of this.plugins) {
+        if (plugin.beforeRender) {
+        content = plugin.beforeRender(content, { theme })
+        }
+    }
+    return content;
+  }catch(err){
+    console.error(`❌ Failed to use the plugin: ${err.message}`)
+    }
+  }
+
+ allAfterRender(html,theme='default'){
+  // 插件处理 HTML 内容
+  try{
+    for (const plugin of this.plugins) {
+    if (plugin.afterRender) {
+      html = plugin.afterRender(html, { theme })
+    }
+    }
+    return html;
+  }catch(err){
+    console.error(`❌ Failed to use the plugin:${err.message}`)
+  }
+}
+  // 渲染流程，交给插件机制外部
+}
+
+module.exports = new PluginManager()

package/lib/preview.js

@@ -0,0 +1,46 @@
+const express = require('express')
+const fs = require('fs')
+const path = require('path')
+const {Server} =require('socket.io')
+const chokidar = require('chokidar')
+const markdownToHtml = require('./renderMarkdown')
+const open = require('open')
+const chalk = require('chalk')
+
+function startPreview(filePath, options,pluginManager) {
+  const app = express()
+  const port = options.port || 3000
+
+  app.get('/', (req, res) => {
+    let html = markdownToHtml(filePath, options.theme,options.port,pluginManager)
+    html=pluginManager.allAfterRender(html,options.theme)
+    if(options.export){
+      const exportPath = path.resolve(process.cwd(), options.export);
+      fs.writeFileSync(exportPath, html);
+      console.log(chalk.green(`✅ HTML exported to: ${exportPath}`));
+    }
+    res.send(html)
+  })
+
+  const watcher = chokidar.watch(filePath)
+  
+  app.use(express.static(path.join(__dirname, '../styles')))
+  app.use(express.static(path.join(__dirname, '../public')))
+
+  const server=app.listen(port, () => {
+    console.log(chalk.cyan(`🚀 Local preview started at http://localhost:${port}`))
+    open(`http://localhost:${port}`)
+  })
+  const io = new Server(server, {
+    cors: { origin: '*' }
+  })
+  io.on('connection', (socket) => {
+  //console.log('connecting...')
+  })
+  watcher.on('change', () => {
+    console.log(chalk.green('📄 Markdown file updated, refreshing page automatically.'))
+    io.emit('update')
+  })
+}
+
+module.exports = startPreview

package/lib/renderMarkdown.js

@@ -0,0 +1,49 @@
+const fs = require('fs')
+const markdownIt = require('markdown-it')
+
+function markdownToHtml(filePath, theme = 'default',port,pluginManager) {
+  const md = new markdownIt({
+    html: true,
+    linkify: true,//自动识别链接文本
+    typographer: true//排版符号美化
+  })
+
+  let markdownContent = fs.readFileSync(filePath, 'utf-8')
+  markdownContent=pluginManager.allBeforeRender(markdownContent,theme)
+  
+  let htmlContent = md.render(markdownContent)
+
+  return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Markdown Preview</title>
+  <link rel="stylesheet" href="/${theme}.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github-dark.min.css">
+</head>
+<body>
+  <div class="content">
+    ${htmlContent}
+  </div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
+  <script>
+    hljs.highlightAll(); // 自动高亮所有 <pre><code> 块
+  </script>
+  <script type="module">
+    import { useSocket } from '/useSocket.js'
+
+    useSocket({
+      serverUrl: 'http://localhost:${port}',
+      onUpdate: (html) => {
+        //document.querySelector('.content').innerHTML = html
+        location.reload()
+      }
+    })
+  </script>
+</body>
+</html>`;
+
+}
+
+module.exports = markdownToHtml

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "md-preview-cli-plus",
+  "version": "1.0.0",
+  "description": "md real-time preview + export",
+  "keywords": [
+    "markdown",
+    "cli",
+    "preview",
+    "node"
+  ],
+  "homepage": "https://github.com/70v-Yoyo/Md-preview-CLI#readme",
+  "bugs": {
+    "url": "https://github.com/70v-Yoyo/Md-preview-CLI/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/70v-Yoyo/Md-preview-CLI.git"
+  },
+  "license": "MIT",
+  "author": "WYY",
+  "type": "commonjs",
+  "main": "bin/cli.js",
+  "bin": {
+    "md-preview": "./bin/cli.js"
+  },
+  "scripts": {
+    "start": "node bin/cli.js"
+  },
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "chokidar": "^4.0.3",
+    "commander": "^14.0.0",
+    "express": "^5.1.0",
+    "markdown-it": "^14.1.0",
+    "mongoose": "^8.16.3",
+    "open": "^8.4.0",
+    "socket.io": "^4.8.1"
+  }
+}

package/plugins/copyright-plugin.js

@@ -0,0 +1,14 @@
+//This is also a sample plugin.
+module.exports = {
+  name: 'copyright-plugin',
+  
+  // 在渲染前调用，可修改原始内容
+  beforeRender(content, options) {
+    return content
+  },
+
+  // 渲染为 HTML 后调用，可修改 HTML 字符串
+  afterRender(html, options) {
+    return html + `<footer><p style="text-align:center;color:#aaa;">© 70v-Yoyo </p></footer>`
+  }
+}

package/public/useSocket.js

@@ -0,0 +1,24 @@
+// useSocket.js（浏览器端模块，支持原生或 Vite 项目）
+import { io } from 'https://cdn.socket.io/4.7.5/socket.io.esm.min.js'
+
+export function useSocket({ serverUrl, onUpdate }) {
+  const socket = io(serverUrl)
+
+  socket.on('connect', () => {
+    console.log('✅ 已连接 Socket.IO 服务')
+  })
+
+  socket.on('disconnect', () => {
+    console.warn('⚠️ Socket 断开连接')
+  })
+
+  // 接收后端推送的 HTML 内容
+  socket.on('update', (htmlContent) => {
+    console.log('📥 收到 update 事件')
+    if (typeof onUpdate === 'function') {
+      onUpdate(htmlContent)
+    }
+  })
+
+  return socket
+}

package/styles/dark.css

@@ -0,0 +1,41 @@
+body {
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+  font-family: 'Segoe UI', sans-serif;
+  line-height: 1.6;
+  padding: 2rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: #ffffff;
+  border-bottom: 1px solid #333;
+}
+
+a {
+  color: #4fc3f7;
+  text-decoration: none;
+}
+
+code, pre {
+  background-color: #2d2d2d;
+  color: #f8f8f2;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+}
+
+blockquote {
+  border-left: 4px solid #555;
+  padding-left: 1em;
+  color: #aaa;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th, td {
+  border: 1px solid #444;
+  padding: 0.5em;
+}

package/styles/default.css

@@ -0,0 +1,20 @@
+body {
+  font-family: sans-serif;
+  padding: 40px;
+  max-width: 720px;
+  margin: auto;
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+h1, h2, h3 {
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 4px;
+}
+
+pre {
+  background-color: #2d2d2d;
+  color: #f8f8f2;
+  padding: 12px;
+  overflow-x: auto;
+}