markdown-it中table内容过多横向可滚动效果

最新推荐文章于 2025-03-12 11:07:52 发布

你好小马哥

最新推荐文章于 2025-03-12 11:07:52 发布

阅读量603

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_34955596/article/details/141061846

版权

1、安装插件

npm i markdown-it

2、页面引入使用

<template>
    <div class="markdownNav" v-html="getMarkdownData"> </div>
  </template>
  
  <script  setup name="markdownNav" lang="ts">
  import MarkdownIt from 'markdown-it';
  

  const props = defineProps({
    modelValue: {
    type: String,
    default: ''
  }
})

const getMarkdownData = computed(()=>{
    
  const md = new MarkdownIt();
  
  // 保存原始表格渲染器
  const originalTableOpen = md.renderer.rules.table_open || function (tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
  };

  // 定义自定义的表格渲染器
  md.renderer.rules.table_open = function (tokens, idx, options, env, self) {
    // 生成包裹元素的开始标签
    return '<div class="table-wrapper">\n' + originalTableOpen(tokens, idx, options, env, self);
  };

  // 保存原始表格结束渲染器