Skip to content

Instantly share code, notes, and snippets.

@ramnathv
Last active March 23, 2021 17:15
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ramnathv/8421232 to your computer and use it in GitHub Desktop.
Save ramnathv/8421232 to your computer and use it in GitHub Desktop.
RevealJS with Bootstrap Columns
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RevealJS with Bootstrap using Slidify</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/css/reveal.min.css">
<link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/css/theme/default.css" id="theme">
<link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/css/tomorrow.css" id="theme">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]--> <link rel="stylesheet" href = "http://slidifylibraries2.googlecode.com/git/inst/libraries/widgets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href = "assets/css/ribbons.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section class='' data-state='' id='slide-1'>
<h2>Read-And-Delete</h2>
<ol>
<li>Edit YAML front matter</li>
<li>Write using R Markdown</li>
<li>Use an empty line followed by three dashes to separate slides!</li>
</ol>
</section>
<section class='' data-state='' id='slide-2'>
<h2>Slide 2</h2>
<div class='span6'>
<p>Left Column</p>
</div>
<div class='span6'>
<p>Right Column</p>
</div>
</section>
</div>
</div>
</body>
<script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/lib/js/head.min.js"></script>
<script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme || 'default',
transition: Reveal.getQueryHash().transition || 'default',
dependencies: [
// Cross-browser shim that fully implements classList -
// https://github.com/eligrey/classList.js/
{ src: 'http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/lib/js/classList.js', condition: function() { return !document.body.classList;}},
// Zoom in and out with Alt+click
{ src: 'http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
// Speaker notes
{ src: 'http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
// Remote control your reveal.js presentation using a touch device
//{ src: 'http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script> <script>
$(function (){
$("#example").popover();
$("[rel='tooltip']").tooltip();
});
</script>
<!-- LOAD HIGHLIGHTER JS FILES -->
<script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- DONE LOADING HIGHLIGHTER JS FILES -->
</html>
title framework widgets
RevealJS with Bootstrap using Slidify
revealjs
bootstrap

Read-And-Delete

  1. Edit YAML front matter
  2. Write using R Markdown
  3. Use an empty line followed by three dashes to separate slides!

--- &twocol

Slide 2

*** =left

Left Column

*** =right

Right Column

---
title : RevealJS with Bootstrap
framework : revealjs
widgets : [bootstrap] # {mathjax, quiz, bootstrap}
---
## Read-And-Delete
1. Edit YAML front matter
2. Write using R Markdown
3. Use an empty line followed by three dashes to separate slides!
--- &twocol
## Slide 2
*** =left
Left Column
*** =right
Right Column
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment