html5slidesでプレゼン

tondol/PresentationTemplate · GitHub

Googleのhtml5slidesを使ってスライドを作る機会があったので，テンプレート化してgithubにアップロードした。
CSSを少しカスタマイズして，数式を埋め込むためのjsを追加している。
このテンプレートを使うと，インラインで次のようにして数式を埋め込むことができる。

<article>
	<h3>
		Slide#2 Title
	</h3>
	<ul>
		<li>
			<strong>数式</strong>を挿入するサンプル.
			<ul>
				<li id="formula-1"></li>
				<li id="formula-2"></li>
			</ul>
		</li>
		<li>
			文章の途中にインラインで
			<span id="formula-3"></span>
			挿入することもできる.
		</li>
	</ul>
	<script>
		$("#formula-1").append(TexUtil.create(TexUtil.heredoc(function () {/*
f(t)=\frac{1}{2\pi}\int_{-\infty}^{\infty}F(\Omega)e^{j \Omega t}d\Omega
*/}), 48));
		$("#formula-2").append(TexUtil.create(TexUtil.heredoc(function () {/*
F(\Omega)=\int_{-\infty}^{\infty}f(t)e^{-j \Omega t}dt
*/}), 48));
		$("#formula-3").append(TexUtil.create(TexUtil.heredoc(function () {/*
e^{i\theta}=\cos\theta+i\sin\theta
*/}), 30));
	<script>
</article>

これで次のような結果が得られる。

jsでヒアドキュメントを実現する方法については末尾のリンクを参照のこと。

参考

• Javascriptでヒアドキュメント - Qiita
• html5slides - A Google HTML5 slide template - Google Project Hosting
• Google Chart APIで、Webページに数式を表示させる。 - 何でも屋さんの備忘録

追記（2013-07-09T23:42:00+09:00頃）

texutil.jsの仕様を変更し，サンプルも併せて書き換えた。