Glorious - Web上でコードのデモンストレーション

Glorious - Web上でコードのデモンストレーション:

プログラミングはできあがったものを一気に見せても理解するのが困難です。そのため細かく分けたり、動画を使ったりと様々な手段を講じる必要があります。ちょっとずつ説明することで全体としては難しいことをしていないと理解してもらえます。

そんなプログラミングコードのデモを表現するのに使えるのがGloriousです。

Gloriousの使い方

Gloriousのコード例です。

const code = `const message = "Hello world!"; 
console.log(message);`; 
 
const highlightedCode = Prism.highlight( 
  code, 
  Prism.languages.javascript, 
  'javascript' 
); 
 
gdemo 
  .openApp('editor'/{ minHeight: '400px'/windowTitle: 'demo.js' }) 
  .write(highlightedCode/{ onCompleteDelay: 2000 }) 
  .openApp('terminal'/{ minHeight: '400px'/promptString: '$' }) 
  .command('node ./demo') 
  .respond('Hello World!') 
  .command('') 
  .end(); 

実行すると、以下のようにコードが書かれながら実行されていきます。