前端解析markdown处理表格样式

后端返回markdown格式，前端解析，使用的是marked.js
安装

npm install marked --save

另外我也给代码做了高亮

npm install highlight.js --save

main.js

import hljs from 'highlight.js';
//封装成一个指令,highlight是指令的名称
Vue.directive('highlight', (el) => {
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
    // 创建ol标签元素
    let ol = document.createElement("ol");
    block.parentNode.appendChild(ol);

    hljs.highlightBlock(block)
})

chatGpt.vue

 // html部分
<div class="detail" v-highlight v-html="answer"></div>
//js部分
import { marked } from 'marked';
// 引入代码高亮样式
import 'highlight.js/styles/darcula.css';

// res.data为后端返回的markdown格式的信息
this.answer = marked(res.data)

表格部分直接解析没有线条，我自己写了table的样式

   ::v-deep XXXXX{   
        table {
              border: 1px solid #ccc;
            }
            table td,
            table th {
              border-bottom: 1px solid #ccc;
              border-right: 1px solid #ccc;
              padding: 5px 10px;
            }
            table th {
              // border-bottom: 2px solid #ccc;
              text-align: center;
              background: #dee8ee;
            }
            table th:last-child {
              border-right: none;
            }
            table td:last-child {
              border-right: none;
            }

            table tr:last-child td {
              border-bottom: none;
            }
            tr:nth-child(even) {
              background: #eff3f5;
            }
            /* blockquote 样式 */
            blockquote {
              display: block;
              border-left: 8px solid #d0e5f2;
              padding: 5px 10px;
              margin: 10px 0;
              line-height: 1.4;
              font-size: 100%;
              background-color: #f1f1f1;
            }
 /* ul ol 样式 */
            ul,
            ol {
              margin: 10px 0 10px 20px;
            }
          }
}