关于前端渲染 MarkDown 样式

1.使用 showdown

使用 showdown，可以将 markdown语法的内容转换为 html格式的内容

hello =>

hello

引入：npm install showdown

使用：

main.js

import showdown from "showdown";
Vue.use(showdown);

视图
import showdown from "showdown";
let converter = new showdown.Converter();
// 显示表格
converter.setOption("tables",true);

let text= `# hello`;
let htmlText = converter.makeHtml(text); 

<div v-html="htmlText"></div>

显示经过处理的 markdown 语法的内容。

2. 使用github-markdown-css

用于修饰经过处理的 markdown内容，尽管我们对内容进行了处理，但有些内容是没办法通过设置标签进行展示的，比如说引入，原生的html没有这种样式。通过引入github-markdown-css，我们可以正常的显示引入的样式。

引入：npm install github-markdown-css

使用：

<article v-html="" class="markdown-body"></article>
<script>
    import "../node_modules/github-markdown-css/github-markdown.css"
</script>

3.使用highlight

用于渲染代码

引入：npm install highlight

使用：

main.js

import hljs from "highlight.js";
import "highlight.js/styles/default.css";

// 代码高亮
Vue.directive("highlight"，function(el){
   let blocks = el.querySelectorAll("pre code");
   blocks.forEach((block)=>{
      hljs.highlightBlock(block);
   })
})

<article v-html="htmlCode" v-highlight class="markdown-body"></article> 渲染的位置。

4.完整代码示例

<template>
   <div>
      <article v-html="htmlText" class="markdown-body"></article>
      
      <article v-html="htmlCode" v-highlight class="markdown-body"></article>
   </div>
</template>
<script>
import "/node_modules/github-markdown-css/github-markdown.css"
import showdown from 'showdown';
let converter = new showdown.Converter();
// 显示表格
converter.setOption("tables",true);

export default {
   name: "Home",
   data(){
      return{
         htmlText: '',
         htmlCode: '' 
      }
   },
   mounted(){
      this.test();
   },
   methods: {
      test(){
         let text= `# hello`;
         let htmlText = converter.makeHtml(text); 
         this.htmlText = htmlText;

         let code = `
         public void main(){
            System.out.println();
         }`;
         this.htmlCode=converter.makeHtml(code);

      }
   }   
}
</script>
<style scoped>
</style>

原文地址：https://blog.csdn.net/sprintline/article/details/122849907?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905959516800227485936%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905959516800227485936&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-7-122849907-null-null.142^v88^control,239^v2^insert_chatgpt&utm_term=markdown