playground-plugin-codeblock-examples

Use markdown codeblocks to demo many code samples in the playground

Usage no npm install needed!

<script type="module">
  import playgroundPluginCodeblockExamples from 'https://cdn.skypack.dev/playground-plugin-codeblock-examples';
</script>

README

Markdown Codeblock Examples

Takes a markdown document and lets you click through all of the TypeScript samples as a sidebar. Perfect for talks where you have all the code ahead of time and want to talk through each bit one by one.

So, first you put in your markdown.

./screenshots/before.png

Then you click through the code samples from each codeblock

./screenshots/after.png

How it works

The parser will pick up any codeblock like this:

Some preamble:

```ts
type MyThing = {

}
```
  • Language - is important, any language other than ts or tsx will show when selected, but with TypeScript's error handling disabled
  • Whitespace - is unimportant in detection, so fenced codeblocks will turn up too
  • Keyboard-only - once you have selected a codeblock, when in the editor you can press cmd/ctrl + g to move to the next codeblock

Running this plugin

or

  • Open up the TypeScript Playground
  • Go the "Plugins" in the sidebar
  • Look for "Plugins from npm"
  • Add "playground-plugin-codeblocks-examples"
  • Reload the browser

Then it will show up as a tab in the sidebar.

Contributing

See CONTRIBUTING.md for the full details, however, TLDR:

git clone https://github.com/orta/playground-plugin-codeblock-examples.git
yarn install
yarn start

Then tick the box for starting plugin development inside the TypeScript Playground.