基于marked.js和highlight.js搭建個(gè)人博客網(wǎng)站的思路
這里對(duì)那些想要搭建個(gè)人博客網(wǎng)站又不想受限于主流框架的朋友們提供一個(gè)思路宫盔。我寫的很簡(jiǎn)單期奔，具體的內(nèi)容自己去豐富即可乒躺。話不多說，直接上代碼。
前端代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Marked in the browser</title>
<style>
.language-javascript.hljs{
/*不加這個(gè)的話代碼塊過寬會(huì)被截取掉一部分*/
overflow-x: auto;
}
/*以下是對(duì)markdown樣式的調(diào)整,根據(jù)個(gè)人喜好修改即可*/
img{
max-width: 1000px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th {
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #cbcbcb;
}
table td,table th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: .5em 1em;
}
table thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
table td {
background-color: transparent;
border-bottom: 1px solid #cbcbcb;
min-width: 70px;
}
table tbody>tr:last-child>td {
border-bottom-width: 0;
}
</style>
</head>
<body>
<div id="content"></div>
<!--這是我自己封裝的的ajax,使用jquery即可-->
<script src="../untils/hdx_ajax.js"></script>
<!--代碼塊高亮插件-->
<link rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--解析markdown的插件-->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
window.onload=function(){
let rendererMD = new marked.Renderer();
let markdownString = '';
my_ajax({//這里是我自己封裝的簡(jiǎn)易ajax,不想自己封裝的話使用jquery的ajax即可
type:'get',
url:'http://172.31.15.199:3307',//此處的地址改為你自己創(chuàng)建的服務(wù)器接口地址
success:function (res) {
markdownString=res.responseText
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
document.getElementById('content').innerHTML = marked.parse(markdownString);
//在文檔加載后為元素添加屬性
document.querySelectorAll('table').forEach(function (el) {
el.setAttribute('border','1')
})
document.querySelectorAll('code').forEach(function (el) {
//缺少這個(gè)類代碼塊沒有背景
el.classList.add('hljs')
})
}
})
}
</script>
</body>
</html>
后端代碼(采用node)
const http=require('http');
const port=3307;//端口號(hào),只要不寫已經(jīng)被占用的即可
const fs=require('fs');
const host='172.31.15.199';//填你自己的IPv4地址(win+R輸入CMD,然后輸入ipconfig即可查看)
http.createServer((req,res)=>{
//跨域處理
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
//防止返回的中文亂碼
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
fs.readFile('js解析md.md',(err,data)=>{//js解析md.md 換成你的markdown文件路徑
if(err){
return;
}else {
res.end(data.toString('utf-8'));//防止亂碼
}
})
}).listen(port,()=>{
console.log(`服務(wù)器運(yùn)行在http://${host}:${port}`);
})
問題
- 由于異步的原因述呐，會(huì)導(dǎo)致highlight這個(gè)代碼塊插件的一些類加不上去(我目前只發(fā)現(xiàn)了code標(biāo)簽的hljs類)寺惫。如果還有其他的問題疹吃，
可以嘗試直接將markdown的內(nèi)容賦值給markdownString這個(gè)變量，然后在瀏覽里面進(jìn)行調(diào)試西雀，找出哪些元素缺少哪些類萨驶，
然后自己在文檔加載之后手動(dòng)加上去即可。 -
經(jīng)過本人嘗試艇肴，marked.js這個(gè)插件無法解析帶豎線的區(qū)塊語法腔呜，就是下面這個(gè)
無法解析的語法.png
源文件及效果
markdown文件
# 基于marked.js和highlight.js搭建個(gè)人博客網(wǎng)站的思路
這里對(duì)那些想要搭建個(gè)人博客網(wǎng)站又不想受限于主流框架的朋友們提供一個(gè)思路叁温。我寫的很簡(jiǎn)單，具體的內(nèi)容自己去豐富即可核畴。話不多說膝但，直接上代碼。
### 前端代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Marked in the browser</title>
<style>
.language-javascript.hljs{
/*不加這個(gè)的話代碼塊過寬會(huì)被截取掉一部分*/
overflow-x: auto;
}
/*以下是對(duì)markdown樣式的調(diào)整,根據(jù)個(gè)人喜好修改即可*/
img{
max-width: 1000px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th {
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #cbcbcb;
}
table td,table th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: .5em 1em;
}
table thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
table td {
background-color: transparent;
border-bottom: 1px solid #cbcbcb;
min-width: 70px;
}
table tbody>tr:last-child>td {
border-bottom-width: 0;
}
</style>
</head>
<body>
<div id="content"></div>
<!--這是我自己封裝的的ajax,使用jquery即可-->
<script src="../untils/hdx_ajax.js"></script>
<!--代碼塊高亮插件-->
<link rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--解析markdown的插件-->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
window.onload=function(){
let rendererMD = new marked.Renderer();
let markdownString = '';
my_ajax({//這里是我自己封裝的簡(jiǎn)易ajax,不想自己封裝的話使用jquery的ajax即可
type:'get',
url:'http://172.31.15.199:3307',//此處的地址改為你自己創(chuàng)建的服務(wù)器接口地址
success:function (res) {
markdownString=res.responseText
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
document.getElementById('content').innerHTML = marked.parse(markdownString);
//在文檔加載后為元素添加屬性
document.querySelectorAll('table').forEach(function (el) {
el.setAttribute('border','1')
})
document.querySelectorAll('code').forEach(function (el) {
//缺少這個(gè)類代碼塊沒有背景
el.classList.add('hljs')
})
}
})
}
</script>
</body>
</html>
### 后端代碼(采用node)
const http=require('http');
const port=3307;//端口號(hào),只要不寫已經(jīng)被占用的即可
const fs=require('fs');
const host='172.31.15.199';//填你自己的IPv4地址(win+R輸入CMD,然后輸入ipconfig即可查看)
http.createServer((req,res)=>{
//跨域處理
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
//防止返回的中文亂碼
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
fs.readFile('js解析md.md',(err,data)=>{//js解析md.md 換成你的markdown文件路徑
if(err){
return;
}else {
res.end(data.toString('utf-8'));//防止亂碼
}
})
}).listen(port,()=>{
console.log(`服務(wù)器運(yùn)行在http://${host}:${port}`);
})
### 問題
* 由于異步的原因谤草，會(huì)導(dǎo)致highlight這個(gè)代碼塊插件的一些類加不上去(我目前只發(fā)現(xiàn)了code標(biāo)簽的hljs類)跟束。如果還有其他的問題，
可以嘗試直接將markdown的內(nèi)容賦值給markdownString這個(gè)變量丑孩，然后在瀏覽里面進(jìn)行調(diào)試冀宴，找出哪些元素缺少哪些類，
然后自己在文檔加載之后手動(dòng)加上去即可嚎杨。
* 經(jīng)過本人嘗試花鹅，marked.js這個(gè)插件無法解析帶豎線的區(qū)塊語法，就是下面這個(gè)
<img src="../md轉(zhuǎn)html/無法解析.png" alt="無法解析的語法" width="100%">
效果
解析效果.gif
