Reveal.jsのプレゼンにシェルを埋め込むよ - Qiita

やりたいこと プレゼン画面内でシェルを操作し、プレゼン内のデモに反映さたらカッコいいと思うんだ。うん。たとえプレゼンの内容が薄くても、勉強会とかでちょっと興味を持ってもらえるかも？ 仕組み JavaScriptでスライドが作れるReveal.jsと、ローカルのシェルをブラウザから利用できるようになるtty.jsとを使い、プレゼン内に<iframe>でtty.jsの画面を埋め込むんだ。デモ画面も<iframe>を利用してプレゼン内に埋め込み、webpack-dev-serverなんかのオートリロード機能を利用して変更を反映するよ。 仕組みは簡単だね。でも、tty.jsの利用にはちょっとした小技がいるよ。 tty.js webpack-dev-server Reveal.js (上２つをiframeで埋め込む) tty.js インストール npmで簡単です。パッケージマネージャ万歳！