Reveal.js
Example lead - highlighted near the title
Page content
Reveal.js presentations
[TOC]
Reveal.js and pandoc
Create a MD presentation. For instance:
---
title: Chromosome architecture by Hi-M
author: Marcelo Nollmann, CNRS, France.
date: June 21, 2017
output:
revealjs::revealjs_presentation:
fig_width: 7
fig_height: 6
theme: black
---
## What is DNA?
> <small>DNA is long , c.a. 1m</small>
> <small>DNA has to be fit into a tiny nucleus ~few micrometers in size</small>
> <small>Despite this, we have known that -at least in some cell cycle stages like mitosis- chromosomes are highly organized</small>
<img src="/home/marcnol/dropbox/Documents/Bureaucracy/mixNpick/signature.png" style="zoom:50%;" />
Then translate into reveal.js using pandoc as follows:
theme='white'
# -V theme=$theme
# beige
# black
# blood
# league
# moon
# night
# serif
# simple
# sky
# solarized
# white
transition='none'
# cube
# default
# fade
# slide
# convex
# concave
# zoom
# none
pandoc -t revealjs -s -o Chromosome_architecture_by_HiM_pandoc.html Chromosome_architecture_by_HiM.md -V revealjs-url=/home/marcnol/Repositories/reveal.js -V transition=$transition
Use HTML directly
After you make a deck with pandoc, you can directly edit using an HTML editor like Atom.
Note the use of fragments and the command to call images. This is how mine looks like now:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="author" content="Marcelo Nollmann, CNRS, France.">
<meta name="dcterms.date" content="2017-06-21">
<title>Chromosome architecture by Hi-M</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="/home/marcnol/Repositories/reveal.js/css/reveal.css">
<style type="text/css">
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
</style>
<link rel="stylesheet" href="/home/marcnol/Repositories/reveal.js/css/theme/black.css" id="theme">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '/home/marcnol/Repositories/reveal.js/css/print/pdf.css' : '/home/marcnol/Repositories/reveal.js/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="/home/marcnol/Repositories/reveal.js/lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="title-slide">
<h1 class="title">Chromosome architecture by Hi-M</h1>
<p class="author">Marcelo Nollmann, CNRS, France.</p>
<p class="date">June 21, 2017</p>
</section>
<section id="what-is-dna" class="slide level2">
<h2>What is DNA?</h2>
<p class="fragment"><small>DNA is long , c.a. 1m</small> </p>
<p class="fragment"><small>DNA has to be fit into a tiny nucleus ~few micrometers in size</small></p>
<p class="fragment"><small>Despite this, we have known that -at least in some cell cycle stages like mitosis- chromosomes are highly organized</small></p>
</section>
<section id="dna-is-organized-in-layers" class="slide level2">
<h2>DNA is organized in layers</h2>
<ul>
<small>
<li class="fragment">Flemming, 1885 first depicts mitotic chromosomes</li>
<li class="fragment">b-DNA structure unveiled by Crick et al in 1952</li>
<li class="fragment">nucleosome structure revelaed by x-ray crystallography in 1997</li>
<li class="fragment">up to chromosome territories, c.a. 2005</li>
</small>
</ul>
<p><img src="/home/marcnol/dropbox/Documents/Bureaucracy/mixNpick/signature.png" style="zoom:30%;" /></p>
</section>
<section id="chromosome-conformation-capture-hi-c" class="slide level2">
<h2>Chromosome conformation capture ~ Hi-C</h2>
<ul>
<li>How hi-C works?</li>
<li>TADs and their function</li>
</ul>
</section>
<section id="can-tads-be-visualized-in-single-cells" class="slide level2">
<h2>can TADs be visualized in single cells</h2>
</section>
<section id="acknowledgements" class="slide level2">
<h2>Acknowledgements</h2>
</section>
</div>
</div>
<script src="/home/marcnol/Repositories/reveal.js/lib/js/head.min.js"></script>
<script src="/home/marcnol/Repositories/reveal.js/js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
// Push each slide change to the browser history
history: true,
// Transition style
transition: 'none', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: '/home/marcnol/Repositories/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: '/home/marcnol/Repositories/reveal.js/plugin/zoom-js/zoom.js', async: true },
{ src: '/home/marcnol/Repositories/reveal.js/plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>
