解决markdown 代码块溢出导出pdf而显示不全问题

问题

背景：由于网络限制，只能使用vscod自带的插件进行markdown格式笔记的记录且无法下载直接导出pdf插件，只能通过导出html后使用浏览器生成pdf。但是由于代码块中内容过长，导出pdf时无法完全显示。 如下面的情况

解决方法

1. 将markdown导出为html

2. 打开html 进行修改 （不过需要注意 需要将后面的路径与css路径对上）
   

3. 将style中的格式内容注释掉
   

4. 此时使用浏览器打开html 显示的效果就变成了
   

5. 这时就可以使用导出pdf功能 然后打印了~

引入的markdown.css

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
/* 屏幕样式 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    max-width: 800px;            /* 限制页面宽度 A4*/
    margin: 0 auto;              /* 页面居中 */
  }
  
  /* 代码块样式 */
  pre, code {
      /* 强制换行：确保长代码段不会超出容器宽度 */
      white-space: pre-wrap !important;
  
      /* 允许内容溢出显示：避免内容被裁剪 */
      overflow: visible !important;
  
      /* 修改背景颜色：设置为浅灰色或其他颜色 */
      background-color: #f5f5f5 !important;
  
      /* 移除边框：简化样式，去掉默认的边框 */
      border: none !important;
  
      /* 设置字体大小：调整为更小的字体，便于显示更多内容 */
      font-size: 12px;
  
      /* 设置行高：增加行间距，提高代码的可读性 */
      line-height: 1.8;
  }
  
  /*列表样式*/
  ul, ol {
    margin: 0 0 1em 20px;
    padding: 0;
    list-style: initial;
  }
  
  li {
    word-wrap: break-word;
  }
  
  /* 表格样式 */
  table {
    margin: 10px 0 15px 0;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    overflow: visible;
    word-break: break-word;
  }
  
  th, td {
    border: 1px solid #d6d6d6;
    padding: 8px 12px;
    text-align: left;
  }
  
  th {
    font-weight: bold;
    background-color: #f5f5f5;
    color: #000;
  }
  
  td {
    background-color: #fff;
    color: #333;
  }
  
  .markdown-preview ul {
    list-style: disc; /* 使用圆点标号 */
    margin-left: 1.5em; /* 添加缩进 */
  }
  
  .markdown-preview ul ul {
    list-style: circle; /* 嵌套列表使用圆环标号 */
    margin-left: 1.5em; /* 添加缩进 */
  }
  
  .markdown-preview ul ul ul {
    list-style: square; /* 更深层嵌套使用方块标号 */
    margin-left: 1.5em; /* 添加缩进 */
  }
  
  .markdown-preview ol {
    list-style: decimal; /* 使用数字标号 */
    margin-left: 1.5em; /* 添加缩进 */
  }
  
  .markdown-preview ol ol,
  .markdown-preview ul ol {
    list-style-type: lower-roman; /* 嵌套列表使用小写罗马数字 */
    margin-left: 1.5em; /* 添加缩进 */
  }
  
  .markdown-preview ol ol ol,
  .markdown-preview ol ul ol,
  .markdown-preview ul ol ol,
  .markdown-preview ul ul ol {
    list-style-type: lower-alpha; /* 更深层嵌套使用小写字母标号 */
    margin-left: 1.5em; /* 添加缩进 */
  }
  
  /* 打印样式 */
  @media print {
    .markdown-preview ul,
    .markdown-preview ol {
      list-style-position: inside; /* 确保标号在打印时显示 */
      margin-left: 1.5em; /* 保持缩进 */
    }
  
    .markdown-preview ul ul,
    .markdown-preview ol ol {
      margin-left: 1.5em; /* 嵌套列表缩进 */
    }
  
    .markdown-preview ul ul ul,
    .markdown-preview ol ol ol {
      margin-left: 1.5em; /* 更深层嵌套缩进 */
    }
  
  /* 设置 <pre> 和 <code> 标签的样式 */
  pre, code {
      /* 强制换行：确保长代码段不会超出容器宽度 */
      white-space: pre-wrap !important;
  
      /* 允许内容溢出显示：避免内容被裁剪 */
      overflow: visible !important;
  
      /* 修改背景颜色：设置为浅灰色或其他颜色 */
      background-color: #f5f5f5 !important;
  
      /* 移除边框：简化样式，去掉默认的边框 */
      border: none !important;
  
      /* 设置字体大小：调整为更小的字体，便于显示更多内容 */
      font-size: 12px;
  
      /* 设置行高：增加行间距，提高代码的可读性 */
      line-height: 1.8;
  }
  
  table {
      width: 100%;
      border: 1px solid #000;
      page-break-inside: avoid; /* 避免表格分页 */
      page-break-after: auto;
      page-break-before: auto;
    }
  
    tr {
      page-break-inside: avoid; /* 避免表格行分页 */
    }
  
     th, td {
      page-break-inside: avoid; /* 避免单元格分页 */
      border: 1px solid #000; /* 打印时边框加深 */
      padding: 6px 10px; /* 打印时调整内边距 */
    }
  
      ol {
      list-style-type: decimal; /* 使用数字标号 */
      margin: 0 0 1em 20px;
      padding: 0;
    }
  
    li {
      margin: 0 0 0.5em 0; /* 调整列表项间距 */
      word-wrap: break-word; /* 确保内容不会溢出 */
      page-break-inside: avoid; /* 避免分页拆分列表项 */
    }
  
    /* 强制显示列表标号 */
    ol, ul {
      counter-reset: item; /* 重置计数器 */
    }
  
    ol > li {
      counter-increment: item; /* 增加计数器 */
      content: counter(item) ". "; /* 在列表项前显示数字标号 */
      display: list-item; /* 强制列表项显示标号 */
    }
  }