当前位置：首页 > article >正文

Markdown转HTML

article 2024/11/7 7:58:33

来源： https://juejin.cn/post/7310787455112445987

Markdown

一种简单易用的标记语言，旨在使纯文本格式化变得简单且易于阅读，它的设计目标是使文档易于阅读和书写同时保持格式的清晰和简洁

为什么会有Markdown转HTML的需求

尽管 Markdown 本身非常方便，但在某些情况下，将其转换为 HTML 是必要的
博客和网站：许多博客平台和静态站点生成器是使用markdown编写的内容，然后将其转换为HTML以在网页上展示
文档手册：技术文档、用户手册等经常使用 Markdown 编写，然后转换为 HTML 以便在网页上查看
等等

怎么转

EJS

一款强大的JavaScript引擎模板，它可以帮助我们在HTML中嵌入动态内容,文档地址：https://ejs.bootcss.com/

<% '脚本' 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

marked

Markdown解析器和编译器，它可以将Markdown语法转换为HTML标记

const marked = require('marked')
marked.parse(readme.toString()) //调用parse即可

BrowserSync

实时预览和同步您的网页更改

新建项目marked

新建文件夹marked，再执行npm init -y
分别安装ejs,marked,browser-sync

npm install ejs
npm install marked
npm install brower-sync

新建template.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=title %></title>
    <link rel="stylesheet" href = "./index.css"></link>
</head>
<body>
    <%- content %>
</body>
</html>

新建index.js

// 用于渲染ejs模板
const ejs = require('ejs'); 
// 读写文件
const fs = require('node:fs'); 
// markdown解析器和编译器，将markdown语法解析为html标记
const marked = require('marked'); 
// 同步读取README.md'件全部内容
const readme = fs.readFileSync('README.md');
// 启动本地服务器实时预览和同步网页的更改
const browserSync = require('browser-sync'); 
// 定义打开浏览器的函数
const openBrowser =  () => {
    // 创建一个浏览器同步实例
    const browser = browserSync.create()
    browser.init({
        server: {
            baseDir: './',//设置基础目录为当前目录
            index: 'index.html',//设置默认页面为 index.html
        }
    })
    return browser
}
// 渲染template.ejs模板，并将markdown内容作为参数传递给模板
ejs.renderFile('template.ejs', {
    content: marked.parse(readme.toString()),
    title:'markdown to html'
},(err,data)=>{
    if(err){
        // 如果出现错误打印错误信息
        console.log(err)
    }
    // fs创建一个写入流
    let writeStream = fs.createWriteStream('index.html')
    // 将渲染后的html内容写入到index.html文件中
    writeStream.write(data)
// 结束写入
    writeStream.end()
    // 监听写入完成事件，调用回调函数，打开浏览器
    writeStream.on('finish',()=>{
        openBrowser()
    })
})