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" -

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

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=

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="

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,

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,

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

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="

Process completed with exit code 1.