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.08k stars 54 forks source link

How to use other languages beside JS / TS? #119

Closed johnnyreilly closed 3 years ago

johnnyreilly commented 3 years ago

Hey all!

I'm confused. According to the docs, Twoslash:

Supports all possible languages available on the VS Code extension marketplace. That’s over 200 languages. All you need is a .tmlanguage file for anything not shipped with Shiki.

However, if I try and use something like C# I see this error:

image

Received csharp but Twoslash only accepts: js,javascript,ts,typescript,tsx,jsx,json,jsn

In this case Shiki supports csharp: 

  ['csharp', 'https://github.com/dotnet/csharp-tmLanguage/blob/main/grammars/csharp.tmLanguage'],

https://github.com/shikijs/shiki/blob/a29e1991b2e24c8ebbf53112a14f80c52a338587/scripts/grammarSources.ts#L158

So I'm a little puzzled as to why this doesn't work? Am I doing something wrong?

You can try this out by using the steps in https://github.com/johnnyreilly/blog.johnnyreilly.com/pull/95 and going to http://localhost:3000/2021/07/01/c-sharp-9-azure-functions-in-process

orta commented 3 years ago

Yeah, you're handling it wrong - all code samples are ran through shiki, only TypeScript-y can have the twoslash processing though. So you can't do cs twoslash but cs will work fine.

johnnyreilly commented 3 years ago

Oh right - totally didn't realise that. I thought that shiki was only invoked when you added the twoslash suffix.

The docs say:

All code sample use Shiki, then you can opt-in to have Twoslash markup inside specific code blocks.

I wonder if it might be worth being explicit that Twoslash can be used with JavaScript, TypeScript and JSX/TSX? (i.e. not all code blocks)

I have an unrelated question alongside that.

The docs say:

Supports all possible languages available on the VS Code extension marketplace. That’s over 200 languages. All you need is a .tmlanguage file for anything not shipped with Shiki.

Is there an example somewhere of what that would look like? Things I'm thinking:

I've got a PR open to add Bicep support to Shiki, but if I wanted to just use Shiki with Bicep right now, I can't quite work out the way.

https://github.com/shikijs/shiki/pull/239

orta commented 3 years ago

Yeah, that needs to be documented at shiki level, ideally as a new section in here: https://github.com/shikijs/shiki/blob/main/docs/languages.md#adding-grammar