Last active
January 4, 2026 05:27
-
-
Save jiyee/1226046e6e61944d8a48aac4b89ec187 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ========================================= | |
| Feishu/Lark Document Style Replica | |
| ========================================= */ | |
| /* 打印设置 */ | |
| @page { | |
| size: A4; | |
| margin: 10mm 8mm; /* 飞书默认导出边距 */ | |
| } | |
| /* 全局重置 */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: #fff; | |
| } | |
| body { | |
| font-family: ".SF NS", "PingFang SC", "LarkHackSafariFont", "LarkEmojiFont", "LarkChineseQuote", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | |
| font-size: 16px; /* 飞书文档正文通常较小,14px-15px */ | |
| line-height: 1.625; | |
| color: #1f2329; | |
| -webkit-font-smoothing: antialiased; | |
| -webkit-print-color-adjust: exact; /* 强制打印背景色 */ | |
| print-color-adjust: exact; | |
| } | |
| /* 链接 */ | |
| a { | |
| color: #3370ff; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| /* ========================================= | |
| 标题 (Headings) | |
| ========================================= */ | |
| h1, h2, h3, h4, h5, h6 { | |
| margin-top: 1.5em; | |
| margin-bottom: 0.8em; | |
| font-weight: 600; | |
| color: #1f2329; | |
| line-height: 1.4; | |
| page-break-after: avoid; | |
| page-break-inside: avoid; | |
| } | |
| h1 { font-size: 26px; } | |
| h2 { font-size: 22px; } | |
| h3 { font-size: 20px; } | |
| h4 { font-size: 18px; } | |
| h5, h6 { font-size: 16px; } | |
| /* ========================================= | |
| 正文与排版 | |
| ========================================= */ | |
| p { | |
| /* margin: 0 0 1em 0; */ | |
| text-align: justify; /* 两端对齐更像文档 */ | |
| } | |
| strong { | |
| font-weight: 600; | |
| color: #000; /* 加粗稍微更黑一点 */ | |
| } | |
| /* 引用块 */ | |
| blockquote { | |
| /* margin: 1em 0; */ | |
| padding: 10px 14px; | |
| background: #fff; /* 飞书引用背景通常是白色的,靠左边框区分 */ | |
| border-left: 3px solid #dee0e3; | |
| color: #8f959e; | |
| page-break-inside: avoid; | |
| } | |
| blockquote p { | |
| margin: 0; | |
| } | |
| /* 分割线 */ | |
| hr { | |
| border: 0; | |
| border-top: 1px solid #dee0e3; | |
| margin: 24px 0; | |
| } | |
| /* ========================================= | |
| 列表 (Lists) | |
| ========================================= */ | |
| ul, ol { | |
| padding-left: 24px; | |
| margin: 0 0 1em 0; | |
| } | |
| li { | |
| margin-bottom: 4px; | |
| line-height: 1.6; | |
| } | |
| /* 嵌套列表间距调整 */ | |
| li > ul, li > ol { | |
| margin-top: 4px; | |
| } | |
| /* 任务列表 checkbox */ | |
| input[type="checkbox"] { | |
| margin-right: 8px; | |
| vertical-align: middle; | |
| } | |
| /* ========================================= | |
| 图片 (Images) - 核心适配 | |
| ========================================= */ | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| margin: 16px auto; /* 居中 */ | |
| border-radius: 4px; /* 圆角 */ | |
| /* 飞书图片通常没有明显的边框,但如果有边框需求可解开下面注释 */ | |
| /* border: 1px solid var(--fs-border); */ | |
| /* 打印优化:防止图片被切断 */ | |
| page-break-inside: avoid; | |
| } | |
| /* ========================================= | |
| 表格 (Tables) - 飞书风格还原重点 | |
| ========================================= */ | |
| /* ========================================= | |
| 表格 (Tables) - 内外边框区分优化版 | |
| ========================================= */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; /* 关键:合并边框模型 */ | |
| margin: 20px 0; | |
| font-size: 13px; | |
| page-break-inside: auto; | |
| /* 【外边框设置】 */ | |
| /* 策略:使用稍深一点的灰色,或者更粗的线条 */ | |
| border: 1px solid #c8cdd4; /* 比内边框稍深、稍粗 */ | |
| } | |
| tr { | |
| page-break-inside: avoid; | |
| page-break-after: auto; | |
| } | |
| th, td { | |
| padding: 9px 12px; /* 稍微增加舒适度 */ | |
| text-align: left; | |
| vertical-align: top; | |
| /* 【内边框设置】 */ | |
| /* 策略:使用飞书标准的浅灰色 */ | |
| border: 1px solid #dee0e3; | |
| } | |
| th { | |
| background-color: #f5f6f7; /* 飞书浅灰表头背景 */ | |
| font-weight: 600; | |
| color: #1f2329; | |
| /* 【表头与内容的分隔】 */ | |
| /* 策略:底部边框加粗,颜色与外边框一致,形成视觉锚点 */ | |
| border-bottom: 2px solid #c8cdd4; | |
| } | |
| /* 飞书表格通常是纯白底,如果需要隔行变色可使用: */ | |
| /* tr:nth-child(even) { background-color: #fcfcfd; } */ | |
| /* ========================================= | |
| 代码 (Code) | |
| ========================================= */ | |
| /* 行内代码 */ | |
| code { | |
| font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace; | |
| font-size: 0.9em; | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| background-color: rgba(31, 35, 41, 0.05); | |
| color: #d03050; /* 类似飞书的红色高亮 */ | |
| } | |
| /* 代码块 */ | |
| pre { | |
| background-color: #f5f6f7; | |
| padding: 16px; | |
| border-radius: 4px; | |
| overflow-x: auto; | |
| margin: 16px 0; | |
| page-break-inside: avoid; | |
| } | |
| pre code { | |
| background-color: transparent; | |
| color: #1f2329; | |
| padding: 0; | |
| border-radius: 0; | |
| white-space: pre-wrap; /* 自动换行,防止PDF溢出 */ | |
| word-break: break-all; | |
| } | |
| /* ========================================= | |
| 特殊布局适配 (针对 Markdown 转换后的结构) | |
| ========================================= */ | |
| body { | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment