vocs
vocs copied to clipboard
wevm
Can't highlight `type` declarations
Hi there, I am having the following issue with [email protected].
I would like to highlight the keyword type in the following (simplified) example
type TEST = {
hello: "world"
}
Using [!code word:type] comments
Attempt 1
\```ts twoslash
// [!code word: type]
type TEST = {
hello: "world"
}
\```
HTML
<div data-rehype-pretty-code-figure="" class="vocs_Figure vocs_CodeBlock"><div class="vocs_Pre_wrapper"><pre class="twoslash lsp vocs_Pre" style="--shiki-light: #24292e; --shiki-dark: #F8F8F2; --shiki-light-bg: #fff; --shiki-dark-bg: #282A36;" tabindex="0" data-language="ts" data-theme="github-light dracula"><button class="vocs_CopyButton" type="button"><div aria-label="Copy" class="vocs_Icon" role="img" style="--vocs_Icon_size: 18px;"><svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 82 82"><title>Copy</title><path fill="currentColor" d="M12.451 63.281h38.38c8.3 0 12.45-4.053 12.45-12.256v-38.77C63.281 4.054 59.131 0 50.831 0H12.45C4.101 0 0 4.053 0 12.256v38.77C0 59.227 4.102 63.28 12.451 63.28Zm.098-7.031c-3.516 0-5.518-1.904-5.518-5.615V12.647c0-3.711 2.002-5.616 5.518-5.616h38.183c3.516 0 5.518 1.905 5.518 5.615v37.989c0 3.71-2.002 5.615-5.518 5.615H12.55Z"></path><path stroke="currentColor" stroke-width="6.75px" d="M69.385 78.266h-38.38c-3.679 0-5.782-.894-6.987-2.081-1.196-1.178-2.088-3.219-2.088-6.8v-38.77c0-3.581.892-5.622 2.088-6.8 1.205-1.187 3.308-2.08 6.988-2.08h38.379c3.65 0 5.758.89 6.973 2.084 1.203 1.182 2.103 3.225 2.103 6.796v38.77c0 3.57-.9 5.614-2.103 6.796-1.215 1.193-3.323 2.085-6.973 2.085Z"></path></svg></div></button><code data-language="ts" data-theme="github-light dracula" style="display: grid;" class="vocs_Code"><span data-line="" class="vocs_Span"><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">type</span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #6F42C1; --shiki-dark: #8BE9FD; --shiki-light-font-style: inherit; --shiki-dark-font-style: italic;" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">TEST</span></span></span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">=</span><span class="vocs_Span"> </span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span">{</span></span>
<span data-line="" class="vocs_Span"><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #E36209; --shiki-dark: #F8F8F2;" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">hello</span></span></span><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">:</span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #032F62; --shiki-dark: #E9F284;" class="vocs_Span">"</span><span style="--shiki-light: #032F62; --shiki-dark: #F1FA8C;" class="vocs_Span">world</span><span style="--shiki-light: #032F62; --shiki-dark: #E9F284;" class="vocs_Span">"</span></span>
<span data-line="" class="vocs_Span"><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span">}</span></span></code></pre></div></div>
Attempt 2
It works perfectly if I remove the twoslash meta string, but then I lose all of the type information.
\```ts
// [!code word: type]
type TEST = {
hello: "world"
}
\```
HTML
<div data-rehype-pretty-code-figure="" class="vocs_Figure vocs_CodeBlock"><div class="vocs_Pre_wrapper"><pre style="--shiki-light: #24292e; --shiki-dark: #F8F8F2; --shiki-light-bg: #fff; --shiki-dark-bg: #282A36;" tabindex="0" data-language="ts" data-theme="github-light dracula" class="vocs_Pre"><button class="vocs_CopyButton" type="button"><div aria-label="Copy" class="vocs_Icon" role="img" style="--vocs_Icon_size: 18px;"><svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 82 82"><title>Copy</title><path fill="currentColor" d="M12.451 63.281h38.38c8.3 0 12.45-4.053 12.45-12.256v-38.77C63.281 4.054 59.131 0 50.831 0H12.45C4.101 0 0 4.053 0 12.256v38.77C0 59.227 4.102 63.28 12.451 63.28Zm.098-7.031c-3.516 0-5.518-1.904-5.518-5.615V12.647c0-3.711 2.002-5.616 5.518-5.616h38.183c3.516 0 5.518 1.905 5.518 5.615v37.989c0 3.71-2.002 5.615-5.518 5.615H12.55Z"></path><path stroke="currentColor" stroke-width="6.75px" d="M69.385 78.266h-38.38c-3.679 0-5.782-.894-6.987-2.081-1.196-1.178-2.088-3.219-2.088-6.8v-38.77c0-3.581.892-5.622 2.088-6.8 1.205-1.187 3.308-2.08 6.988-2.08h38.379c3.65 0 5.758.89 6.973 2.084 1.203 1.182 2.103 3.225 2.103 6.796v38.77c0 3.57-.9 5.614-2.103 6.796-1.215 1.193-3.323 2.085-6.973 2.085Z"></path></svg></div></button><code data-language="ts" data-theme="github-light dracula" style="display: grid;" class="vocs_Code"><span data-line="" class="vocs_Span"><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="highlighted-word vocs_Span">type</span><span style="--shiki-light: #6F42C1; --shiki-dark: #8BE9FD; --shiki-light-font-style: inherit; --shiki-dark-font-style: italic;" class="vocs_Span"> TEST</span><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span"> =</span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> {</span></span>
<span data-line="" class="vocs_Span"><span style="--shiki-light: #E36209; --shiki-dark: #F8F8F2;" class="vocs_Span"> hello</span><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">:</span><span style="--shiki-light: #032F62; --shiki-dark: #E9F284;" class="vocs_Span"> "</span><span style="--shiki-light: #032F62; --shiki-dark: #F1FA8C;" class="vocs_Span">world</span><span style="--shiki-light: #032F62; --shiki-dark: #E9F284;" class="vocs_Span">"</span></span>
<span data-line="" class="vocs_Span"><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span">}</span></span></code></pre></div></div>
Using "type" meta string
Attempt 1
This locks up the vite dev server, and running vocs build just hangs indefinitely:
[building] [email protected]
⠼ building bundles...
\```ts twoslash "type"
type TEST = {
hello: "world"
}
\```
Attempt 2
Interestingly, it works perfectly fine when swapping type for interface
\```ts twoslash "interface"
interface TEST2 {
hello: "world"
}
\```
HTML
<div data-rehype-pretty-code-figure="" class="vocs_Figure vocs_CodeBlock"><div class="vocs_Pre_wrapper"><pre class="twoslash lsp vocs_Pre" style="--shiki-light: #24292e; --shiki-dark: #F8F8F2; --shiki-light-bg: #fff; --shiki-dark-bg: #282A36;" tabindex="0" data-language="ts" data-theme="github-light dracula"><button class="vocs_CopyButton" type="button"><div aria-label="Copy" class="vocs_Icon" role="img" style="--vocs_Icon_size: 18px;"><svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 82 82"><title>Copy</title><path fill="currentColor" d="M12.451 63.281h38.38c8.3 0 12.45-4.053 12.45-12.256v-38.77C63.281 4.054 59.131 0 50.831 0H12.45C4.101 0 0 4.053 0 12.256v38.77C0 59.227 4.102 63.28 12.451 63.28Zm.098-7.031c-3.516 0-5.518-1.904-5.518-5.615V12.647c0-3.711 2.002-5.616 5.518-5.616h38.183c3.516 0 5.518 1.905 5.518 5.615v37.989c0 3.71-2.002 5.615-5.518 5.615H12.55Z"></path><path stroke="currentColor" stroke-width="6.75px" d="M69.385 78.266h-38.38c-3.679 0-5.782-.894-6.987-2.081-1.196-1.178-2.088-3.219-2.088-6.8v-38.77c0-3.581.892-5.622 2.088-6.8 1.205-1.187 3.308-2.08 6.988-2.08h38.379c3.65 0 5.758.89 6.973 2.084 1.203 1.182 2.103 3.225 2.103 6.796v38.77c0 3.57-.9 5.614-2.103 6.796-1.215 1.193-3.323 2.085-6.973 2.085Z"></path></svg></div></button><code data-language="ts" data-theme="github-light dracula" style="display: grid;" class="vocs_Code"><span data-line="" class="vocs_Span"><mark data-highlighted-chars=""><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">interface</span></mark><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #6F42C1; --shiki-dark: #8BE9FD; --shiki-light-font-style: inherit; --shiki-dark-font-style: italic;" class="vocs_Span">TEST</span><span class="vocs_Span"> </span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span">{</span></span>
<span data-line="" class="vocs_Span"><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #E36209; --shiki-dark: #F8F8F2;" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">hello</span></span></span><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">:</span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #032F62; --shiki-dark: #E9F284;" class="vocs_Span">"</span><span style="--shiki-light: #032F62; --shiki-dark: #F1FA8C;" class="vocs_Span">world</span><span style="--shiki-light: #032F62; --shiki-dark: #E9F284;" class="vocs_Span">"</span></span>
<span data-line="" class="vocs_Span"><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span">}</span></span></code></pre></div></div>
Using twoslash highlighting
This is not ideal for me, as I am trying to import re-usable snippets and highlight them in the code block where they are imported. Both attempts also have poor formatting.
Attempt 1
\```ts twoslash
type TEST = {
//^^
hello: "world"
}
\```
HTML
<div data-rehype-pretty-code-figure="" class="vocs_Figure vocs_CodeBlock"><div class="vocs_Pre_wrapper"><pre class="twoslash lsp vocs_Pre" style="--shiki-light: #24292e; --shiki-dark: #F8F8F2; --shiki-light-bg: #fff; --shiki-dark-bg: #282A36;" tabindex="0" data-language="ts" data-theme="github-light dracula"><button class="vocs_CopyButton" type="button"><div aria-label="Copy" class="vocs_Icon" role="img" style="--vocs_Icon_size: 18px;"><svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 82 82"><title>Copy</title><path fill="currentColor" d="M12.451 63.281h38.38c8.3 0 12.45-4.053 12.45-12.256v-38.77C63.281 4.054 59.131 0 50.831 0H12.45C4.101 0 0 4.053 0 12.256v38.77C0 59.227 4.102 63.28 12.451 63.28Zm.098-7.031c-3.516 0-5.518-1.904-5.518-5.615V12.647c0-3.711 2.002-5.616 5.518-5.616h38.183c3.516 0 5.518 1.905 5.518 5.615v37.989c0 3.71-2.002 5.615-5.518 5.615H12.55Z"></path><path stroke="currentColor" stroke-width="6.75px" d="M69.385 78.266h-38.38c-3.679 0-5.782-.894-6.987-2.081-1.196-1.178-2.088-3.219-2.088-6.8v-38.77c0-3.581.892-5.622 2.088-6.8 1.205-1.187 3.308-2.08 6.988-2.08h38.379c3.65 0 5.758.89 6.973 2.084 1.203 1.182 2.103 3.225 2.103 6.796v38.77c0 3.57-.9 5.614-2.103 6.796-1.215 1.193-3.323 2.085-6.973 2.085Z"></path></svg></div></button><code data-language="ts" data-theme="github-light dracula" style="display: grid;" class="vocs_Code"><span data-line="" class="vocs_Span"><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">ty</span><span class="twoslash-highlighted vocs_Span"><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">pe</span></span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #6F42C1; --shiki-dark: #8BE9FD; --shiki-light-font-style: inherit; --shiki-dark-font-style: italic;" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">TEST</span></span></span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">=</span><span class="vocs_Span"> </span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span">{</span></span>
<span data-line="" class="vocs_Span"><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #E36209; --shiki-dark: #F8F8F2;" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">hello</span></span></span><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">:</span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #032F62; --shiki-dark: #E9F284;" class="vocs_Span">"</span><span style="--shiki-light: #032F62; --shiki-dark: #F1FA8C;" class="vocs_Span">world</span><span style="--shiki-light: #032F62; --shiki-dark: #E9F284;" class="vocs_Span">"</span></span>
<span data-line="" class="vocs_Span"><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span">}</span></span></code></pre></div></div>
Attempt 2
type TEST = {
//^^^^
hello: "world"
}
HTML
<div data-rehype-pretty-code-figure="" class="vocs_Figure vocs_CodeBlock"><div class="vocs_Pre_wrapper"><pre class="twoslash lsp vocs_Pre" style="--shiki-light: #24292e; --shiki-dark: #F8F8F2; --shiki-light-bg: #fff; --shiki-dark-bg: #282A36;" tabindex="0" data-language="ts" data-theme="github-light dracula"><button class="vocs_CopyButton" type="button"><div aria-label="Copy" class="vocs_Icon" role="img" style="--vocs_Icon_size: 18px;"><svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 82 82"><title>Copy</title><path fill="currentColor" d="M12.451 63.281h38.38c8.3 0 12.45-4.053 12.45-12.256v-38.77C63.281 4.054 59.131 0 50.831 0H12.45C4.101 0 0 4.053 0 12.256v38.77C0 59.227 4.102 63.28 12.451 63.28Zm.098-7.031c-3.516 0-5.518-1.904-5.518-5.615V12.647c0-3.711 2.002-5.616 5.518-5.616h38.183c3.516 0 5.518 1.905 5.518 5.615v37.989c0 3.71-2.002 5.615-5.518 5.615H12.55Z"></path><path stroke="currentColor" stroke-width="6.75px" d="M69.385 78.266h-38.38c-3.679 0-5.782-.894-6.987-2.081-1.196-1.178-2.088-3.219-2.088-6.8v-38.77c0-3.581.892-5.622 2.088-6.8 1.205-1.187 3.308-2.08 6.988-2.08h38.379c3.65 0 5.758.89 6.973 2.084 1.203 1.182 2.103 3.225 2.103 6.796v38.77c0 3.57-.9 5.614-2.103 6.796-1.215 1.193-3.323 2.085-6.973 2.085Z"></path></svg></div></button><code data-language="ts" data-theme="github-light dracula" style="display: grid;" class="vocs_Code"><span data-line="" class="vocs_Span"><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span class="twoslash-highlighted vocs_Span"><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">type</span></span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #6F42C1; --shiki-dark: #8BE9FD; --shiki-light-font-style: inherit; --shiki-dark-font-style: italic;" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">TEST</span></span></span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">=</span><span class="vocs_Span"> </span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span">{</span></span>
<span data-line="" class="vocs_Span"><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #E36209; --shiki-dark: #F8F8F2;" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">hello</span></span></span><span style="--shiki-light: #D73A49; --shiki-dark: #FF79C6;" class="vocs_Span">:</span><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span"> </span><span style="--shiki-light: #032F62; --shiki-dark: #E9F284;" class="vocs_Span">"</span><span style="--shiki-light: #032F62; --shiki-dark: #F1FA8C;" class="vocs_Span">world</span><span style="--shiki-light: #032F62; --shiki-dark: #E9F284;" class="vocs_Span">"</span></span>
<span data-line="" class="vocs_Span"><span style="--shiki-light: #24292E; --shiki-dark: #F8F8F2;" class="vocs_Span">}</span></span></code></pre></div></div>
I'm still experiencing some issues after updating to [email protected].
Per the release notes, I'm only attempting to use the supported // [!code word:type] comments now.
Using twoslash
This appears to be highlighting the wrong words in the generated HTML.
Code
\```ts twoslash
// [!code word:type]
type TEST = {
hello: "world"
}
\```
Output
HTML
See More
<div class="vocs_CodeBlock"><div class="vocs_Pre_wrapper"><pre style="background-color:#fff;--shiki-dark-bg:#22272e;color:#24292e;--shiki-dark:#adbac7" tabindex="0" class="shiki shiki-themes github-light github-dark-dimmed twoslash lsp vocs_Pre"><code class="vocs_Code"><span class="line vocs_Span"><span style="color:#D73A49;--shiki-dark:#F47067" class="vocs_Span">type</span><span style="color:#6F42C1;--shiki-dark:#F69D50" class="highlighted-word vocs_Span"> </span><span style="color:#6F42C1;--shiki-dark:#F69D50" class="highlighted-word vocs_Span"></span><span style="color:#D73A49;--shiki-dark:#F47067" class="highlighted-word vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target"> =</span></span></span><span style="color:#24292E;--shiki-dark:#ADBAC7" class="highlighted-word vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target"> </span></span></span><span style="color:#24292E;--shiki-dark:#ADBAC7" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">{</span></span></span></span>
<span class="line vocs_Span"><span style="color:#E36209;--shiki-dark:#F69D50" class="vocs_Span"> </span><span style="color:#E36209;--shiki-dark:#F69D50" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">hello</span></span></span><span style="color:#D73A49;--shiki-dark:#F47067" class="vocs_Span">:</span><span style="color:#032F62;--shiki-dark:#96D0FF" class="vocs_Span"> "<!-- -->world<!-- -->"</span></span>
<span class="line vocs_Span"><span style="color:#24292E;--shiki-dark:#ADBAC7" class="vocs_Span">}</span></span></code></pre></div></div>
Removing twoslash
Removing twoslash seems to highlight just fine, but obviously does not contain any typescript information about the code.
Code
\```ts
// [!code word:type]
type TEST = {
hello: "world"
}
\```
Output
HTML
See More
<div class="vocs_CodeBlock"><div class="vocs_Pre_wrapper"><pre style="background-color:#fff;--shiki-dark-bg:#22272e;color:#24292e;--shiki-dark:#adbac7" tabindex="0" class="shiki shiki-themes github-light github-dark-dimmed vocs_Pre"><code class="vocs_Code"><span class="line vocs_Span"><span style="color:#D73A49;--shiki-dark:#F47067" class="highlighted-word vocs_Span">type</span><span style="color:#6F42C1;--shiki-dark:#F69D50" class="vocs_Span"> TEST</span><span style="color:#D73A49;--shiki-dark:#F47067" class="vocs_Span"> =</span><span style="color:#24292E;--shiki-dark:#ADBAC7" class="vocs_Span"> {</span></span>
<span class="line vocs_Span"><span style="color:#E36209;--shiki-dark:#F69D50" class="vocs_Span"> hello</span><span style="color:#D73A49;--shiki-dark:#F47067" class="vocs_Span">:</span><span style="color:#032F62;--shiki-dark:#96D0FF" class="vocs_Span"> "world"</span></span>
<span class="line vocs_Span"><span style="color:#24292E;--shiki-dark:#ADBAC7" class="vocs_Span">}</span></span></code></pre></div></div>
Using twoslash for Other Words
When I use the twoslash mode, but attempt to highlight something other than type, I end up with no highlight at all. None of the words have the highlighted-word class on them.
This is fixed by removing twoslash, but then I have no type information.
Code
\```ts twoslash
// [!code word:TEST]
type TEST = {
hello: "world"
}
\```
Output
HTML
See More
<div class="vocs_CodeBlock"><div class="vocs_Pre_wrapper"><pre style="background-color:#fff;--shiki-dark-bg:#22272e;color:#24292e;--shiki-dark:#adbac7" tabindex="0" class="shiki shiki-themes github-light github-dark-dimmed twoslash lsp vocs_Pre"><code class="vocs_Code"><span class="line vocs_Span"><span style="color:#D73A49;--shiki-dark:#F47067" class="vocs_Span">type</span><span style="color:#6F42C1;--shiki-dark:#F69D50" class="vocs_Span"> </span><span style="color:#6F42C1;--shiki-dark:#F69D50" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">TEST</span></span></span><span style="color:#D73A49;--shiki-dark:#F47067" class="vocs_Span"> =</span><span style="color:#24292E;--shiki-dark:#ADBAC7" class="vocs_Span"> {</span></span>
<span class="line vocs_Span"><span style="color:#E36209;--shiki-dark:#F69D50" class="vocs_Span"> </span><span style="color:#E36209;--shiki-dark:#F69D50" class="vocs_Span"><span class="twoslash-hover vocs_Span"><span class="twoslash-target">hello</span></span></span><span style="color:#D73A49;--shiki-dark:#F47067" class="vocs_Span">:</span><span style="color:#032F62;--shiki-dark:#96D0FF" class="vocs_Span"> "<!-- -->world<!-- -->"</span></span>
<span class="line vocs_Span"><span style="color:#24292E;--shiki-dark:#ADBAC7" class="vocs_Span">}</span></span></code></pre></div></div>
<span class="line vocs_Span"><span style="color:#E36209;--shiki-dark:#F69D50" class="vocs_Span"> hello</span><span style="color:#D73A49;--shiki-dark:#F47067" class="vocs_Span">:</span><span style="color:#032F62;--shiki-dark:#96D0FF" class="vocs_Span"> "world"</span></span>
<span class="line vocs_Span"><span style="color:#24292E;--shiki-dark:#ADBAC7" class="vocs_Span">}</span></span></code></pre></div></div>
Hey! I can take a look into this soon. I have a feeling this an issue related to shiki though.
