012e54959d
Before: <img width="667" alt="Screenshot 2024-06-12 at 15 54 38" src="https://github.com/tldraw/tldraw/assets/1489520/3a5fc43c-fa2e-4b08-8e8b-c1c66decf7fa"> After: <img width="654" alt="Screenshot 2024-06-12 at 15 55 10" src="https://github.com/tldraw/tldraw/assets/1489520/8c8abcaa-f156-4be4-a5e9-d1a4eff39ff4"> Previously, when items in our documentation referred to each other in code snippets, we'd put the links to their documentation pages in a separate "references" section at the bottom of the docs. Generally I find that this makes links harder to find (they're not in-context) and adds a fair bit of visual noise to our API documentation. This diff moves those links inline by adding a post-processing step to our highlighted code. This is slightly more involved than I wanted it to be (see the comments in code.tsx for an explanation of why) but it gets the job done. I've added small link icons next to linked code items - i experimented with underlines and a 🔗 icon too, but this seemed to look the best. ### Change Type - [x] `docs` — Changes to the documentation, examples, or templates. - [x] `improvement` — Improving existing features
98 lines
2 KiB
CSS
98 lines
2 KiB
CSS
/* ------------------- Code Themes ------------------ */
|
|
|
|
.hljs {
|
|
color: var(--hl);
|
|
}
|
|
|
|
.hljs-comment {
|
|
color: var(--hl-0);
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-quote {
|
|
color: var(--hl-1);
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-doctag,
|
|
.hljs-keyword,
|
|
.hljs-formula {
|
|
color: var(--hl-2);
|
|
}
|
|
|
|
.hljs-section,
|
|
.hljs-name,
|
|
.hljs-selector-tag,
|
|
.hljs-deletion,
|
|
.hljs-subst {
|
|
color: var(--hl-3);
|
|
}
|
|
|
|
.hljs-literal {
|
|
color: var(--hl-4);
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-regexp,
|
|
.hljs-addition,
|
|
.hljs-attribute,
|
|
.hljs-meta .hljs-string {
|
|
color: var(--hl-5);
|
|
}
|
|
|
|
.hljs-attr,
|
|
.hljs-variable,
|
|
.hljs-template-variable,
|
|
.hljs-type,
|
|
.hljs-selector-class,
|
|
.hljs-selector-attr,
|
|
.hljs-selector-pseudo,
|
|
.hljs-number {
|
|
color: var(--hl-6);
|
|
}
|
|
|
|
.hljs-symbol,
|
|
.hljs-bullet,
|
|
.hljs-link,
|
|
.hljs-meta,
|
|
.hljs-selector-id,
|
|
.hljs-title {
|
|
color: var(--hl-7);
|
|
}
|
|
|
|
.hljs-built_in,
|
|
.hljs-title.class_,
|
|
.hljs-class .hljs-title {
|
|
color: var(--hl-8);
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-link {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.hljs a.code-link {
|
|
color: inherit;
|
|
}
|
|
a.code-link::before {
|
|
content: '';
|
|
width: 15px;
|
|
height: 15px;
|
|
display: inline-block;
|
|
background: currentColor;
|
|
-webkit-mask: url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 2.5H3.5C2.94772 2.5 2.5 2.94772 2.5 3.5V11.5C2.5 12.0523 2.94772 12.5 3.5 12.5H11.5C12.0523 12.5 12.5 12.0523 12.5 11.5V8.5M9.5 2.5H12.5M12.5 2.5V5.5M12.5 2.5L6.5 8.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>')
|
|
no-repeat 50% 50%;
|
|
mask: url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 2.5H3.5C2.94772 2.5 2.5 2.94772 2.5 3.5V11.5C2.5 12.0523 2.94772 12.5 3.5 12.5H11.5C12.0523 12.5 12.5 12.0523 12.5 11.5V8.5M9.5 2.5H12.5M12.5 2.5V5.5M12.5 2.5L6.5 8.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>')
|
|
no-repeat 50% 50%;
|
|
-webkit-mask-size: cover;
|
|
mask-size: cover;
|
|
vertical-align: -2px;
|
|
margin-right: 2px;
|
|
}
|