✨ feat: remove highlight.js and use shiki #994
rdmclin2Annotations
9 errors and 1 warning
|
tests/demo.test.tsx > <Highlight /> > renders theme.tsx correctly:
tests/demo.test.tsx#L44
Error: Snapshot `<Highlight /> > renders theme.tsx correctly 1` mismatched
- Expected
+ Received
@@ -86,73 +86,16 @@
P .emotion-4:hover {
color: #333333;
background: rgba(0, 0, 0, 0.15);
}
- .emotion-5 {
- display: block;
- overflow-x: auto;
- color: #333333;
- background-color: #666666;
- }
-
- .emotion-5 .hljs-comment,
- .emotion-5 .hljs-quote {
- color: #aaaaaa;
- }
-
- .emotion-5 .hljs-variable,
- .emotion-5 .hljs-attribute,
- .emotion-5 .hljs-template-variable,
- .emotion-5 .hljs-tag,
- .emotion-5 .hljs-name,
- .emotion-5 .hljs-selector-id,
- .emotion-5 .hljs-selector-class,
- .emotion-5 .hljs-regexp,
- .emotion-5 .hljs-title,
- .emotion-5 .hljs-deletion {
- color: #ec5e41;
- }
-
- .emotion-5 .hljs-builtin-name,
- .emotion-5 .hljs-literal,
- .emotion-5 .hljs-type,
- .emotion-5 .hljs-params,
- .emotion-5 .hljs-meta,
- .emotion-5 .hljs-link {
- color: #ff802b;
- }
-
- .emotion-5 .hljs-string,
- .emotion-5 .hljs-number,
- .emotion-5 .hljs-symbol,
- .emotion-5 .hljs-bullet,
- .emotion-5 .hljs-addition {
- color: #55b467;
+ .emotion-5 .shiki {
+ overflow-x: scroll;
+ background: none!important;
}
- .emotion-5 .hljs-keyword,
- .emotion-5 .hljs-doctag,
- .emotion-5 .hljs-built_in,
- .emotion-5 .hljs-selector-tag,
- .emotion-5 .hljs-section {
- color: #369eff;
- }
-
- .emotion-5 .hljs-emphasis {
- font-style: italic;
- }
-
- .emotion-5 .hljs-strong {
- font-weight: bold;
- }
-
.emotion-6 {
- width: 100%;
- }
-
- .emotion-20 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
@@ -167,11 +110,11 @@
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
- .emotion-21 {
+ .emotion-7 {
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
position: absolute;
top: 0;
right: 0;
@@ -192,11 +135,11 @@
font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
color: #aaaaaa;
border-radius: 6;
}
- .emotion-22 {
+ .emotion-8 {
color: #aaaaaa;
}
<div>
<div>
@@ -538,262 +481,38 @@
<span
class="ant-tag ant-tag-borderless ant-editor-highlight-tag emotion-4"
>
typescript
</span>
- <pre
- class="emotion-5"
+ <div
+ class="ant-editor-highlight-shiki emotion-5"
>
- <table
- border="0"
- cellpadding="0"
- cellspacing="0"
- >
- <tbody>
- <tr>
- <td
- class="ant-editor-highlight-content emotion-6"
- >
- <span
- class="hljs-class"
- >
- <span
- class="hljs-keyword"
- >
- class
- </span>
-
- <span
- class="hljs-title"
- >
- MyClass
- </span>
-
- </span>
- {
- </td>
- </tr>
- <tr>
- <td
- class="ant-editor-highlight-content emotion-6"
- >
-
- <span
- class="hljs-keyword"
- >
- public
- </span>
-
- <span
- class="hljs-keyword"
- >
- static
- </span>
- myValue:
- <span
- class="hljs-built_in"
- >
- string
- </span>
- ;
- </td>
- </tr>
- <tr>
- <td
- class="ant-editor-highlight-content emotion-6"
-
|
|
tests/demo.test.tsx > <Highlight /> > renders lineNumber.tsx correctly:
tests/demo.test.tsx#L44
Error: Snapshot `<Highlight /> > renders lineNumber.tsx correctly 1` mismatched
- Expected
+ Received
@@ -86,86 +86,35 @@
P .emotion-4:hover {
color: #333333;
background: rgba(0, 0, 0, 0.15);
}
- .emotion-5 {
- display: block;
- overflow-x: auto;
- color: #333333;
- background-color: #666666;
+ .emotion-5 .shiki {
+ overflow-x: scroll;
+ background: none!important;
}
- .emotion-5 .hljs-comment,
- .emotion-5 .hljs-quote {
- color: #aaaaaa;
+ .emotion-5 .shiki code {
+ counter-reset: step;
+ counter-increment: step 0;
}
- .emotion-5 .hljs-variable,
- .emotion-5 .hljs-attribute,
- .emotion-5 .hljs-template-variable,
- .emotion-5 .hljs-tag,
- .emotion-5 .hljs-name,
- .emotion-5 .hljs-selector-id,
- .emotion-5 .hljs-selector-class,
- .emotion-5 .hljs-regexp,
- .emotion-5 .hljs-title,
- .emotion-5 .hljs-deletion {
- color: #ec5e41;
- }
-
- .emotion-5 .hljs-builtin-name,
- .emotion-5 .hljs-literal,
- .emotion-5 .hljs-type,
- .emotion-5 .hljs-params,
- .emotion-5 .hljs-meta,
- .emotion-5 .hljs-link {
- color: #ff802b;
- }
-
- .emotion-5 .hljs-string,
- .emotion-5 .hljs-number,
- .emotion-5 .hljs-symbol,
- .emotion-5 .hljs-bullet,
- .emotion-5 .hljs-addition {
- color: #55b467;
- }
-
- .emotion-5 .hljs-keyword,
- .emotion-5 .hljs-doctag,
- .emotion-5 .hljs-built_in,
- .emotion-5 .hljs-selector-tag,
- .emotion-5 .hljs-section {
- color: #369eff;
- }
-
- .emotion-5 .hljs-emphasis {
- font-style: italic;
- }
-
- .emotion-5 .hljs-strong {
- font-weight: bold;
- }
-
- .emotion-6 {
- box-sizing: border-box;
+ .emotion-5 .shiki code .line::before {
+ content: counter(step);
+ counter-increment: step;
width: 1rem;
margin-right: 1.5rem;
display: inline-block;
+ text-align: right;
color: rgba(115, 138, 148, 0.4);
- text-align: right;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
- .emotion-7 {
- width: 100%;
- }
-
- .emotion-16 {
+ .emotion-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
@@ -180,11 +129,11 @@
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
- .emotion-17 {
+ .emotion-7 {
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
position: absolute;
top: 0;
right: 0;
@@ -205,11 +154,11 @@
font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
color: #aaaaaa;
border-radius: 6;
}
- .emotion-18 {
+ .emotion-8 {
color: #aaaaaa;
}
<div>
<div
@@ -263,156 +212,29 @@
<span
class="ant-tag ant-tag-borderless ant-editor-highlight-tag emotion-4"
>
java
</span>
- <pre
- class="emotion-5"
+ <div
+ class="ant-editor-highlight-shiki emotion-5"
>
- <table
- border="0"
- cellpadding="0"
- cellspacing="0"
- >
- <tbody>
- <tr>
- <td
- class="ant-editor-highlight-index emotion-6"
- >
- 1
- </td>
- <td
- class="ant-editor-highlight-content emotion-7"
- >
- <span
- class="hljs-keyword"
- >
- public
- </span>
-
- <span
- class="hljs-class"
- >
- <span
- class="hljs-keyword"
- >
- class
- </span>
-
- <span
- class="hljs-title"
- >
- HelloWorld
- </span>
-
- </span>
- {
- </td>
- </tr>
- <tr>
- <td
- class="ant-editor-highlight-index emotion-6"
- >
- 2
- </td>
- <td
- class="ant-editor-highlight-c
|
|
tests/demo.test.tsx > <Highlight /> > renders basic.tsx correctly:
tests/demo.test.tsx#L44
Error: Snapshot `<Highlight /> > renders basic.tsx correctly 1` mismatched
- Expected
+ Received
@@ -86,73 +86,16 @@
P .emotion-4:hover {
color: #dddddd;
background: rgba(0, 0, 0, 0.15);
}
- .emotion-5 {
- display: block;
- overflow-x: auto;
- color: #dddddd;
- background-color: #777777;
- }
-
- .emotion-5 .hljs-comment,
- .emotion-5 .hljs-quote {
- color: #555555;
- }
-
- .emotion-5 .hljs-variable,
- .emotion-5 .hljs-attribute,
- .emotion-5 .hljs-template-variable,
- .emotion-5 .hljs-tag,
- .emotion-5 .hljs-name,
- .emotion-5 .hljs-selector-id,
- .emotion-5 .hljs-selector-class,
- .emotion-5 .hljs-regexp,
- .emotion-5 .hljs-title,
- .emotion-5 .hljs-deletion {
- color: #f04f88;
- }
-
- .emotion-5 .hljs-builtin-name,
- .emotion-5 .hljs-literal,
- .emotion-5 .hljs-type,
- .emotion-5 .hljs-params,
- .emotion-5 .hljs-meta,
- .emotion-5 .hljs-link {
- color: #ffcb47;
- }
-
- .emotion-5 .hljs-string,
- .emotion-5 .hljs-number,
- .emotion-5 .hljs-symbol,
- .emotion-5 .hljs-bullet,
- .emotion-5 .hljs-addition {
- color: #c4f042;
- }
-
- .emotion-5 .hljs-keyword,
- .emotion-5 .hljs-doctag,
- .emotion-5 .hljs-built_in,
- .emotion-5 .hljs-selector-tag,
- .emotion-5 .hljs-section {
- color: #8ae8ff;
- }
-
- .emotion-5 .hljs-emphasis {
- font-style: italic;
- }
-
- .emotion-5 .hljs-strong {
- font-weight: bold;
+ .emotion-5 .shiki {
+ overflow-x: scroll;
+ background: none!important;
}
.emotion-6 {
- width: 100%;
- }
-
- .emotion-11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
@@ -167,11 +110,11 @@
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
- .emotion-12 {
+ .emotion-7 {
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
position: absolute;
top: 0;
right: 0;
@@ -192,11 +135,11 @@
font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
color: #555555;
border-radius: 6;
}
- .emotion-13 {
+ .emotion-8 {
color: #555555;
}
<div>
<div
@@ -250,131 +193,29 @@
<span
class="ant-tag ant-tag-borderless ant-editor-highlight-tag emotion-4"
>
java
</span>
- <pre
- class="emotion-5"
+ <div
+ class="ant-editor-highlight-shiki emotion-5"
>
- <table
- border="0"
- cellpadding="0"
- cellspacing="0"
- >
- <tbody>
- <tr>
- <td
- class="ant-editor-highlight-content emotion-6"
- >
- <span
- class="hljs-keyword"
- >
- public
- </span>
-
- <span
- class="hljs-class"
- >
- <span
- class="hljs-keyword"
- >
- class
- </span>
-
- <span
- class="hljs-title"
- >
- HelloWorld
- </span>
-
- </span>
- {
- </td>
- </tr>
- <tr>
- <td
- class="ant-editor-highlight-content emotion-6"
- >
-
- <span
- class="hljs-keyword"
- >
- public
- </span>
-
- <span
- class="hljs-keyword"
- >
- static
- </span>
-
- <span
- class="hljs-built_in"
- >
- void
- </span>
-
- <span
- class="hljs-function"
- >
- <span
- class="hljs-title"
- >
- main
- </span>
- (
- <span
- class=
|
|
tests/demo.test.tsx > <Highlight /> > renders auto.tsx correctly:
tests/demo.test.tsx#L44
Error: Snapshot `<Highlight /> > renders auto.tsx correctly 1` mismatched
- Expected
+ Received
@@ -86,73 +86,16 @@
P .emotion-4:hover {
color: #333333;
background: rgba(0, 0, 0, 0.15);
}
- .emotion-5 {
- display: block;
- overflow-x: auto;
- color: #333333;
- background-color: #666666;
- }
-
- .emotion-5 .hljs-comment,
- .emotion-5 .hljs-quote {
- color: #aaaaaa;
- }
-
- .emotion-5 .hljs-variable,
- .emotion-5 .hljs-attribute,
- .emotion-5 .hljs-template-variable,
- .emotion-5 .hljs-tag,
- .emotion-5 .hljs-name,
- .emotion-5 .hljs-selector-id,
- .emotion-5 .hljs-selector-class,
- .emotion-5 .hljs-regexp,
- .emotion-5 .hljs-title,
- .emotion-5 .hljs-deletion {
- color: #ec5e41;
- }
-
- .emotion-5 .hljs-builtin-name,
- .emotion-5 .hljs-literal,
- .emotion-5 .hljs-type,
- .emotion-5 .hljs-params,
- .emotion-5 .hljs-meta,
- .emotion-5 .hljs-link {
- color: #ff802b;
- }
-
- .emotion-5 .hljs-string,
- .emotion-5 .hljs-number,
- .emotion-5 .hljs-symbol,
- .emotion-5 .hljs-bullet,
- .emotion-5 .hljs-addition {
- color: #55b467;
- }
-
- .emotion-5 .hljs-keyword,
- .emotion-5 .hljs-doctag,
- .emotion-5 .hljs-built_in,
- .emotion-5 .hljs-selector-tag,
- .emotion-5 .hljs-section {
- color: #369eff;
- }
-
- .emotion-5 .hljs-emphasis {
- font-style: italic;
- }
-
- .emotion-5 .hljs-strong {
- font-weight: bold;
+ .emotion-5 .shiki {
+ overflow-x: scroll;
+ background: none!important;
}
.emotion-6 {
- width: 100%;
- }
-
- .emotion-11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
@@ -167,11 +110,11 @@
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
- .emotion-12 {
+ .emotion-7 {
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
position: absolute;
top: 0;
right: 0;
@@ -192,11 +135,11 @@
font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
color: #aaaaaa;
border-radius: 6;
}
- .emotion-13 {
+ .emotion-8 {
color: #aaaaaa;
}
<div>
<div
@@ -250,131 +193,29 @@
<span
class="ant-tag ant-tag-borderless ant-editor-highlight-tag emotion-4"
>
java
</span>
- <pre
- class="emotion-5"
+ <div
+ class="ant-editor-highlight-shiki emotion-5"
>
- <table
- border="0"
- cellpadding="0"
- cellspacing="0"
- >
- <tbody>
- <tr>
- <td
- class="ant-editor-highlight-content emotion-6"
- >
- <span
- class="hljs-keyword"
- >
- public
- </span>
-
- <span
- class="hljs-class"
- >
- <span
- class="hljs-keyword"
- >
- class
- </span>
-
- <span
- class="hljs-title"
- >
- HelloWorld
- </span>
-
- </span>
- {
- </td>
- </tr>
- <tr>
- <td
- class="ant-editor-highlight-content emotion-6"
- >
-
- <span
- class="hljs-keyword"
- >
- public
- </span>
-
- <span
- class="hljs-keyword"
- >
- static
- </span>
-
- <span
- class="hljs-built_in"
- >
- void
- </span>
-
- <span
- class="hljs-function"
- >
- <span
- class="hljs-title"
- >
- main
- </span>
- (
- <span
- class="
|
|
tests/demo.test.tsx > <Markdown /> > renders index.tsx correctly:
tests/demo.test.tsx#L44
Error: Snapshot `<Markdown /> > renders index.tsx correctly 1` mismatched
- Expected
+ Received
@@ -217,73 +217,16 @@
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
- .emotion-4 {
- display: block;
- overflow-x: auto;
- color: #333333;
- background-color: #666666;
- }
-
- .emotion-4 .hljs-comment,
- .emotion-4 .hljs-quote {
- color: #aaaaaa;
- }
-
- .emotion-4 .hljs-variable,
- .emotion-4 .hljs-attribute,
- .emotion-4 .hljs-template-variable,
- .emotion-4 .hljs-tag,
- .emotion-4 .hljs-name,
- .emotion-4 .hljs-selector-id,
- .emotion-4 .hljs-selector-class,
- .emotion-4 .hljs-regexp,
- .emotion-4 .hljs-title,
- .emotion-4 .hljs-deletion {
- color: #ec5e41;
- }
-
- .emotion-4 .hljs-builtin-name,
- .emotion-4 .hljs-literal,
- .emotion-4 .hljs-type,
- .emotion-4 .hljs-params,
- .emotion-4 .hljs-meta,
- .emotion-4 .hljs-link {
- color: #ff802b;
- }
-
- .emotion-4 .hljs-string,
- .emotion-4 .hljs-number,
- .emotion-4 .hljs-symbol,
- .emotion-4 .hljs-bullet,
- .emotion-4 .hljs-addition {
- color: #55b467;
- }
-
- .emotion-4 .hljs-keyword,
- .emotion-4 .hljs-doctag,
- .emotion-4 .hljs-built_in,
- .emotion-4 .hljs-selector-tag,
- .emotion-4 .hljs-section {
- color: #369eff;
- }
-
- .emotion-4 .hljs-emphasis {
- font-style: italic;
+ .emotion-4 .shiki {
+ overflow-x: scroll;
+ background: none!important;
}
- .emotion-4 .hljs-strong {
- font-weight: bold;
- }
-
.emotion-5 {
- width: 100%;
- }
-
- .emotion-7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
@@ -298,11 +241,11 @@
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
- .emotion-8 {
+ .emotion-6 {
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
position: absolute;
top: 0;
right: 0;
@@ -323,15 +266,15 @@
font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
color: #aaaaaa;
border-radius: 6;
}
- .emotion-9 {
+ .emotion-7 {
color: #aaaaaa;
}
- .emotion-10 {
+ .emotion-8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
@@ -344,38 +287,38 @@
justify-content: center;
-webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
- .emotion-10:hover {
+ .emotion-8:hover {
color: rgba(0, 0, 0, 0.88)!important;
}
- .emotion-10:active {
+ .emotion-8:active {
scale: 0.8;
color: rgba(0, 0, 0, 0.88);
}
- .emotion-11 {
+ .emotion-9 {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 6px;
}
- .emotion-12:not(:last-child) {
+ .emotion-10:not(:last-child) {
margin-block-start: 1em;
margin-block-end: 1em;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
}
- .emotion-12 pre {
+ .emotion-10 pre {
padding: 12px!important;
}
- .emotion-13 {
+ .emotion-11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
@@ -389,20 +332,20 @@
-ms-flex-align: center;
align-items: center;
width: 100%;
}
- .emotion-14 {
+ .emotion-12 {
padding: 4px 8px;
width: auto!important;
}
- .emotion-14 .ant-editor-markdown-btn:hover {
+ .emotion-12 .ant-editor-markdown-btn:hover {
color: rgba(0, 0, 0, 0.65)!important;
}
- .emotion-15 {
+ .emotion-13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
@@ -417,85 +360,85 @@
transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355,
|
|
tests/demo.test.tsx > <Markdown /> > renders code.tsx correctly:
tests/demo.test.tsx#L44
Error: Snapshot `<Markdown /> > renders code.tsx correctly 1` mismatched
- Expected
+ Received
@@ -217,73 +217,16 @@
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
- .emotion-4 {
- display: block;
- overflow-x: auto;
- color: #333333;
- background-color: #666666;
- }
-
- .emotion-4 .hljs-comment,
- .emotion-4 .hljs-quote {
- color: #aaaaaa;
- }
-
- .emotion-4 .hljs-variable,
- .emotion-4 .hljs-attribute,
- .emotion-4 .hljs-template-variable,
- .emotion-4 .hljs-tag,
- .emotion-4 .hljs-name,
- .emotion-4 .hljs-selector-id,
- .emotion-4 .hljs-selector-class,
- .emotion-4 .hljs-regexp,
- .emotion-4 .hljs-title,
- .emotion-4 .hljs-deletion {
- color: #ec5e41;
- }
-
- .emotion-4 .hljs-builtin-name,
- .emotion-4 .hljs-literal,
- .emotion-4 .hljs-type,
- .emotion-4 .hljs-params,
- .emotion-4 .hljs-meta,
- .emotion-4 .hljs-link {
- color: #ff802b;
- }
-
- .emotion-4 .hljs-string,
- .emotion-4 .hljs-number,
- .emotion-4 .hljs-symbol,
- .emotion-4 .hljs-bullet,
- .emotion-4 .hljs-addition {
- color: #55b467;
- }
-
- .emotion-4 .hljs-keyword,
- .emotion-4 .hljs-doctag,
- .emotion-4 .hljs-built_in,
- .emotion-4 .hljs-selector-tag,
- .emotion-4 .hljs-section {
- color: #369eff;
- }
-
- .emotion-4 .hljs-emphasis {
- font-style: italic;
- }
-
- .emotion-4 .hljs-strong {
- font-weight: bold;
+ .emotion-4 .shiki {
+ overflow-x: scroll;
+ background: none!important;
}
.emotion-5 {
- width: 100%;
- }
-
- .emotion-7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
@@ -298,11 +241,11 @@
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
- .emotion-8 {
+ .emotion-6 {
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
position: absolute;
top: 0;
right: 0;
@@ -323,15 +266,15 @@
font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
color: #aaaaaa;
border-radius: 6;
}
- .emotion-9 {
+ .emotion-7 {
color: #aaaaaa;
}
- .emotion-10 {
+ .emotion-8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
@@ -344,38 +287,38 @@
justify-content: center;
-webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
- .emotion-10:hover {
+ .emotion-8:hover {
color: rgba(0, 0, 0, 0.88)!important;
}
- .emotion-10:active {
+ .emotion-8:active {
scale: 0.8;
color: rgba(0, 0, 0, 0.88);
}
- .emotion-11 {
+ .emotion-9 {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 6px;
}
- .emotion-12:not(:last-child) {
+ .emotion-10:not(:last-child) {
margin-block-start: 1em;
margin-block-end: 1em;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
}
- .emotion-12 pre {
+ .emotion-10 pre {
padding: 12px!important;
}
- .emotion-13 {
+ .emotion-11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
@@ -389,20 +332,20 @@
-ms-flex-align: center;
align-items: center;
width: 100%;
}
- .emotion-14 {
+ .emotion-12 {
padding: 4px 8px;
width: auto!important;
}
- .emotion-14 .ant-editor-markdown-btn:hover {
+ .emotion-12 .ant-editor-markdown-btn:hover {
color: rgba(0, 0, 0, 0.65)!important;
}
- .emotion-15 {
+ .emotion-13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
@@ -417,85 +360,85 @@
transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355,
|
|
tests/demo.test.tsx > <Snippet /> > renders spotlight.tsx correctly:
tests/demo.test.tsx#L44
Error: Snapshot `<Snippet /> > renders spotlight.tsx correctly 1` mismatched
- Expected
+ Received
@@ -68,73 +68,16 @@
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
- .emotion-3 {
- display: block;
- overflow-x: auto;
- color: #333333;
- background-color: #666666;
- }
-
- .emotion-3 .hljs-comment,
- .emotion-3 .hljs-quote {
- color: #aaaaaa;
- }
-
- .emotion-3 .hljs-variable,
- .emotion-3 .hljs-attribute,
- .emotion-3 .hljs-template-variable,
- .emotion-3 .hljs-tag,
- .emotion-3 .hljs-name,
- .emotion-3 .hljs-selector-id,
- .emotion-3 .hljs-selector-class,
- .emotion-3 .hljs-regexp,
- .emotion-3 .hljs-title,
- .emotion-3 .hljs-deletion {
- color: #ec5e41;
- }
-
- .emotion-3 .hljs-builtin-name,
- .emotion-3 .hljs-literal,
- .emotion-3 .hljs-type,
- .emotion-3 .hljs-params,
- .emotion-3 .hljs-meta,
- .emotion-3 .hljs-link {
- color: #ff802b;
- }
-
- .emotion-3 .hljs-string,
- .emotion-3 .hljs-number,
- .emotion-3 .hljs-symbol,
- .emotion-3 .hljs-bullet,
- .emotion-3 .hljs-addition {
- color: #55b467;
- }
-
- .emotion-3 .hljs-keyword,
- .emotion-3 .hljs-doctag,
- .emotion-3 .hljs-built_in,
- .emotion-3 .hljs-selector-tag,
- .emotion-3 .hljs-section {
- color: #369eff;
- }
-
- .emotion-3 .hljs-emphasis {
- font-style: italic;
- }
-
- .emotion-3 .hljs-strong {
- font-weight: bold;
+ .emotion-3 .shiki {
+ overflow-x: scroll;
+ background: none!important;
}
.emotion-4 {
- width: 100%;
- }
-
- .emotion-5 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
@@ -149,11 +92,11 @@
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
- .emotion-6 {
+ .emotion-5 {
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
position: absolute;
top: 0;
right: 0;
@@ -174,15 +117,15 @@
font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
color: #aaaaaa;
border-radius: 6;
}
- .emotion-7 {
+ .emotion-6 {
color: #aaaaaa;
}
- .emotion-8 {
+ .emotion-7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
@@ -195,15 +138,15 @@
justify-content: center;
-webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
- .emotion-8:hover {
+ .emotion-7:hover {
color: rgba(0, 0, 0, 0.88)!important;
}
- .emotion-8:active {
+ .emotion-7:active {
scale: 0.8;
color: rgba(0, 0, 0, 0.88);
}
<div>
@@ -214,41 +157,25 @@
class="emotion-1"
/>
<div
class="ant-editor-snippet-highlighter emotion-2"
>
- <pre
- class="emotion-3"
+ <div
+ class="ant-editor-highlight-shiki emotion-3"
>
- <table
- border="0"
- cellpadding="0"
- cellspacing="0"
- >
- <tbody>
- <tr>
- <td
- class="ant-editor-highlight-content emotion-4"
- >
- $ pnpm install
- <span
- class="hljs-meta"
- >
- @Ant
- </span>
- -design/pro-chat
- </td>
- </tr>
- </tbody>
- </table>
- </pre>
+ <pre>
+ <code>
+ $ pnpm install @ant-design/pro-chat
+ </code>
+ </pre>
+ </div>
<div
- class="layoutkit-center emotion-5 emotion-6"
+ class="layoutkit-center emotion-4 emotion-5"
>
<span
aria-label="loading-3-quarters"
- class="anticon anticon-loading-3-quarters anticon-spin emotion-7"
+ class="anticon anticon-load
|
|
tests/demo.test.tsx > <Snippet /> > renders index.tsx correctly:
tests/demo.test.tsx#L44
Error: Snapshot `<Snippet /> > renders index.tsx correctly 1` mismatched
- Expected
+ Received
@@ -52,73 +52,16 @@
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
- .emotion-2 {
- display: block;
- overflow-x: auto;
- color: #333333;
- background-color: #666666;
- }
-
- .emotion-2 .hljs-comment,
- .emotion-2 .hljs-quote {
- color: #aaaaaa;
- }
-
- .emotion-2 .hljs-variable,
- .emotion-2 .hljs-attribute,
- .emotion-2 .hljs-template-variable,
- .emotion-2 .hljs-tag,
- .emotion-2 .hljs-name,
- .emotion-2 .hljs-selector-id,
- .emotion-2 .hljs-selector-class,
- .emotion-2 .hljs-regexp,
- .emotion-2 .hljs-title,
- .emotion-2 .hljs-deletion {
- color: #ec5e41;
- }
-
- .emotion-2 .hljs-builtin-name,
- .emotion-2 .hljs-literal,
- .emotion-2 .hljs-type,
- .emotion-2 .hljs-params,
- .emotion-2 .hljs-meta,
- .emotion-2 .hljs-link {
- color: #ff802b;
- }
-
- .emotion-2 .hljs-string,
- .emotion-2 .hljs-number,
- .emotion-2 .hljs-symbol,
- .emotion-2 .hljs-bullet,
- .emotion-2 .hljs-addition {
- color: #55b467;
- }
-
- .emotion-2 .hljs-keyword,
- .emotion-2 .hljs-doctag,
- .emotion-2 .hljs-built_in,
- .emotion-2 .hljs-selector-tag,
- .emotion-2 .hljs-section {
- color: #369eff;
- }
-
- .emotion-2 .hljs-emphasis {
- font-style: italic;
- }
-
- .emotion-2 .hljs-strong {
- font-weight: bold;
+ .emotion-2 .shiki {
+ overflow-x: scroll;
+ background: none!important;
}
.emotion-3 {
- width: 100%;
- }
-
- .emotion-4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
@@ -133,11 +76,11 @@
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
- .emotion-5 {
+ .emotion-4 {
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
position: absolute;
top: 0;
right: 0;
@@ -158,15 +101,15 @@
font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
color: #aaaaaa;
border-radius: 6;
}
- .emotion-6 {
+ .emotion-5 {
color: #aaaaaa;
}
- .emotion-7 {
+ .emotion-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
@@ -179,15 +122,15 @@
justify-content: center;
-webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
- .emotion-7:hover {
+ .emotion-6:hover {
color: rgba(0, 0, 0, 0.88)!important;
}
- .emotion-7:active {
+ .emotion-6:active {
scale: 0.8;
color: rgba(0, 0, 0, 0.88);
}
<div>
@@ -195,41 +138,25 @@
class="ant-editor-snippet-container emotion-0"
>
<div
class="ant-editor-snippet-highlighter emotion-1"
>
- <pre
- class="emotion-2"
+ <div
+ class="ant-editor-highlight-shiki emotion-2"
>
- <table
- border="0"
- cellpadding="0"
- cellspacing="0"
- >
- <tbody>
- <tr>
- <td
- class="ant-editor-highlight-content emotion-3"
- >
- $ pnpm install
- <span
- class="hljs-meta"
- >
- @Ant
- </span>
- -design/pro-chat
- </td>
- </tr>
- </tbody>
- </table>
- </pre>
+ <pre>
+ <code>
+ $ pnpm install @ant-design/pro-chat
+ </code>
+ </pre>
+ </div>
<div
- class="layoutkit-center emotion-4 emotion-5"
+ class="layoutkit-center emotion-3 emotion-4"
>
<span
aria-label="loading-3-quarters"
- class="anticon anticon-loading-3-quarters anticon-spin emotion-6"
+ class="
|
|
test
Process completed with exit code 1.
|
|
test
Node.js 16 actions are deprecated. Please update the following actions to use Node.js 20: actions/checkout@v3, pnpm/action-setup@v2, actions/setup-node@v3. For more information see: https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/.
|