Home

Awesome

mdx-deck-live-code ๐Ÿคฏ reinhold.is/live-coding-in-slides

<!-- gif -->

A component for mdx-deck for live coding directly in your slides. ๐Ÿคฏ

Build Status Version Dependency Status

npm install --save-dev mdx-deck-live-code

Follow @DrReinhold for updates

โš ๏ธ This library is ONLY intended to work with your mdx-deck slides. It doesn't magically add live coding abilities to your PowerPoint or Keynote slides, even though that would be pretty slick.

๐ŸŽญ Check out a live demo here

The code for demo is located in the /example directory.

๐Ÿฃ Getting started

Import the LiveCode component at the top of your deck.mdx file (or in a slide if you're only using it once).

import { LiveCode } from 'mdx-deck-live-code';

Use the <LiveCode /> component as a top-level component in a slide

---
<LiveCode
  title="How to greet people"
  size="small"
  code="<p>Hello World!</p>"
/>
---

๐Ÿ“ Usage

The <LiveCode /> is intended to be used as its own slide. It supports the following props:

PropTypeDefaultDescription
codestringThe initial code that is pre-filled in the editor and preview. See Importing code from external files on advanced usage.
titlestringTitle of the slide, shown in the top. Is not shown if size is set to fullscreen
size'small' | 'medium' | 'large' | 'fullscreen''medium'The size of the live code component, relative to the viewport size.
errorsbooleantrueWhether the error panel at the bottom should be shown or not on parse errors
providerPropsobjectAny additional props to pass to the <LiveProvider /> component
editorPropsobjectAny additional props to pass to the <LiveEditor /> component
previewPropsobjectAny additional props to pass to the <LivePreview /> component
errorPropsobjectAny additional props to pass to the <LiveError /> component

Under the hood this <LiveCode /> uses react-live, So if you want to get super fancy, take a look at the react-live API.

See the example deck.mdx for examples on using the different features.

โคด Importing code from external files

Your deck.mdx file can become quite a mess if you intend to have large chunks of code in your code props. Luckily the raw-loader library is supported out-of-the-box, so you can declare the code in external files, instead of writing it as an inline string.

To do that, first install the raw-loader package.

npm install --save-dev raw-loader

Then, in the code prop, reference another file using the require('!raw-loader!PATH-TO-FILE')-syntax.

<LiveCode code={require('!raw-loader!./external-file.js')} />

โš ๏ธ Current issues

๐Ÿ™ Related / Credits

๐Ÿค Contributing

Ideas and feedback are ALWAYS welcome, just submit an issue. Pull Requests are also very welcome, but please always make PRs into the next branch

The library is built using TypeScript, bundled with Microbundle, formatted with Prettier, linted with TSLint and markdownlint, packaged with yarn, hosted on Netlify and developed with love โค๏ธ and sweat ๐Ÿ’ฆ.

  1. yarn dev starts the TypeScript building of the library.
  2. yarn example starts the demo in the example/ folder.
  3. I recommend that you use the example to test your changes, as that contains all the relevant use cases of the library. To do that, run yarn setup-dev, which takes care of installing and linking the necessary dependencies.
  4. Then run yarn start to start the development transpiler and the example in watch mode concurrently.
  5. Submit awesome PRs.

๐Ÿ“ License

Released under the Do No Harm License (draft)

By @DrReinhold