Skip to content
A component for mdx-deck to live code in your slides. 🀯
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 0cfb3d5 Feb 13, 2019

README.md

mdx-deck-live-code 🀯 reinhold.is/live-coding-in-slides

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:

Prop Type Default Description
code string The initial code that is pre-filled in the editor and preview. See Importing code from external files on advanced usage.
title string Title 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.
errors boolean true Whether the error panel at the bottom should be shown or not on parse errors
providerProps object Any additional props to pass to the <LiveProvider /> component
editorProps object Any additional props to pass to the <LiveEditor /> component
previewProps object Any additional props to pass to the <LivePreview /> component
errorProps object Any 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

  • Editing the code currently doesn't sync between the presenter and observer instances. Therefore you need to edit the code in the observer window, if you want your audience to see it❗️❗️❗️
  • The carret often becomes invisible, if it is moved outside the non-scrolled area. Still investigating, help wanted.

πŸ™ 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

You can’t perform that action at this time.