让页面支持markdown

在vue中使页面支持markdown

在最近的开发中，遇到一个问题，就是博客都是使用markdown语法写的，我在自己的页面中怎么才能很好的渲染它们。

确定两种方法

• 1.将markdown转为html，网页读取html内容进行渲染。
• 2.网页直接读取markdown内容，然后解析为html进行渲染。

最终确定使用第二种方法，因为使用第一种方法的话，维护起来太不容易，想要修改博客内容时，每修改一次都得重新转一次html，而第二种方法只需要修改markdown内容即可。

这时候就需要考虑我们的网页拿到markdown内容之后如何解析为html。

1.marked.js

安装：npm install marked -S

安装完成后，markdown.vue如下：

<template>
  <div>
    <div id="content" v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
  	import marked from 'marked'
	var rendererMD = new marked . Renderer ()
	marked . setOptions ({
		renderer: rendererMD ,
		gfm: true ,
		tables: true ,
		breaks: false ,
		pedantic: false ,
		sanitize: false ,
		smartLists: true ,
		smartypants: false
	})
	export default {
		name: 'markdown' ,
		data () {
			return {
				content: '# hello `javascript` '
			}
		},
		computed: {
			compiledMarkdown : function () {
				return marked ( this .input, { sanitize: true })
			}
		}
	}
</script>
<style>
...
</style>

2.showdown.js

安装： npm install showdown --save

安装完成后，markdown.vue 如下：

<template>
  <div>
    <div id="content" v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
  	import showdown from "showdown"
	converter.setOption('tables', true);  // 可将表格显示出来
	export default {
		name: 'markdown' ,
		data () {
			return {
				content: '# hello `javascript` '
			}
		},
		computed: {
			compiledMarkdown : function () {
				return converter.makeHtml(this.content)
			}
		}
	}
</script>
<style>
...
</style>

以上两种方法相差并不太多，当使用这两种方法的时候会发现，我们的代码块是没有什么样式的，美观性差了点，不过highlight.js可以解决这个问题。

1.安装highlight

npm install highlight --save

2.在main.js中添加自定义指令

import hljs from "highlight.js"
import 'highlight.js/styles/default.css';
 
// 定义自定义指令 highlight 使代码高亮
Vue.directive('highlight',function (el) {
 	let blocks = el.querySelectorAll('pre code');
 	blocks.forEach((block)=>{
  		hljs.highlightBlock(block)
 	})
})

3.将v-highlight 添加到我们使用的标签中即可

<template>
  <div>
    <div id="content" v-html="compiledMarkdown" v-highlight></div>
  </div>
</template>

这时发现我们的代码已经高亮了。

3.markdown-it-vue

markdown-it-vue 是一个丰富的 markdown Vue 组件， 支持以下特性：

• markdown 语法
• GFM TOC
• GFM style
• emoji
• mermaid charts
• Echarts
• Subscript/Superscript
• AsciiMath
• Alter（自定义提示信息）
• info | error | warning message tip

插件列表：

• markdown-it
• markdown-it-emoji
• markdown-it-sub
• markdown-it-sup
• markdown-it-footnote
• markdown-it-deflist
• markdown-it-abbr
• markdown-it-ins
• markdown-it-mark
• markdown-it-katex
• markdown-it-task-lists
• markdown-it-highlight
• markdown-it-latex
• markdown-it-container
• markdown-it-github-toc
• markdown-it-source-map
• markdown-it-link-attributes

安装：npm install markdown-it-vue

简单使用：

<template>
  <div>
    <markdown-it-vue class="md-body" :content="content" />
  </div>
</template>

<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
  components: {
    MarkdownItVue
  },
  data() {
    return {
      content: '# your markdown content'
    }
  }
}
</script>

使用高亮插件：

<template>
  <div>
    <markdown-it-vue-light class="md-body" :content="content" />
  </div>
</template>

<script>
import MarkdownItVueLight from 'markdown-it-vue/dist/markdown-it-vue-light.umd.min.js'
import 'markdown-it-vue/dist/markdown-it-vue-light.css'
export default {
  components: {
    MarkdownItVueLight
  },
  data() {
    return {
      content: '# your markdown content'
    }
  }
}
</script>

我在自己的博客中选择了最后一种方法，别问，问就是nice！

个人见解，有错误请联系我，不胜感激。