Caymer

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

Hay 3 formas de instalarlo:

1. Cargando la librería mediante CDN (la opción más fácil)
2. Descargando el archivo Github de Reveal.js y subiéndolo a nuestro FTP
3. Instalándolo en el servidor a través de NPM [instrucciones aquí]. Esta es la mejor opción porque algunas funcionalidades (como el Markdown externo) requieren que Reveal.js esté instalado en el servidor.

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>