spectacle-code-slide
使用 spectacle 展示代码的风格。
老兄，您刚更改了代码演示游戏 - @kenwheeler
安装
$ npm install --save spectacle $ npm install --save spectacle-code-slide
用法
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>
);
}
}
语法高亮
由 PrismJS 提供。有关文档，请参阅 http://prismjs.com/。