glorious-codes/glorious-demo

「 演示代码的最简单方法.(web) 」

中文 | english

---

校对 ✅

翻译的原文	与日期	最新更新	更多
commit	⏰ 2018-11-09		中文翻译

• 存储库维基百科

贡献

欢迎 👏 勘误/校对/更新贡献 😊 具体贡献请看

生活

If help, buy me coffee —— 营养跟不上了，给我来瓶营养快线吧! 💰

---

glorious 的演示

演示代码的最简单方法.

目录

• 安装
• 基本用法
  • API
    • openApp
    • write
    • command
    • respond
    • end
• 贡献
• 测试

安装

npm install @glorious/demo --save

基本用法

<link rel="stylesheet" href="node_modules/@glorious/demo/dist/gdemo.min.css" />
<script src="node_modules/@glorious/demo/dist/gdemo.min.js"></script>

注意:如果您不使用包管理器,请从第三方CDN 提供商加载.

// 构造函数,接收 selector 的 指示
// 也就是在您的页面中，注入演示的位置。
const demo = new GDemo('#container');

const code = `
function greet(){
  console.log("Hello World!");
}

greet();
`;

demo
  .openApp('editor', {minHeight: '350px', windowTitle: 'demo.js'})
  .write(code, {onCompleteDelay: 1500})
  .openApp('terminal', {minHeight: '350px', promptString: '$'})
  .command('node ./demo', {onCompleteDelay: 500})
  .respond('Hello World!')
  .command('')
  .end();

注意:查看这里知道如何使用 Prism 来高亮您的代码.

API

openApp

打开或最大化打开的应用程序.

/*
 ** @applicationType: String [required]
 ** @options: Object [optional]
 */

// 可能的值是'editor'或'terminal'
const applicationType = 'terminal';

const openAppOptions = {
  minHeight: '350px',
  windowTitle: 'bash',
  promptString: '~/my-project $', // 仅适用于“terminal”应用程序
  onCompleteDelay: 1000 // 执行下一个方法之前的延迟
};

demo.openApp(applicationType, openAppOptions).end();

write

在打开的编辑器应用程序中，写入一些代码.

/*
 ** @codeSample: String [required]
 ** @options: Object [optional]
 */

// 标签和换行符将被保留
const codeSample = `
function sum(a, b) {
  return a + b;
}

sum();
`;

const writeOptions = {
  onCompleteDelay: 500 // 执行下一个方法之前的延迟
};

demo
  .openApp('editor')
  .write(codeSample, writeOptions)
  .end();

command

在打开的终端应用程序中，写入一些命令.

/*
 ** @command: String [required]
 ** @options: Object [optional]
 */

const command = 'npm install @glorious/demo --save';

// 为此命令和以下命令重新定义提示字符串
const promptString = '$';

// 可以选择是HTML字符串：
const promptString = '<span class="my-custom-class">$</span>';

const commandOptions = {
  promptString,
  onCompleteDelay: 500 // 执行下一个方法之前的延迟
};

demo
  .openApp('terminal')
  .command(command, commandOptions)
  .end();

respond

在打开的终端应用程序上，显示一些响应.

/*
 ** @response: String [required]
 ** @options: Object [optional]
 */

// 换行符将被保留
const response = `
+ @glorious/demo successfully installed!
+ v0.1.0
`;

// 可以选择, HTML字符串：
const response = `
<div><span class="my-custom-class">+</span> @glorious/demo successfully installed!</div>
<div><span class="my-custom-class">+</span> v0.6.0</div>
`;

const respondOptions = {
  onCompleteDelay: 500 // 执行下一个方法之前的延迟
};

demo
  .openApp('terminal')
  .respond(response, respondOptions)
  .end();

end

表示演示结束。不要忘记在演示结束时，调用它。否则,将不会播放演示.

贡献

1. 安装node。下载"推荐给大多数用户"版本.

2. 克隆回购:

git clone [email protected]:glorious-codes/glorious-demo.git

3. 转到项目目录:

cd glorious-demo

4. 安装项目依赖项:

npm install

5. 建立项目:

npm run build

测试

确保您添加的所有代码，都包含在单元测试中:

npm run test -- --coverage