[NodeJS] Express 处理 markdown——marked+prism+github-markdown-css

最新推荐文章于 2025-08-17 13:57:32 发布
最新推荐文章于 2025-08-17 13:57:32 发布
阅读量6.3k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： NodeJs 学习笔记 文章标签： nodejs express markdown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Elliott_Yoho/article/details/53440296
本文介绍了如何在NodeJS的Express应用中处理Markdown文件，结合marked、github-markdown-css和prismjs实现Markdown内容的解析、样式美化和代码高亮。文章详细阐述了每个组件的作用、安装步骤以及整合到Express应用的过程，包括使用jade模板引擎和自定义样式调整。

环境

  • 操作系统: Ubuntu 16.04
  • Node: v7.0.0
  • Express: 4.x

模块及样式

markdown解析工具 和 样式及语法高亮的插件有很多，比如解析工具还有markdown-js，语法高亮还有Google Code Prettify，等等。

这里我们只介绍使用其中的三个，作为一个组合。

Marked

A full-featured markdown parser and compiler, written in JavaScript. Built for speed.

这是它的github上的介绍，安装和基本使用在github上都有，我使用它的最新版本 v0.3.6。
用它来解析 markdown 语法。

Github-markdown-css

The minimal amount of CSS to replicate the GitHub Markdown style

用来给解析好的 html 加样式，这里有个使用它的示例: Demo

Prismjs

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

它是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建的，同时支持大部分流行的编程语言，并且支持多种主题样式。使用起来也很简单，只需要在 html 中引入 css 和 js 文件即可。

我们可以根据需要自己在 Prismjs Download 中选择主题、语言和各种插件。

目录介绍

就是 express-generator 默认生成的目录，在根目录加了个 markdown 文件夹，里面放 .md 文

最低0.47元/天 解锁文章

200万优质内容无限畅学
[Web] 简易Markdown可预览编辑器 —— Codemirror+Marked+Prism
从入门到扑街
12-16 7237
代码很简单，都是在用别人写好的东西，觉得这个还是有点用，所以简单记录一下。 在线预览: http://118.89.16.142:8000/csdndemo/markdown 插件 文本编辑: Codemirror Markdown解析: Marked Markdown Css: Github-markdown-css 代码高亮: prismjs 效果预览代码除了插件那些的js和css文件，就只
NodeJs + Express+ Sequelize ORM + Mysql+ Vue3 + Element-plus 开箱即用的全栈项目解决方案。
web_houzhanguo的博客
06-28 1036
NodeJs + Express+ Sequelize ORM + Mysql+ Vue3 + Element-plus 开箱即用的全栈项目解决方案。
nodejs实战express之使用Markdown
doujiao_pengpeng的博客
10-21 1198
一、安装Markdown依然是常规的两部，修改package.json "markdown": "*" 然后进入命令行 npm install 二、在自己的文章模型中引用markdowm模块markdown=require('markdown').markdown;三、在读取（get)函数中的callbac之前添加转换大致原理就是，我们通过get函数取到的数据最后通过回调函数放到docs变量中传给页
Markdown与CSS结合的艺术：打造个性化主题
最新发布
weixin_42315569的博客
08-17 1041
Markdown的简单性是它的主要特点之一。它允许用户使用易读的纯文本格式编写文档，同时能够转换成丰富的格式如HTML。这使得Markdown成为编写技术文档、博客文章甚至是书籍的理想选择。许多文本编辑器和在线平台如GitHub支持Markdown转换。专业的转换工具如Pandoc可以将Markdown转换为多种格式。GitHub Pages 是一个静态站点托管服务，它可以直接从GitHub仓库中部署HTML、CSS和JavaScript文件。
【免费下载】 推荐一款神奇的Markdown样式库：github-markdown-css
gitblog_00349的博客
08-08 2352
在数字时代，Markdown已经成为了编写文档和分享技术知识的重要工具。如果你正在寻找一种方法，让自己的Markdown文档拥有和GitHub一致的风格，那么这个项目将会是你的理想之选。 ## 项目简介 `github-markdown-css` 是一个简洁而强大的CSS库，旨在复刻GitHub上Markdown的显示效果。它提供了与GitHub官方风格高度一致的样式，让你无论在哪里展示Mar...
github-markdown-css 使用简解，markdown文案格式优化（笔记）
热门推荐
小糖穿越火线
10-26 1万+
github-markdown-css 使用简解，markdown文案格式优化 1、npm 安装 $ npm install github-markdown-css 2、使用 导入github-markdown.css文件 import： import 'github-markdown-css/github-markdown.css' 添加：markdown-body的class...
【亲测免费】 推荐一款不可或缺的Markdown样式库：github-markdown-css
gitblog_00041的博客
05-11 2346
在这个数字化的时代，Markdown已经成为了撰写文档和笔记的重要工具。而当我们希望在自己的网站上复制GitHub风格的Markdown呈现效果时，`github-markdown-css` 就是您不容错过的选择。这款轻量级的CSS库，将帮助您轻松实现与GitHub一致的Markdown样式，让您的代码展示更加专业且美观。 ## 1、项目介绍 `github-markdown-css` 是一个...
NodeJS入门项目案例（Express+Mysql）
11-11
NodeJS入门项目案例（Express+Mysql）是一个适合初学者的教程，旨在引导你进入Node.js服务端开发的世界。在这个项目中，我们将使用Express框架，一个简洁且强大的Web应用开发框架，以及Mysql，一个流行的开源关系型...
sample-github-api-consumer-nodejs：带有Node.js的示例GitHub v4 API（GraphQL）消费者应用程序
02-03
示例-github-api-consumer-nodejs 带有Node.js的示例GitHub v4 API（GraphQL）消费者应用程序 该示例作为相应博客文章的一部分发布，为 访问并订阅我们的新闻通讯以阅读精彩文章！
带有markdown的静态站点生成器+对Next.js做出React-React开发
05-27
要求必须运行NodeJS v8.x +，才能运行nextein命令。 入门工具包如果要跳入入门项目，请检查nextein-starter入门。必须执行一些步骤才能使网站与nextein一起运行并运行创建一个项目：mkdir my-site cd my-site npm ...
github-markdown-css 的使用
259的博客
02-08 1145
github-markdown-css 的使用
github-markdown-css：复制GitHub Markdown样式的最少CSS
02-21
github-markdown-css 复制GitHub Markdown样式的最少CSS 安装 从或npm 下载： $ npm install github-markdown-css 用法 导入github-markdown.css文件，并将markdown-body类添加到渲染的Markdown的容器中，并为其设置宽度。 GitHub对移动设备使用980px宽度和45px填充，以及15px填充。 < meta name =" viewport " content =" width=device-width, initial-scale=1 " > < link rel =" stylesheet " href =" github-markdown.css " > < style > . markdown-body { box-sizing : border-box; m
markdown:Node.js Markdown到HTML解析器
05-04
Node.js Markdown到HTML解析器 此Markdown-to-HTML解析器使用自定义的，轻量级的Markdown语法。 它允许创建：斜体，粗体，删除线和上标文本，标题，链接，图像，视频，音频，内联代码，多行代码，无序列表，有序列表，嵌套列表，水平线，引号和脚注。 浏览器模块也可以在这里找到： 用法 const parser = require ( '@deskeen/markdown' ) const html = parser . parse ( 'some markdown text' ) . innerHTML // html === '<p>some markdown text</p>' 学到更多 段落 标头 关联 图像 视频 声音的 无序列表 订购清单 水平线 代码 多行代码 引用 脚注 转义符 与其他流行的Markdown的兼容性 不支持的语法 例子 向标
使用了这个css后markdown展示效果和github的大致一样
08-08
github的markdown的css，就是使用了这个css后，markdown展示效果和github的大致一样
Node.js-http-marked包装Marked作为HTTP服务发布
08-10
该项目主要是为了让 Sym、Solo、Pipe 提供更好的 Markdown 渲染，解决各项目内建的 Markdown 处理不统一的问题。
markdown-it-prism：使用棱镜突出显示markdown-it中的代码块
02-12
降价棱镜 插件使用突出显示代码块 用法 const md = require ( 'markdown-it' ) ( ) ; const prism = require ( 'markdown-it-prism' ) ; md . use ( prism , options ) ; 该插件会将必要的标记插入所有代码块中。 在HTML中以获取突出显示的代码。 选件 options对象可能包含： 名称 描述 默认 plugins 要加载的数组。 要使用的名称可以在找到。 请注意，某些棱镜插件（尤其是行号）依赖于存在的DOM，因此不能与此包一起使用（请参阅 ）。 [] init 设置棱镜后调用的功能。 将接收棱镜实例作为唯一参数。 对于需要进一步初始化的插件很有用。 () => {} defaultLanguageForUnknown 用于代码块的语言，这些代码块指定Pris
GitHub Markdown CSS安装与配置完全指南
gitblog_09329的博客
09-13 1131
**GitHub Markdown CSS** 是一个由 Sindre Sorhus 创建并维护的开源项目，它提供了一组极简的 CSS 样式，用于复制 GitHub 上Markdown文档的默认样式。此项目专注于呈现与GitHub网站上一致的Markdown渲染效果，适合于在个人站点、博客或其他Web应用中使用Markdown时保持风格一致性。主要使用的编程语言是 **HTML** 和 **CSS...
GitHub Markdown CSS 项目使用文档
gitblog_00190的博客
08-08 845
GitHub Markdown CSS 项目使用文档 github-markdown-cssThe minimal amount of CSS to replicate the GitHub Markdown style项目地址:https://gitcode.com/gh_mirrors/gi/github-markdown-css 1. 项目的目录结构及介绍 GitHub Markdown ...
GitHub Markdown CSS 项目推荐
gitblog_09331的博客
09-13 619
**GitHub Markdown CSS** 是一个开源项目，由 Sindre Sorhus 创建并维护。该项目的主要目的是提供最少的 CSS 样式，以复制 GitHub 的 Markdown 样式。项目的主要编程语言是 CSS，用于定义和控制 Markdown 文档的样式。 ## 2. 项目核心功能 该项目的核心功能是提供一套 CSS 样式表，使得用户可以在自己的网页或应用中渲染 Mark...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值