使用的example.md
实现在vue的template中显示出如下效果
安装showdown
sudo cnpm install -- save showdown
安装markdown-loader和html-loader
sudo cnpm i markdown- loader html- loader -- save
在main.js文件中引入
import showdown from 'showdown'
Vue. prototype. md2html = ( md) => {
let converter = new showdown. Converter ( )
let text = md. toString ( )
let html = converter. makeHtml ( text)
return html
}
在webpack.base.conf.js 中添加 rules 规则
{
test: /\.md$/ ,
use: [ { loader: 'html-loader' } , { loader: 'markdown-loader' , options: { } } ]
}
markdown.vue
< template>
< div id= 'markdown' class = "main" >
< div v- html= "md" > < / div>
< / div>
< / template>
< script>
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css' ;
const highlightCode = ( ) => {
const preEl = document. querySelectorAll ( 'pre' )
preEl. forEach ( ( el) => {
hljs. highlightBlock ( el)
} )
}
export default {
name: 'markdown' ,
data ( ) {
return {
md: '' ,
}
} ,
components: {
} ,
created ( ) {
var filename= 'example.md'
this . $axios ( 'http://127.0.0.1:3000/getmd' , {
params: {
filename: filename
}
} ) . then ( res=> {
this . md= this . md2html ( res. data)
console. log ( this . md)
} )
} ,
mounted ( ) {
highlightCode ( )
} ,
updated ( ) {
highlightCode ( )
} ,
methods: {
}
}
< / script>
< style>
< / style>
负责读取文件的后端文件node.js
var express= require ( 'express' ) ;
var path = require ( 'path' ) ;
var fs = require ( "fs" ) ;
var app= express ( ) ;
app. all ( '*' , function ( req, res, next) {
res. header ( "Access-Control-Allow-Origin" , "*" )
res. header ( "Access-Control-Allow-Headers" , "X-Requested-With,Content-Type" )
res. header ( "Access-Control-Allow-Methods" , "PUT,POST,GET,DELETE,OPTIONS" )
res. header ( "Cache-Control" , "no-store" ) ;
next ( ) ;
} ) ;
app. get ( '/getmd' , function ( req, res) {
console. log ( '访问getmd接口' )
var filename= req. query. filename
var file= path. join ( __dirname, 'md/' + filename) ;
fs. readFile ( file, 'utf-8' , function ( err, data) {
if ( err) {
res. send ( '读取md文件失败!' )
}
else {
res. send ( data)
}
} ) ;
} )
app. listen ( 3000 , function ( ) {
console. log ( "Server running at 3000 port" ) ;
} ) ;