Spaces:
Running
Running
Download css/markdown.css from hongcoding/perch-design: direct link, hf CLI and curl.
- Browser
- Download file 3.66 kB
-
https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/markdown.css
- Command line
-
hf download hf://spaces/hongcoding/perch-design/css/markdown.css
-
curl -L -o markdown.css https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/markdown.css
3.66 kB
| /* 消息内 Markdown 排版 + 代码块(配色全部映射到 theme.css 令牌) */ | |
| .md { | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| line-height: 1.75; | |
| color: var(--text); | |
| overflow-wrap: break-word; | |
| } | |
| .md > *:first-child { | |
| margin-top: 0; | |
| } | |
| .md > *:last-child { | |
| margin-bottom: 0; | |
| } | |
| .md p { | |
| margin: 0 0 16px; | |
| } | |
| .md h1, | |
| .md h2, | |
| .md h3, | |
| .md h4 { | |
| font-family: var(--font-serif); | |
| margin: 32px 0 12px; | |
| } | |
| .md h1 { | |
| font-size: 24px; | |
| } | |
| .md h2 { | |
| font-size: 20px; | |
| } | |
| .md h3 { | |
| font-size: 17px; | |
| } | |
| .md h4 { | |
| font-size: 15px; | |
| } | |
| .md ul, | |
| .md ol { | |
| margin: 0 0 16px; | |
| padding-left: 24px; | |
| } | |
| .md li { | |
| margin: 4px 0; | |
| } | |
| .md li > p { | |
| margin: 0; | |
| } | |
| .md a { | |
| color: var(--accent); | |
| text-decoration: underline; | |
| text-decoration-thickness: 1px; | |
| text-underline-offset: 3px; | |
| cursor: pointer; | |
| } | |
| .md blockquote { | |
| margin: 0 0 16px; | |
| padding: 4px 0 4px 16px; | |
| border-left: 2px solid var(--border); | |
| color: var(--text-secondary); | |
| } | |
| .md hr { | |
| margin: 24px 0; | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| } | |
| .md table { | |
| width: 100%; | |
| margin: 0 0 16px; | |
| border-collapse: collapse; | |
| font-size: 14px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .md th, | |
| .md td { | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--border); | |
| text-align: left; | |
| } | |
| .md th { | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .md img { | |
| max-width: 100%; | |
| border-radius: var(--radius-control); | |
| } | |
| /* 行内代码 */ | |
| .md code { | |
| padding: 2px 6px; | |
| border-radius: var(--radius-control); | |
| background: var(--bg-sunken); | |
| font-family: var(--font-mono); | |
| font-size: 0.92em; | |
| } | |
| /* ---------- 代码块 ---------- */ | |
| .code-block { | |
| margin: 0 0 16px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| background: var(--bg-sunken); | |
| overflow: hidden; | |
| } | |
| .code-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 6px 10px 6px 14px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .code-lang { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| } | |
| .code-copy { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| height: 26px; | |
| padding: 0 10px; | |
| border: none; | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .code-copy:hover { | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| } | |
| .code-block pre { | |
| margin: 0; | |
| padding: 14px 16px; | |
| overflow-x: auto; | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| line-height: 1.65; | |
| } | |
| .code-block pre code { | |
| padding: 0; | |
| border-radius: 0; | |
| background: none; | |
| font-size: 13px; | |
| } | |
| /* ---------- 语法高亮:highlight.js 语义 → 主题令牌 ---------- */ | |
| .hljs-comment, | |
| .hljs-quote { | |
| color: var(--text-tertiary); | |
| font-style: italic; | |
| } | |
| .hljs-keyword, | |
| .hljs-selector-tag, | |
| .hljs-literal, | |
| .hljs-type, | |
| .hljs-name, | |
| .hljs-tag { | |
| color: var(--accent); | |
| } | |
| .hljs-string, | |
| .hljs-regexp, | |
| .hljs-addition { | |
| color: var(--success); | |
| } | |
| .hljs-number, | |
| .hljs-symbol, | |
| .hljs-bullet, | |
| .hljs-attr, | |
| .hljs-attribute, | |
| .hljs-selector-attr, | |
| .hljs-selector-class, | |
| .hljs-selector-id, | |
| .hljs-variable, | |
| .hljs-template-variable, | |
| .hljs-link { | |
| color: var(--warning); | |
| } | |
| .hljs-title, | |
| .hljs-section, | |
| .hljs-title.function_ { | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| .hljs-built_in, | |
| .hljs-class .hljs-title, | |
| .hljs-namespace { | |
| color: var(--text-secondary); | |
| } | |
| .hljs-meta { | |
| color: var(--text-tertiary); | |
| } | |
| .hljs-emphasis { | |
| font-style: italic; | |
| } | |
| .hljs-strong { | |
| font-weight: 600; | |
| } | |
| .hljs-deletion { | |
| color: var(--danger); | |
| } | |