markdown - 如何阻止Marked插件将所有内容都用p标签包裹起来
本文介绍了markdown - 如何阻止Marked插件将所有内容都用p标签包裹起来的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
正在用marked
+highlight.js
写项目,以下是配置(Vue项目)
import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
marked.setOptions({
highlight: (code) => hljs.highlightAuto(code).value
})
Vue.directive('highlight', function(el, { value }) {
console.log(marked(value))
el.innerHTML = marked(value)
})
但是打印出来的marked(value)
结果却是:
<p><h1 id="title">title</h1></p>
<p><h2 id="-">标题</h2></p>
<p><p>标题</p></p>
<p><h3 id="-">第二个标题</h3></p>
<p><p>第二段文档</p></p>
<pre><code class="lang-html"><button></button>
</code></pre>
所有的代码都被p标签包裹起来了。请问如何解决这个问题?
解决方案
首先,需要澄清以下概念。
marked
模块的作用是用来将markdown文档转为html文档highlight.js
的作用是用来高亮html的代码部分
因此,
如果你的文档已经是html文档了,没有必要再使用
marked
如果需要高亮代码,那么只需要高亮
pre code
包裹的部分
来看下面的示例
const marked = require('marked')
const hljs = require('highlight.js')
marked.setOptions({
highlight: (code) => hljs.highlightAuto(code).value
})
const html = `
<h1>Heading1</h1>
<h2>Heading2</h2>
<pre><code>var a = 10<code><pre>
`
console.log(marked(html))
最后打印的结果是
<p><h1>Heading1</h1></p>
<p><h2>Heading2</h2></p>
<p><pre><code>var a = 10<code><pre></p>
来看第二个示例
const marked = require('marked')
const hljs = require('highlight.js')
marked.setOptions({
highlight: (code) => hljs.highlightAuto(code).value
})
const markdown = `
# Heading1
## Heading2
var a = 10
`
console.log(marked(markdown))
打印的结果是
<h1 id="heading1">Heading1</h1>
<h2 id="heading2">Heading2</h2>
<pre><code><span class="hljs-selector-tag">var</span> <span class="hljs-selector-tag">a</span> = <span class="hljs-number">10</span>
</code></pre>
由此,可以判断你传入的value,其实已经是html文档了,不需要marked
再转换一次,只需要使用highlight.js
来高亮
代码块即可。
最后改为以下代码即可
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
这篇关于markdown - 如何阻止Marked插件将所有内容都用p标签包裹起来的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文