Node.js 转换 Markdown 而且语法高亮

最近写了一些小东西,用到了 Markdown 做为文档编辑,而且显示到了页面上。javascript

Markdown

Markdown 的目标是实现「易读易写」。css

可读性,不管如何,都是最重要的。一份使用 Markdown 格式撰写的文件应该能够直接以纯文本发布,而且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响,包括 SetextatxTextilereStructuredTextGrutatextEtText,而最大灵感来源实际上是纯文本电子邮件的格式。html

点击查看语法java

本文也使用 Markdown 编辑git

marked

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

一个能够在服务器端、浏览器端使用的转换库,简单、易用。浏览器

点击查看文档服务器

highlight.js

Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework and has automatic language detection.markdown

点击查看文档app

如何使用

普通文本

Node.js转换文件

var marked = require('marked');
var markdownString = '```js\n console.log("hello"); \n```';
var HTMLString = marked(markdownString);

页面

<link href="https://cdn.bootcss.com/github-markdown-css/2.8.0/github-markdown.min.css" rel="stylesheet">

<div class="markdown-body">
    {{HTMLString}}
</div>

代码高亮

Node.js转换文件

var marked = require('marked');

// 同步使用 highlight.js 转换代码
marked.setOptions({
    highlight: function (code) {
        return require('highlight.js').highlightAuto(code).value
    }
})

var markdownString = '```js\n console.log("hello"); \n```';
var HTMLString = marked(markdownString);

页面

<link href="https://cdn.bootcss.com/github-markdown-css/2.8.0/github-markdown.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/github-gist.min.css" rel="stylesheet">

<div class="markdown-body">
    {{HTMLString}}
</div>

Markdown、代码高亮样式

这里使用的是 github-markdown-css 样式库,能够根据本身的喜爱修改。

代码高亮用的是 github-markdown 样式库,两个加起来就是活脱脱的 GitHub 风格。

highlight.js 有不少不一样的风格,能够在这里查看。

原文阅读:Node.js 转换 Markdown 而且语法高亮

相关文章
相关标签/搜索