1. 3
  1. 1

    The website was hard for me to read and didn’t seem to clearly explain what this program(?) actually does/is, please can someone explain it clearer?

    1. 1

      If you scroll down further, there are some good input/output examples. You know how when you open your code files in VS Code, and you can hover over each symbol to see information about each token? For instance, it might show you inferred types for a variable or function signature.

      Shiki Twoslash takes in any JavaScript / TypeScript code snippet (e.g. from a Markdown code block in your blog post) and pre-computes all of this on-hover information for you and embeds it as plain HTML/CSS in the page using :hover selectors. It works even if the user’s browser has JavaScript disabled!

      This means you can publish a blog post / documentation for your library that shows code snippets that give more contextual information (e.g. type signatures) without extra client-side processing.

      1. 2

        Thanks, I appreciate the succinct explanation, that’s great.

    2. 1

      This is fantastic! It reminds me of the annotated source files provided on Hackage for many Haskell libraries. The color scheme is quite similar too, so it must not be a coincidence :)