uniapp-markdown渲染解析md转html及代码高亮 - 服务器托管|北京服务器租用|机房托管租用|IDC托管租用|机房机柜带宽租用-价格及费用咨询

今天给大家分享一个在uniapp项目中用到的markdown语法解析插件uaMarkdown。

如下图：编译至H5+小程序+App端效果。

使用markdown-it和highlight.js封装组件。

// 引入markdown-it和highlight.js插件
import MarkdownIt from '@/plugins/markdown-it.min.js'
import hljs from '@/plugins/highlight/highlight.min.js'
// import '@/plugins/highlight/github-dark.min.css'
import '@/plugins/highlight/atom-one-light.css'
import parseHtml from '@/plugins/html-parser.js'

初始markdown组件

const markdown = MarkdownIt({
   html: true,
   highlight: function(str, lang) {
    let preCode = ""
    try {
      preCode = hljs.highlightAuto(str).value
    } catch (err) {
      preCode = markdown.utils.escapeHtml(str);
    }
    // 自定义行号
    const lines = preCode.split(/n/).slice(0, -1)
    let html = lines.map((item, index) => {
      // 去掉空行
      if( item == ''){
        return ''
      }
      return '
' + item +''
    }).join('')
    html = '' + html + ''
    
    // 代码复制
    copyCode.push(str)
    let htmlCode = ``
      // #ifndef MP-WEIXIN
        htmlCode += ``
          htmlCode += `${lang}复制代码`
        htmlCode += ``
      // #endif
        htmlCode += `${html}
`;

      htmlCode += '
'

    return htmlCode

  }

})




解析md语法结构
const parseNodes = (value) => {
   if(!value) return
   
   let htmlString = ''
  if (value.split("```").length % 2) {
    let msgContent = value
    if(msgContent[msgContent.length-1] != 'n'){
      msgContent += 'n'
    }
    htmlString = markdown.render(msgContent)
  } else {
    htmlString = markdown.render(msgContent.value)
  }
  
  // #ifndef APP-NVUE
  return htmlString
  // #endif
  
  // nvue模式下将htmlString转成htmlArray，其他情况rich-text内部转
  // 注：本示例项目还没使用nvue编译
  // #ifdef APP-NVUE
  return parseHtml(htmlString)
  // #endif
}

快速使用

基础用法

const mdvalue = '### uniapp markdwon'


禁用行号



ua-markdown组件已经发布插件市场，可以免费下载使用。
https://ext.dcloud.net.cn/plugin?id=13307

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net