mirror of
https://github.com/shadcn-ui/taxonomy
synced 2026-05-23 09:18:30 +00:00
feat: update code blocks colors
This commit is contained in:
parent
9b9590a884
commit
d79b3bd1d3
10 changed files with 46 additions and 27 deletions
|
|
@ -144,7 +144,7 @@ const components = {
|
|||
pre: ({ className, ...props }) => (
|
||||
<pre
|
||||
className={cn(
|
||||
"mt-6 mb-4 overflow-x-auto rounded-lg bg-slate-50 py-4",
|
||||
"mt-6 mb-4 overflow-x-auto rounded-lg bg-slate-900 py-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
|
|||
|
||||
It's probably important that images look okay here by default as well:
|
||||
|
||||

|
||||
<Image
|
||||
src="/images/blog/blog-post-4.jpg"
|
||||
width="718"
|
||||
height="404"
|
||||
alt="Image"
|
||||
/>
|
||||
|
||||
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
|
|||
|
||||
It's probably important that images look okay here by default as well:
|
||||
|
||||

|
||||
<Image
|
||||
src="/images/blog/blog-post-4.jpg"
|
||||
width="718"
|
||||
height="404"
|
||||
alt="Image"
|
||||
/>
|
||||
|
||||
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
|
|||
|
||||
It's probably important that images look okay here by default as well:
|
||||
|
||||

|
||||
<Image
|
||||
src="/images/blog/blog-post-4.jpg"
|
||||
width="718"
|
||||
height="404"
|
||||
alt="Image"
|
||||
/>
|
||||
|
||||
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
|
|||
|
||||
It's probably important that images look okay here by default as well:
|
||||
|
||||

|
||||
<Image
|
||||
src="/images/blog/blog-post-4.jpg"
|
||||
width="718"
|
||||
height="404"
|
||||
alt="Image"
|
||||
/>
|
||||
|
||||
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,12 @@ Something a wise person once told me about typography is:
|
|||
|
||||
It's probably important that images look okay here by default as well:
|
||||
|
||||

|
||||
<Image
|
||||
src="/images/blog/blog-post-4.jpg"
|
||||
width="718"
|
||||
height="404"
|
||||
alt="Image"
|
||||
/>
|
||||
|
||||
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,12 @@ Something a wise person once told me about typography is:
|
|||
|
||||
It's probably important that images look okay here by default as well:
|
||||
|
||||

|
||||
<Image
|
||||
src="/images/blog/blog-post-4.jpg"
|
||||
width="718"
|
||||
height="404"
|
||||
alt="Image"
|
||||
/>
|
||||
|
||||
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,12 @@ Something a wise person once told me about typography is:
|
|||
|
||||
It's probably important that images look okay here by default as well:
|
||||
|
||||

|
||||
<Image
|
||||
src="/images/blog/blog-post-4.jpg"
|
||||
width="718"
|
||||
height="404"
|
||||
alt="Image"
|
||||
/>
|
||||
|
||||
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
|
||||
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ export default makeSource({
|
|||
[
|
||||
rehypePrettyCode,
|
||||
{
|
||||
theme: "css-variables",
|
||||
theme: "github-dark",
|
||||
onVisitLine(node) {
|
||||
// Prevent lines from collapsing in `display: grid` mode, and allow empty
|
||||
// lines to be copy/pasted
|
||||
|
|
|
|||
|
|
@ -1,19 +1,3 @@
|
|||
:root {
|
||||
--shiki-color-text: #414141;
|
||||
--shiki-color-background: transparent;
|
||||
--shiki-token-constant: #114b84;
|
||||
--shiki-token-string: #0e7226;
|
||||
--shiki-token-comment: #aaa;
|
||||
--shiki-token-keyword: #d32f2f;
|
||||
--shiki-token-parameter: #ff9800;
|
||||
--shiki-token-function: #6f42c1;
|
||||
--shiki-token-string-expression: #0e7226;
|
||||
--shiki-token-punctuation: #212121;
|
||||
--shiki-token-link: #0e7226;
|
||||
--nextra-shiki-deleted: #f00;
|
||||
--nextra-shiki-inserted: #0e7226;
|
||||
}
|
||||
|
||||
[data-rehype-pretty-code-fragment] code {
|
||||
@apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black;
|
||||
counter-reset: line;
|
||||
|
|
@ -32,13 +16,13 @@
|
|||
color: gray;
|
||||
}
|
||||
[data-rehype-pretty-code-fragment] .line--highlighted {
|
||||
@apply bg-slate-500 bg-opacity-10;
|
||||
@apply bg-slate-300 bg-opacity-10;
|
||||
}
|
||||
[data-rehype-pretty-code-fragment] .line-highlighted span {
|
||||
@apply relative;
|
||||
}
|
||||
[data-rehype-pretty-code-fragment] .word--highlighted {
|
||||
@apply rounded-md bg-slate-500 bg-opacity-10 p-1;
|
||||
@apply rounded-md bg-slate-300 bg-opacity-10 p-1;
|
||||
}
|
||||
[data-rehype-pretty-code-title] {
|
||||
@apply mt-4 py-2 px-4 text-sm font-medium;
|
||||
|
|
|
|||
Loading…
Reference in a new issue