Skip to content

CodeSequence/spectacle-code-slide

This branch is 7 commits ahead of, 22 commits behind jamiebuilds/spectacle-code-slide:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jul 17, 2016
ad4f724 · Jul 17, 2016

History

39 Commits
Jul 17, 2016
Mar 26, 2016
Mar 26, 2016
Mar 26, 2016
Mar 26, 2016
Apr 8, 2016
Mar 26, 2016
Jul 17, 2016

Repository files navigation

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';

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] },
              { loc: [8, 10] },
              // ...
            ]}/>
          // ...
        </Deck>
      </Spectacle>
    );
  }
}

Syntax Highlighting

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

Packages

No packages published

Languages

  • JavaScript 100.0%