Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't highlight type declarations #64

Open
Liam-Scott-Russell opened this issue Feb 2, 2024 · 2 comments
Open

Can't highlight type declarations #64

Liam-Scott-Russell opened this issue Feb 2, 2024 · 2 comments

Comments

@Liam-Scott-Russell
Copy link

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"
}
\```

image

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"
}
\```

image

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"
}
\```

image

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"
}
\```

image

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

image

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>
@Liam-Scott-Russell
Copy link
Author

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

image

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

image

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

image

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>

@jxom
Copy link
Member

jxom commented Feb 9, 2024

Hey! I can take a look into this soon. I have a feeling this an issue related to shiki though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jxom @Liam-Scott-Russell