Node.js 轉換 Markdown 而且語法高亮

最近寫了一些小東西，用到了 Markdown 做爲文檔編輯，而且顯示到了頁面上。

Markdown

Markdown 的目標是實現「易讀易寫」。

可讀性，不管如何，都是最重要的。一份使用 Markdown 格式撰寫的文件應該能夠直接以純文本發佈，而且看起來不會像是由許多標籤或是格式指令所構成。Markdown 語法受到一些既有 text-to-HTML 格式的影響，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大靈感來源實際上是純文本電子郵件的格式。

點擊查看語法

本文也使用 Markdown 編輯

marked

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

一個能夠在服務器端、瀏覽器端使用的轉換庫，簡單、易用。

點擊查看文檔

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.

點擊查看文檔

如何使用

普通文本

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 而且語法高亮