Obsidian 学习笔记

Appearance

打印优化样式 ​

Obsidian 默认的打印效果包含多余的界面元素。通过 CSS 的 @media print 可以优化打印和 PDF 导出效果。

基础打印样式 ​

css
/* 打印时隐藏界面元素 */
@media print {
  /* 隐藏侧边栏 */
  .workspace-ribbon,
  .workspace-split.mod-left-split,
  .workspace-split.mod-right-split,
  .status-bar,
  .view-header,
  .view-actions {
    display: none !important;
  }

  /* 内容区占满 */
  .markdown-preview-view {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 白色背景 */
  body {
    background: white !important;
  }
}

字体优化 ​

css
@media print {
  /* 打印字体 */
  .markdown-preview-view {
    font-family: 'Noto Serif SC', 'Source Han Serif', serif;
    font-size: 12pt;
    line-height: 1.6;
    color: #000000;
  }

  /* 标题 */
  .markdown-preview-view h1 { font-size: 20pt; }
  .markdown-preview-view h2 { font-size: 16pt; }
  .markdown-preview-view h3 { font-size: 14pt; }
}

分页控制 ​

css
@media print {
  /* 标题不与内容分离 */
  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* 代码块不分页 */
  pre, blockquote, table, figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* 图片不分页 */
  img {
    page-break-inside: avoid;
  }
}

链接处理 ​

css
@media print {
  /* 显示链接 URL */
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #666;
  }

  /* 内部链接保持正常 */
  a.internal-link::after {
    content: '';
  }
}

代码块打印 ​

css
@media print {
  /* 代码块白底黑字 */
  pre {
    background: #f5f5f5 !important;
    border: 1px solid #ddd;
    color: #333 !important;
    font-size: 10pt;
  }

  /* 行内代码 */
  code {
    background: #f0f0f0 !important;
    color: #c41d3f !important;
  }
}

表格打印 ​

css
@media print {
  /* 表格边框 */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 6px 10px;
  }

  th {
    background: #f0f0f0 !important;
    font-weight: bold;
  }
}

Callout 打印 ​

css
@media print {
  /* Callout 展开所有折叠 */
  .callout.is-collapsed .callout-content {
    display: block !important;
  }

  /* Callout 边框 */
  .callout {
    border: 1px solid #ccc !important;
    background: #f9f9f9 !important;
  }
}

页眉页脚 ​

css
@media print {
  /* 页码 */
  @page {
    margin: 2cm;
    @bottom-right {
      content: counter(page) ' / ' counter(pages);
      font-size: 10pt;
      color: #999;
    }
  }
}

相关内容 ​