0

Present code with style

使用 spectacle 来展示代码的风格。（Present code with style using spectacle.）

官方網站
Github 資源庫
主要指標

Github星跟蹤圖

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/。

主要指標

概覽
名稱與所有者jamiebuilds/spectacle-code-slide
主編程語言JavaScript
編程語言JavaScript (語言數: 1)
平台Linux, Mac, Windows
許可證MIT License
所有者活动
創建於2016-03-27 06:26:57
推送於2018-11-17 00:42:17
最后一次提交2018-01-10 05:26:22
發布數16
最新版本名稱v0.5.2 (發布於 2018-01-10 05:26:22)
第一版名稱v0.1.0 (發布於 2016-03-27 06:31:28)
用户参与
星數4.2k
關注者數49
派生數164
提交數54
已啟用問題?
問題數0
打開的問題數0
拉請求數11
打開的拉請求數6
關閉的拉請求數9
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?

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.