@shikijs/twoslash doesn't work

[TheOrdinaryWow]

Astro Info

Astro                    v4.4.15
Node                     v18.17.0
System                   macOS (arm64)
Package Manager          bun
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

Safari, Arc(Chrome)

Describe the Bug

Used the official Blog template, made minimal changes required to enable @shikijs/twoslash, nothing happened.

Modified config is followed:

import {defineConfig} from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';

import tailwind from "@astrojs/tailwind";
import {transformerTwoslash} from "@shikijs/twoslash";

export default defineConfig({
    site: 'https://example.com',
    markdown: {
        syntaxHighlight: 'shiki',
        shikiConfig: {
            theme: 'monokai',
            transformers: [
                transformerTwoslash(),
            ],
        }
    },
    integrations: [mdx(), sitemap(), tailwind()]
});

I have already checked Pull #4292 as well as Issue #4258, and have tried using remarkPlugins instead of Shiki's transformers, yet none works.

I wonder if it's me did something wrong, or it'd be nice if there's a solution.

What's the expected result?

Twoslash will show up, as in install documentation.

Link to Minimal Reproducible Example

https://codesandbox.io/p/devbox/sad-payne-l8gjl3

Participation

• [ ] I am willing to submit a pull request for this issue.

[bluwy]

I'd suggest updating to Astro 4.5 as we've updated to Shiki v1.0, which should have better compatibility with the transformers packages.

The documentation isn't really clear how to use it, but after digging the source code, you need to write something like this to "activate" it:

```ts twoslash
const hi = 'Hello'
const msg = `${hi}, world`
//    ^?

Primarily, the `twoslash` hint. And then, you need to import `import '@shikijs/twoslash/style-rich.css'` in the layout Astro file to style the twoslashes popup. I'd suggest opening a PR to Shiki to improve its docs: https://shiki.style/packages/twoslash

[kyrylolvov]

@TheOrdinaryWow Were you able to fix the issue?

[kyrylolvov]

@bluwy So for twoslash to work, an update to Astro 4.5, css import and writing ts twoslash is enough?

[bluwy]

Yes. You'll get the default styling provided by import '@shikijs/twoslash/style-rich.css' which you should see applied in the rendered code blocks.

[TheOrdinaryWow]

Yes. You'll get the default styling provided by import '@shikijs/twoslash/style-rich.css' which you should see applied in the rendered code blocks.

Update: As instructed, yes it works.

Also, by default there's no need to add twoslash tag to "activate" it, as shown in docs, it only needs to be activated when Explicit Trigger is enabled.

Yet, another issue occurred, which is that the Twoslash popup seems to be inside the <pre> block, as shown below.

I tried looking for any proper method to solve this problem, and have tried override some css stuffs, but none helps. The only relevant issue I've found is https://github.com/antfu/shikiji/issues/60, which still gave zero clue.

I wonder if this is an Astro side issue, or it's a Shiki side one.

It'd be great if you could please offer some suggestions. Thanks!

[bluwy]

Thanks for the info. About the overflow issue, I don't think it's either Astro or Shiki's issue. In a default setup, the pre element doesn't seem to have overflow: hidden set. However, in most pre styling it would have overflow-x: auto set so it looks nice and can be scroll horizontally.

In my experience, the only way around this is to not use overflow (e.g. line wrap instead), or use position: fixed on the twoslash popup. Fixed positioning is tricky because it involves JS to calculate the position, which is what the Shiki docs uses (Floating Vue).

Perhaps it makes sense to create your own floating renderer using https://github.com/floating-ui/floating-ui, and open source that.

[TheOrdinaryWow]

Thanks for the info. About the overflow issue, I don't think it's either Astro or Shiki's issue. In a default setup, the pre element doesn't seem to have overflow: hidden set. However, in most pre styling it would have overflow-x: auto set so it looks nice and can be scroll horizontally.

In my experience, the only way around this is to not use overflow (e.g. line wrap instead), or use position: fixed on the twoslash popup. Fixed positioning is tricky because it involves JS to calculate the position, which is what the Shiki docs uses (Floating Vue).

Perhaps it makes sense to create your own floating renderer using https://github.com/floating-ui/floating-ui, and open source that.

In my case, neither using overflow nor position: fixed works. I guess the only way is to create an own floating renderer.

Thanks for your suggestion!

[oxwazz]

@TheOrdinaryWow @bluwy, i have example commit for integration @shikijs/twoslash & fix popup not fully displayed

i use floating-ui for the implementation, the commit little bit messy but, easy to follow.

commit: integration twoslash

[TheOrdinaryWow]

@TheOrdinaryWow @bluwy, i have example commit for integration @shikijs/twoslash & fix popup not fully displayed

i use floating-ui for the implementation, the commit little bit messy but, easy to follow.

commit: integration twoslash

It seems that somehow your repo is private. Perhaps you could paste the code, or the whole implementation to a gist.

Thanks!

[shepherdjerred]

I fixed this with the following CSS:

.astro-code {
  overflow: visible !important;
}

See: https://sjer.red/blog/til/2024-07-01/