amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-24 04:33:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Beta] Change highlight styles (#4348)

Browse Source
This commit is contained in:
dan
2022-02-17 03:13:51 +00:00
committed by GitHub
parent a2138f2e63
commit 4ed4fb7415
4 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
beta/src/components/MDX/CodeBlock/CodeBlock.tsx
View File

@@ -49,14 +49,15 @@ const CodeBlock = function CodeBlock({
(line: InlineHiglight) => ({
...line,
elementAttributes: {'data-step': `${line.step}`},
className: cn('code-step bg-opacity-10 relative rounded-md p-1 ml-2', {
'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4':
!noMarkers,
'bg-blue-40 before:bg-blue-40': line.step === 1,
'bg-yellow-40 before:bg-yellow-40': line.step === 2,
'bg-green-40 before:bg-green-40': line.step === 3,
'bg-purple-40 before:bg-purple-40': line.step === 4,
}),
className: cn(
'code-step bg-opacity-10 dark:bg-opacity-20 relative rounded px-1 py-[1.5px] border-b-[2px] border-opacity-60',
{
'bg-blue-40 border-blue-40': line.step === 1,
'bg-yellow-40 border-yellow-40': line.step === 2,
'bg-green-40 border-green-40': line.step === 3,
'bg-purple-40 border-purple-40': line.step === 4,
}
),
})
);

2
beta/src/components/MDX/ConsoleBlock.tsx
View File

@@ -61,7 +61,7 @@ function ConsoleBlock({level = 'info', children}: ConsoleBlockProps) {
className={cn(
'flex px-4 pt-4 pb-6 items-center content-center font-mono text-code rounded-b-md',
{
'bg-red-30 text-red-40 bg-opacity-25': level === 'error',
'bg-red-30 text-red-40 bg-opacity-10': level === 'error',
'bg-yellow-5 text-yellow-50': level === 'warning',
'bg-gray-5 text-secondary dark:text-secondary-dark':
level === 'info',

10
beta/src/components/MDX/MDXComponents.tsx
View File

@@ -32,12 +32,12 @@ function CodeStep({children, step}: {children: any; step: number}) {
<span
data-step={step}
className={cn(
'code-step bg-opacity-10 relative rounded-md p-1 ml-2 pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4',
'code-step bg-opacity-10 dark:bg-opacity-20 relative rounded px-[6px] py-[1.5px] border-b-[2px] border-opacity-60',
{
'bg-blue-40 before:bg-blue-40': step === 1,
'bg-yellow-40 before:bg-yellow-40': step === 2,
'bg-green-40 before:bg-green-40': step === 3,
'bg-purple-40 before:bg-purple-40': step === 4,
'bg-blue-40 border-blue-40': step === 1,
'bg-yellow-40 border-yellow-40': step === 2,
'bg-green-40 border-green-40': step === 3,
'bg-purple-40 border-purple-40': step === 4,
}
)}>
{children}

11
beta/src/styles/index.css
View File

@@ -174,3 +174,14 @@
--hjFeedbackAccentColor: rgb(230, 247, 255) !important;
--hjFeedbackAccentTextColor: rgb(73, 119, 171) !important;
}
.code-step * {
color: black !important;
}
.code-step code {
background: none !important;
padding: 2px !important;
}
html.dark .code-step * {
color: white !important;
}