【Github】用nodejs将Markdown转换成HTML.md
这篇笔记昨天写了一下感觉写的有点差... 技术脱离实际没啥意义....我上篇笔记一直在写技术, 如果不是想要实现相同的工具的人, 就不会打开那一篇文章.
这篇文章做了一点优化.
Markdown是一种标记语言, ta有丰富的优势:
- Markdown可以在任何地方使用
- Markdown是非常轻便的, ta可以被任何应用打开;对比doc .docx就必须使用Word或者WPS
- Markdown是兼容的, ta不分平台, 可以正常显示, 包括在手机端, 网页端, Windows和mac
- 程序员的世界到处都是Markdown. Github, Csdn, 简书, 掘金等都支持Markdown编辑
使用Markdown可以让你专注于写作而不是专注于格式调整等. 你只需要使用正确的语法表述自己想要表达的内容, 剩下的展示就交给css代码即可.(导入不同的主题包或者依附不同的平台主题)
这篇笔记就是使用Markdown来生成的, 作者使用了typora来进行生成, 然后使用墨滴软件的mdToHtml进行转换后,发布公众号文章
在这篇文章中，我们将使用 Node.js 和 CLI 命令读取 Markdown 文件，将该文件转换为 HTML 字符串，然后将 HTML 字符串写入新文件。创建文件后，我们可以启动本地开发服务器以在 Web 浏览器中测试该文件.
开始
第一步,配置cli
首先应该设置Node cli项目, 在项目目录下, 执行下面的初始化操作.
npm init
通过在打开项目文件夹的终端窗口中运行命令来设置与 Node.js 一起使用的 package.json 文件。然后按照 npm init 进程显示的提示操作，应该已经创建了 package.json 文件。有了 package.json 文件，我们可以运行其他命令来安装用于将 Markdown 转换为 HTML 的 npm 包。
第二步,安装package
在同一终端窗口中运行
npm install markdown-it highlight.js fs-extra cross-env rimraf @babel/cli @babel/core @babel/preset-env @babel/preset-typescript --save
然后运行
npm install typescript @types/node @types/markdown-it @types/fs-extra --save-dev
运行这两个命令后，项目文件夹中应出现一个名为“node_modules”的新文件夹。在“node_modules”文件夹中安装了以下 npm 软件包：
为了支持 ES 模块，package.json 文件中还必须包含一项配置。这是“type”属性，其值设置为“module”，如下所示。
{
"type": "module"
}
完整的package.json如下
{
"name": "mdtohtml",
"version": "1.0.0",
"description": "",
"main": "hello.js",
"scripts": {
"mdc": "node src/mdc.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/jest": "^29.5.1",
"@types/marked": "^4.3.0",
"@types/node": "^20.1.4",
"@typescript-eslint/eslint-plugin": "^5.59.5",
"@typescript-eslint/parser": "^5.59.5",
"ts-jest": "^29.1.0",
"ts-node": "^10.9.1",
"typescript": "^5.0.4",
"webpack": "^5.82.1",
"webpack-cli": "^5.1.1"
},
"dependencies": {
"commander": "^10.0.1",
"fs-extra": "^11.1.1",
"github-markdown-css": "^5.2.0",
"marked": "^5.0.2",
"open": "^9.1.0"
},
"bin": {
"mdc": "./src/mdc.js"
}
}
如果您在安装软件包时遇到问题，请尝试从上面复制 package.json 并将其保存为 package.json 文件，然后运行命令npm install来安装所有列出的软件包。
使用 tsconfig.json 配置 TypeScript 编译器
将 Markdown 转换为 HTML 不需要 TypeScript，但与使用 TypeScript 的好处相比，不需要添加太多额外的配置。由于刚刚安装了 TypeScript 的 npm 包，我们可以将一个新文件添加到名为“tsconfig.json”的项目文件夹中.
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
},
"noEmitOnError": true,
"exclude": [
"node_modules"
]
}
第三步: 创建Markdown文件
# H1
## H2
### H3
#### H4
**bold text**
_italicized text_
> blockquote
1. First item
2. Second item
3. Third item
- First item
- Second item
- Third item
`code`
---
```javascript
function() {
console.log("This is some javascript included in a markdown code block, and it will be converted to valid HTML with code syntax highlighting.");
}
```
<kbd>this is a keyboard input html element</kbd>
```html
<span>this will remain html even after the Markdown is converted to HTML</span>
```
[Dev Extent](https://www.devextent.com)
我们会用这个文件作为测试文件.
其余代码如下
#!/usr/bin/env node
// 导入必要的模块
const commander = require('commander'); // 导入命令行解析库
const marked = require('marked'); // 导入Markdown解析库
const fs = require('fs-extra'); // 导入文件系统增强库
const path = require('path'); // 导入路径处理库
// 使用commander定义程序的基础信息
commander
.version('1.0.0') // 设置程序版本
.description('A CLI tool to convert Markdown to GitHub-styled HTML') // 设置程序描述
.arguments('<file>') // 定义一个名为file的命令行参数
.action((file) => { // 定义一个函数，用于处理当用户提供文件参数时的操作
// 解析文件路径，获取文件名和目录名
const filePath = path.resolve(file);
const fileName = path.basename(filePath, '.md');
const dirName = path.dirname(filePath);
// 读取Markdown文件
fs.readFile(filePath, 'utf8', (err, data) => {
if (err) {
console.error(`Could not read file: ${filePath}`);
process.exit(1); // 如果出错，退出程序
}
// 使用marked库将Markdown内容转换为HTML
const html = marked.parse(data);
// 读取GitHub风格的CSS文件
const css = fs.readFileSync(require.resolve('github-markdown-css'), 'utf8');
// 创建完整的HTML内容，包括CSS样式和Markdown转换的HTML
const htmlContent = `
<style>
${css}
</style>
<article class="markdown-body">
${html}
</article>
`;
// 将HTML内容写入到新的HTML文件中
fs.writeFile(`${dirName}/${fileName}.html`, htmlContent, 'utf8', (err) => {
if (err) {
console.error(`Could not write file: ${fileName}.html`);
process.exit(1); // 如果出错，退出程序
}
// 输出成功转换的消息
console.log(`Converted ${fileName}.md to ${fileName}.html successfully!`);
});
});
});
// 解析命令行参数，启动程序
commander.parse(process.argv);
运行效果如下
使用方法
A CLI tool to convert Markdown to GitHub-styled HTML
把test.md文件改成自己的文件, 然后运行mdc test.md 即可获得对应的html文件
我设置了直接自动运行. 用到了open库
整体代码流程
使用命令行启动程序-> 提供参数(这里是md文件名)-> 解析文件路径->找到md文件-> 将md文件转换成html->读取css文件->结合两者生成新的github风格html文件.
commander库介绍
- 描述:
commander是一个轻量级的，表达式丰富的命令行解析库，它可以帮助你轻松地创建命令行工具。 - 功能: 它提供了参数解析、帮助文本的生成、子命令和其他有用的命令行界面特性。
在代码中，commander 被用来定义程序的版本，描述，接受的参数，并定义当用户提供这些参数时应该执行的操作.
marked库介绍
- 描述:
marked是一个Markdown解析器和编译器，用于将Markdown转换为HTML。 - 功能: 它可以解析Markdown文本并生成对应的HTML代码。
Source Map介绍
可以看到我的文件结构里有一个叫做mdc.js.map的文件他是一个Source Map文件. 它的作用如下
例如，当你使用如 Babel 这样的转译器将 ES6+ JavaScript 转译为 ES5 代码时，或使用 UglifyJS 压缩你的代码时，源代码的结构会发生变化。如果在运行时出现错误，错误堆栈可能会指向转译或压缩后的代码，这使得调试变得困难。有了 Source Map，开发工具可以显示原始代码中的错误位置，而不是转译/压缩后的代码位置。
注意: 仅用于开发：虽然 Source Maps 在开发和调试过程中非常有用，但在生产环境中通常不会提供它们，因为它们可能会暴露源代码的结构和内容。
fs-extra介绍
fs-extra是Node.js的文件系统模块的扩展，添加了常用的方法并简化了使用。- 功能: 它提供了一系列用于文件和目录操作的方法，例如复制、删除、读取和写入文件等。
path介绍
- 描述:
path是Node.js的内置模块，用于处理文件和目录的路径。 - 功能: 它提供了一系列方法来处理和转换文件路径
总结
这次小工具,根据自己配置ts和webpack来构建一个cli工具, 使用户可以将Markdown文件转换成github风格的html文件. 经过测试已经可以运行, 已经发到github地址: github链接:github.com/Shinkai007/….
但是并没有进行性能测试, 未来可能使用不同大小的md文件来进行测试.
比如: 使用1mb 100mb 1000mb的文件来测试这个工具的效果. 默认为5s内生成最佳. 可能会对大型文件的处理进行切片.
还可以考虑生成Vscode插件或者集成为exe等. 让用户使用方便.
