glorious demo
展示您的代码中的最简单方法。
安装
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提供商中加载它。
// Constructor receives a selector that indicates
// where to inject the demonstration in your page.
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]
*/
// Possible values are 'editor' or 'terminal'
const applicationType = 'terminal' ;
const openAppOptions = {
minHeight : '350px' ,
windowTitle : 'bash' ,
id : 'someId' , // Identifies an application, in case of multiple instances
inanimate : true , // Turns off application's window animation
promptString : '~/my-project $' , // For 'terminal' applications only
initialContent : 'Some text' , // For 'editor' applications only
onCompleteDelay : 1000 // Delay before executing the next method
}
demo . openApp ( applicationType , openAppOptions ) . end ( ) ; 写
在“开放编辑器”应用程序中写入一些代码。
/*
** @codeSample : String [required]
** @options : Object [optional]
*/
// Tabs and line breaks will be preserved
const codeSample = `
function sum(a, b) {
return a + b;
}
sum();
` ;
const writeOptions = {
id : 'someId' , // Identifies an application, in case of multiple instances
onCompleteDelay : 500 // Delay before executing the next method
}
demo . openApp ( 'editor' ) . write ( codeSample , writeOptions ) . end ( ) ; 命令
在开放终端应用程序中写入一些命令。
$'
const commandOptions = {
id: 'someId', // Identifies an application, in case of multiple instances
promptString, // Sets a custom string. Default: ~/demo $
onCompleteDelay: 500 // Delay before executing the next method
}
demo.openApp('terminal').command(command, commandOptions).end();">
/* ** @command : String [required] ** @options : Object [optional] */ const command = 'npm install @glorious/demo --save' ; // Redefines prompt string for this and following commands const promptString = '$' // Can optionally be an HTML string: const promptString = '$' const commandOptions = { id : 'someId' , // Identifies an application, in case of multiple instances promptString , // Sets a custom string. Default: ~/demo $ onCompleteDelay : 500 // Delay before executing the next method } demo . openApp ( 'terminal' ) . command ( command , commandOptions ) . end ( ) ;
回应
在开放终端应用程序上显示了一些响应。
+ @glorious/demo successfully installed!
+ v0.6.0
`;
const respondOptions = {
id: 'someId', // Identifies an application, in case of multiple instances
onCompleteDelay: 500 // Delay before executing the next method
}
demo.openApp('terminal').respond(response, respondOptions).end();">/* ** @response : String [required] ** @options : Object [optional] */ // Line breaks will be preserved const response = ` + @glorious/demo successfully installed! + v0.1.0 ` ; // Can optionally be an HTML string: const response = `+ @glorious/demo successfully installed!+ v0.6.0` ; const respondOptions = { id : 'someId' , // Identifies an application, in case of multiple instances onCompleteDelay : 500 // Delay before executing the next method } demo . openApp ( 'terminal' ) . respond ( response , respondOptions ) . end ( ) ;
结尾
指示演示的结束。如果您想在演示结束时执行一些操作，该方法将返回承诺。
demo . openApp ( 'terminal' )
. command ( 'node demo' )
. respond ( 'Hello World!' )
. end ( )
. then ( ( ) => {
// Custom code to be performed at the end of the demostration goes here.
} ) ;重要的是：不要忘记在演示结束时调用它。否则，演示将不会播放。
贡献
安装节点。下载“针对大多数用户的推荐”版本。
克隆回购：
git clone git@github.com:glorious-codes/glorious-demo.git- 转到项目目录：
cd glorious-demo- 安装项目依赖性：
npm install- 建立项目：
npm run build测试
确保您添加的所有代码都涵盖了单位测试：
npm run test -- --coverage