🤘 Present code with style
JavaScript
Permalink
Failed to load latest commit information.
src call ReactTransitionGroup hooks of Slide from CodeSlide (#28) Oct 21, 2016
.babelrc Updates & Fixes Aug 19, 2016
.gitignore Init commit Mar 26, 2016
.npmignore Init commit Mar 26, 2016
LICENSE Init commit Mar 26, 2016
README.md add image docs Aug 19, 2016
demo.gif Init commit Mar 26, 2016
package.json 0.3.1 Aug 25, 2016

README.md

spectacle-code-slide

Present code with style using spectacle.

Dude, you just changed the code presentation game@kenwheeler

Install

$ npm install --save spectacle
$ npm install --save spectacle-code-slide

Usage

import React from 'react';
import { Spectacle, Deck } from 'spectacle';
import CodeSlide from 'spectacle-code-slide';
import shiaLabeoufMagicGif from "./shiaLabeoufMagic.gif"
import preloader from "spectacle/lib/utils/preloader";

preloader({
  shiaLabeoufMagicGif
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={[]} transitionDuration={0} progress="bar">
          // ...
          <CodeSlide
            transition={[]}
            lang="js"
            code={require("raw!../assets/code.example")}
            ranges={[
              { loc: [0, 270], title: "Walking through some code" },
              { loc: [0, 1], title: "The Beginning" },
              { loc: [1, 2] },
              { loc: [1, 2], note: "Heres a note!" },
              { loc: [2, 3] },
              { loc: [4, 7], image: shiaLabeoufMagicGif },
              { loc: [8, 10] },
              // ...
            ]}/>
          // ...
        </Deck>
      </Spectacle>
    );
  }
}

Syntax Highlighting

Provided by PrismJS. See http://prismjs.com/ for docs.