🤘 Present code with style
JavaScript
Clone or download
Latest commit 978dffe Jan 9, 2018
Permalink
Failed to load latest commit information.
src Do not mutate style object in render Nov 11, 2017
.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 Update documentation for spectacle 1.2.5 using raw-loader instead of raw Feb 20, 2017
demo.gif Init commit Mar 26, 2016
package.json 0.5.2 Jan 9, 2018
yarn.lock package Jan 9, 2018

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-loader!../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.