Lightweight uneditable source code preview [ft request]

[e111077]

Hi, we use stackblitz extensively in our Polymer documentation and it's great, but a pain point that we keep running into is the size of stackblitz.

Our workaround is to have a static preview of the source code which has a button to load stackblitz if you want to interact with the content (which lazily loads the stackblitz lib). See here.

This isn't the cleanest approach and requires an extra build step. The best approach would be to have a lightweight feature in stackblitz that functions like ctl that shows a static preview of the source code without any interactivity but gives the option to lazily load the interactive features.

[EricSimons]

@e111077 I think we could implement something that would solve this. One problem is that the Monaco editor itself is pretty large, so we might need to use a different editor that doesn't have to load in typescript lang svcs/etc by default.

Since this mode would be read only, we could potentially use something like prismjs. What are your thoughts?

Edit: In this read only mode, is it expected that the user could still preview the running code? Or only just view the code?

[e111077]

That makes a lot of sense. We've used prismjs in quite a few of our projects. It works very well and is nicely extendable by the user. We've used it to allow syntax highlighting on tagged template literals.

In our use case, we would only need a preview of the source code, not necessarily the actual running code. That feature I would expect affords a larger payload (the full, running stackblitz editor) 🤷‍♂️

[kamranayub]

We're also integrating Stackblitz into our docs, this would be a great feature. Actually, right now I was able to differentiate between static vs. live code; and for static code we use Shiki Twoslash to get static type annotations.

A feature like this, with type annotations, would be pretty wild. I think it would be nice at least in our case to show a preview but with a lighter-weight initial read-only mode, since we have a game engine (and seeing the code running is important).

I've evaluated a bunch of options for live playgrounds within a docs experience and Stackblitz is our top choice so far. Most solutions are not optimized for a docs experience.