如何使用marked.js使Markdown在網頁上良好的展示（vue + element ui）
阿新 • • 發佈：2018-11-13
先上成果圖
網頁的佈局
網頁佈局分為三部分，分別是
- 頭部header，固定定位
- 側邊欄aside，固定定位
- 內容contain，靜態定位, margin-top值為header的高度，margin-left的值為aside的寬度，是router-view的出口。分為兩部分：
- 主內容，顯示md轉換後的html頁面，margin-right值為md目錄的寬度值
- 提取markdown的h1和h2目錄，用於標題導航，固定定位
功能
為了md能在網頁上良好的展示，應具備以下功能：
- 點選左側的選單，可以獲取到相應的md內容（字串格式），將md內容轉成html，為一級、二級標題加錨點id
- 為html增加md的格式，引入一個css即可，參考網址
- 提取md中的一級二級標題，在右側顯示文章目錄
- 點選右側文章目錄，左側內容可定位到相應的位置，還要做平滑滾動處理，增強使用者體驗
- 左側內容滾動時，右側目錄的啟用項隨之動態變化
md轉成html
我使用了marked.js將md轉成html，並在這裡為h1和h2加上了id值，作為錨點
// 先安裝marked.js到本地
npm install marked --save
// 在元件內引入marked
import marked from 'marked';
// marked的基本設定
marked.setOptions({
renderer: rendererMD,
gfm: true 在html中，用v-html繫結此計算屬性即可
<div class="markdown-body" ref="content" id="content" v-html="compiledMarkdown">
複製程式碼提取標題
getTitle(content) {
let nav = [];
let navLevel = [1, 2];
let tempArr = [];
content
// 以至少一個#開始，緊接非換行符外任意個字元進行惰性匹配，然後是一個換行符
.replace(/(#+)[^#][^\n]*?(?:\n)/g, function(match, m1, m2) {
let title = match.replace('\n', '');
let level = m1.length;
tempArr.push({
title: title.replace(/^#+/, '').replace(/\([^)]*?\)/, ''),
level: level,
children: []
});
});
// tempArr得到的是全部1-6級標題，將一級和二級過濾出來
nav = tempArr.filter(_ => _.level <= 2);
let index = 0;
// 在此處加index值，這裡和標籤裡繫結的id是對應的
nav = nav.map(_ => {
_.index = index++;
return _;
});
let retNavs = [];
let toAppendNavList;
navLevel.forEach(level => {
// 遍歷一級和二級標題，將同一級的元素組成一個新陣列
toAppendNavList = this.find(nav, {
level: level
});
if (retNavs.length === 0) {
// 處理一級標題
retNavs = retNavs.concat(toAppendNavList);
} else {
// 處理二級標題，把二級標題加到相應的父節點的children中
toAppendNavList.forEach(_ => {
_ = Object.assign(_);
let parentNavIndex = this.getParentIndex(nav, _.index);
return this.appendToParentNav(retNavs, parentNavIndex, _);
});
}
});
// 此處的retNavs就是處理後的樹
return retNavs;
},
// 處理屬於同一級的標題，組成陣列
find(arr, condition) {
return arr.filter(_ => {
for (let key in condition) {
if (condition.hasOwnProperty(key) && condition[key] !== _[key]) {
return false;
}
}
return true;
});
},
// 獲取此節點的父節點
getParentIndex(nav, endIndex) {
// 從當前的index開始找 1.距離自己最近的（遞減體現） 2.level比本身小的（越小越高）
for (var i = endIndex - 1; i >= 0; i--) {
if (nav[endIndex].level > nav[i].level) {
return nav[i].index;
}
}
},
// 找到同一個父節點的所有子節點
appendToParentNav(nav, parentIndex, newNav) {
// 找到每一個二級標題的傅標題的index值
let index = this.findIndex(nav, {
index: parentIndex
});
nav[index].children = nav[index].children.concat(newNav);
// 如果要處理三級及以下標題，需要把每一個一級標題的children作為引數，呼叫appendToParentNav
},
// 找符合條件的陣列中的成員
findIndex(arr, condition) {
let ret = -1;
arr.forEach((item, index) => {
for (var key in condition) {
if (condition.hasOwnProperty(key) && condition[key] !== item[key]) { // 不進行深比較
return false;
}
}
ret = index;
});
return ret;
},
複製程式碼md目錄的展示和錨點定位
<div id="menu">
<ul class="nav-list">
<li v-for="(nav, index) in contentMenu" :key="index">
<a :href="'#' + nav.index" :class="{'active': highlightIndex === nav.index}" @click="handleHighlight(nav.index)" :key="nav.index">{{nav.title}}
</a>
<template v-if="nav.children.length > 0">
<ul class="nav-list">
<li v-for="(item, index) in nav.children" :key="index">
<a :href="'#' + item.index" :class="{active: highlightIndex === item.index}" :key="item.index" @click="handleHighlight(item.index)">{{item.title}}
</a>
</li>
</ul>
</template>
</li>
</ul>
</div>
複製程式碼平滑滾動
在md的目錄中，a標籤裡已經設定了href值，進行了錨點定位，在點選目錄繫結的事件裡做了平滑處理
handleHighlight(item) {
this.highlightIndex = item;
let jump = document.querySelectorAll('.jump');
// 這裡的60是header的高度值
let total = jump[item].offsetTop - 60;
let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
// 平滑滾動，時長500ms，每10ms一跳，共50跳
let step = total / 50;
if (total > distance) {
// 向下滾動時呼叫
smoothDown();
} else {
let newTotal = distance - total;
step = newTotal / 50;
smoothUp();
}
function smoothDown() {
if (distance < total) {
distance += step;
document.body.scrollTop = distance;
document.documentElement.scrollTop = distance;
window.pageYOffset = distance;
setTimeout(smoothDown, 10);
} else {
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
window.pageYOffset = total;
}
}
function smoothUp() {
if (distance > total) {
distance -= step;
document.body.scrollTop = distance;
document.documentElement.scrollTop = distance;
window.pageYOffset = distance;
setTimeout(smoothUp, 10);
} else {
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
window.pageYOffset = total;
}
}
}
複製程式碼主內容滾動，目錄高亮
在閱讀md內容時，隨著滾動條的變化，目錄的高亮項也隨著變化
mounted() {
this.$nextTick(function() {
window.addEventListener('scroll', this.onScroll);
});
},
methods: {
onScroll() {
let top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
let items = document.getElementById('content').getElementsByClassName('jump');
let currentId = '';
for (let i = 0; i < items.length; i++) {
let _item = items[i];
let _itemTop = _item.offsetTop;
if (top > _itemTop - 75) {
currentId = _item.id;
} else {
break;
}
}
if (currentId) {
// 這裡的currentOId是字串，必須轉換成數字，否則高亮項的全等無法匹配
this.highlightIndex = parseInt(currentId);
}
}
}
複製程式碼Summary
以上就是如何讓md在網頁上良好展示的全部功能，谷歌了多次，感謝分享經驗的艾瑞巴dei，開源萬歲～！
待改進的點有：
- 如何避免非標題的#的正則匹配，比如
// #這不是標題格式的內容 - md中h1和h2標籤的處理，md中是允許html的，現在不能滿足匹配h1、h2的標籤