Need help with spectacle-code-slide?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jamiebuilds
4.1K Stars 201 Forks MIT License 54 Commits 18 Opened issues

Description

:metal: Present code with style

Services available

!
?

Need anything else?

Contributors list

# 1,086
React
JavaScr...
Babel
babel-p...
35 commits
# 2,109
JavaScr...
CSS
React
reactjs
3 commits
# 45,334
Redux
Webpack
Angular
TypeScr...
1 commit
# 68,025
React
reasonm...
React N...
TypeScr...
1 commit
# 96,799
CSS
nextjs
Electro...
macOS
1 commit
# 124,924
cfml
Less
React
Visual ...
1 commit
# 27,551
Elixir
Erlang
elixir-...
phoenix...
1 commit
# 43,426
TypeScr...
React
selectb...
faceboo...
1 commit
# 202,864
React
HTML
React N...
react-n...
1 commit
# 58,706
oauth2
Express
HTML
2fa
1 commit
# 122,264
JavaScr...
phantom...
headles...
Chrome
1 commit
# 145,881
custom-...
TypeScr...
CSS
Shell
1 commit

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 ( // ... <codeslide transition="{[]}" lang="js" code='{require("raw-loader!../assets/code.example")}' ranges="{[" loc: title: through some beginning note: a note image: shialabeoufmagicgif ...> // ... ); } }

Syntax Highlighting

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.