Node.js+markdown-it无法自动转换MD为HTML并渲染到指定<div>怎么办？

问题分析 #

你的代码存在三个核心问题：

1. 环境API混淆：document.querySelector是浏览器端的DOM API，Node.js运行环境中不存在这个对象，直接运行会报错。
2. 无文件监听逻辑：当前代码仅执行一次MD转HTML操作，修改input.md后不会自动触发重新转换。
3. 缺少HTML更新机制：Node.js生成的HTML内容未传递到目标HTML文件的指定<div>中，浏览器无法获取最新转换结果。

解决方案 #

根据需求，提供两种常用实现方案：

方案1：静态文件自动生成（适合静态页面场景）

通过Node.js监听MD文件变化，自动将转换后的HTML写入目标HTML文件的指定位置。

修改后的convert.js代码：

const fs = require('fs');
const markdownIt = require('markdown-it');

const mdFilePath = 'ru/input.md';
const htmlTemplatePath = './index.html'; // 你的HTML文件路径

// 执行MD转HTML并更新目标HTML文件
function updateHtml() {
  try {
    // 读取MD内容并转换为HTML
    const mdContent = fs.readFileSync(mdFilePath, 'utf-8');
    const convertedHtml = markdownIt().render(mdContent); // 注意实例化markdown-it

    // 读取HTML模板，替换.vlog区域内容
    const templateHtml = fs.readFileSync(htmlTemplatePath, 'utf-8');
    const updatedHtml = templateHtml.replace(
      /<div class="vlog">[\s\S]*?<\/div>/,
      `<div class="vlog">${convertedHtml}</div>`
    );

    // 写入更新后的HTML文件
    fs.writeFileSync(htmlTemplatePath, updatedHtml);
    console.log('MD内容已同步更新到HTML');
  } catch (err) {
    console.error('转换失败:', err);
  }
}

// 初始执行一次转换
updateHtml();

// 监听MD文件变化，自动触发更新
fs.watch(mdFilePath, (eventType) => {
  if (eventType === 'change') {
    updateHtml();
  }
});

运行方式：在终端执行node convert.js，之后修改input.md内容，HTML文件会自动同步更新。

方案2：动态实时预览（适合需要实时查看效果的场景）

搭建一个简单的Node.js HTTP服务，监听MD文件变化，前端页面通过定时请求或WebSocket实时获取最新转换结果。

1. 创建server.js：

const fs = require('fs');
const http = require('http');
const markdownIt = require('markdown-it');
const path = require('path');

const mdFilePath = 'ru/input.md';
const port = 3000;
let latestConvertedHtml = '';

// 更新最新HTML内容
function refreshMdContent() {
  const mdContent = fs.readFileSync(mdFilePath, 'utf-8');
  latestConvertedHtml = markdownIt().render(mdContent);
}

// 初始加载+文件监听
refreshMdContent();
fs.watch(mdFilePath, refreshMdContent);

// 创建HTTP服务
const server = http.createServer((req, res) => {
  if (req.url === '/') {
    // 返回带初始内容的HTML页面
    const templateHtml = fs.readFileSync(path.join(__dirname, 'index.html'), 'utf-8');
    const pageHtml = templateHtml.replace(
      /<div class="vlog">[\s\S]*?<\/div>/,
      `<div class="vlog">${latestConvertedHtml}</div>`
    );
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(pageHtml);
  } else if (req.url === '/api/latest-md') {
    // 提供API返回最新转换的HTML
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(latestConvertedHtml);
  } else {
    res.writeHead(404);
    res.end('页面不存在');
  }
});

server.listen(port, () => {
  console.log(`服务运行在 http://localhost:${port}`);
});

2. 修改HTML页面，添加实时更新脚本：

<main>
    <div class="vlog"></div>
</main>
<script>
// 每隔2秒请求最新内容并更新页面
setInterval(() => {
  fetch('/api/latest-md')
    .then(res => res.text())
    .then(html => {
      document.querySelector('.vlog').innerHTML = html;
    });
}, 2000);
</script>

运行方式：终端执行node server.js，打开浏览器访问http://localhost:3000，修改input.md后页面会自动刷新内容。

内容的提问来源于stack exchange，提问作者Jask