search

shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.06k stars 51 forks source link

11ty's integration is not working. #87

Closed pouyakary closed 3 years ago

pouyakary commented 3 years ago

Hey there ! I wanted to build something with twoslash and it seems that I have the setup right:

Screen Shot 1400-05-03 at 22 33 32

And a simple test case like this:

Screen Shot 1400-05-03 at 22 36 35

Actually turns into this; there is Shiki working but not the twoslash.

Screen Shot 1400-05-03 at 22 35 53

P.S. I don't know what to add more than what is mentioned in the guide so I don't know if it is my problem or the package is not working

orta commented 3 years ago

I think it might only be working in canary builds, as that's what I tested it against: https://github.com/shikijs/twoslash/blob/main/examples/eleventy/package.json#L6

orta commented 3 years ago

oh, hrm, interesting let me verify the twoslashiness!

pouyakary commented 3 years ago

Haha! man you are fast! thanks a lot, I'm looking forward to hearing from you :)

orta commented 3 years ago

Main branch looks good in our example, is it possible you've not included the CSS?, try update to eleventy canary. There's new code for the detection of ts twoslash which could be not working on older 11ty https://github.com/shikijs/twoslash/pull/57

pouyakary commented 3 years ago

Okay let me test!

pouyakary commented 3 years ago

So it worked but still the ts on top is visible and the docs are generated but not interactive. I'm guessing that it is left to the developer to implement, but are there any implementations? or as you mentioned, an includable CSS template?

Screen Shot 1400-05-03 at 22 56 21
pouyakary commented 3 years ago

P.S. As you can tell, I wanna load up the Pro Colors into it. How do you add a Shiki theme outside of what is supported?

orta commented 3 years ago

( added some docs on getting the theme, going to be off the computer for a while so won't be able to dig into the twoslash code fence not being picked up issue: https://github.com/shikijs/twoslash/commit/6987d158d548b38d1ac5c7927db8162e4788eb2a )

pouyakary commented 3 years ago

@orta all fixed and working :) thanks a lot for the help and the amazing tool 👍🏻

frencojobs commented 3 years ago

So it worked but still the ts on top is visible and the docs are generated but not interactive. I'm guessing that it is left to the developer to implement, but are there any implementations? or as you mentioned, an includable CSS template?

The README on https://www.npmjs.com/package/remark-shiki-twoslash contains CSS used on TypeScript website. https://github.com/shikijs/twoslash/blob/6987d158d548b38d1ac5c7927db8162e4788eb2a/packages/docusaurus-preset-shiki-twoslash/docusaurus-theme-shiki-twoslash/theme/CodeBlock/styles.css is Docusaurus ready theme with Infima. You can reference them to write yourself one or tweak them according to your preference.

pouyakary commented 3 years ago

@frencojobs Thanks a lot ♥️