Reveal.js

Reveal.js

Reveal.js es un HTML Framework para hacer presentaciones en tu p√°gina web.

Hay 3 formas de instalarlo:

Ejemplo de Reveal.js

El código base para utilizarlo es la siguiente:

<html>
<head>
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.min.css">
</head>

<body>
<div class="reveal">
<div class="slides">
	<section>Slide 1</section>
	<section>Slide 2</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script>
	Reveal.initialize({
		hash: true
	});
</script>
</body>
</html>

Tambi√©n podemos a√Īadirle plugins [ver instrucciones para plugins].

Ve un ejemplo de Reveal.js con plugins y CDN en el ejemplo siguiente, o otro ejemplo m√°s elaborado en codepen.

*Ten en cuenta que el c√≥digo no funcionar√° si en el script "Reveal.Initialize" intentamos iniciar alg√ļn plugin que no hemos cargado anteriormente. Tambi√©n que el reset.css y el monokai.css no est√°n en CDN.

<html>
<head>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/css/reveal.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/css/theme/black.min.css" />
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>

<body>
<div class="reveal">
<div class="slides">
	<section><h1>Slide 1</h1><p>Text here...</p></section>
	<section><h1>Slide 2</h1><p>Text here...</p></section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/highlight/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/lib/js/head.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/lib/js/classList.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/plugin/zoom-js/zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/notes/notes.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/math/math.min.js"></script>
<script>
	Reveal.initialize({
		hash: true,
		plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
	});
</script>
</body>
</html>