The best way to get started with big is the big-presentation
module,
which helps create and serve presentations. Install it globally with npm
or
yarn
:
npm install -g big-presentation
yarn global add big-presentation
big-presentation
is the tool you use to create, manage and give big presentations.
When you install it with npm or yarn, you get these four utilities:
big-presentation-init
- Initializes presentations. Run it just like that to dump the necessary files in the current directory, or specify a directory name to create a new directory and put the files in that.
big-presentation-serve
- Serves up your presentation.
big-presentation-offline
- Creates an
index.offline.html
file with everything that can be included, included inline in the HTML, so you don't have to trust wifi
- Creates an
big-presentation-compose
- Writes from a file you've composed in Markdown
into html suitable for a big presentation. (Writes from
index.md
toindex.html
)
- Writes from a file you've composed in Markdown
into html suitable for a big presentation. (Writes from
- A
div
is a slide.- Divs can be nested without nested divs being treated as slides
- There are two built-in themes: light and dark. You set a theme by setting
the
class
of thebody
element. By default,big-presentation-init
chooseslight
. Change it todark
to make presentations dark and cool. div
elements can have special attributes that affect the presentation:data-time-to-next="5"
causes the slide to auto-advance after 5 seconds, or the number you specifydata-bodyclass="something"
adds a custom class to the body tag when the slide is displayeddata-background-image="url"
sets a background image for the slide
- Slides can contain speakers notes, which you put in
<notes>
elements, like<notes>Write your speakers notes here</notes>
. Speakers notes will appear in your web developer console when you're on the slide. They'll also appear in print mode. - Slides are fixed at the aspect ratio 1.6: they'll fit a 1.6x box inside of the current display size. You can customize this ratio by hacking Big, if you want to.
Big has three modes, which you can swap between by hitting t
, p
, and j
.
- talk: this is what you use to give a presentation.
- print: useful for print output, or as an overview: will typically provide two slides per printed page, and shows speakers notes along with slides
- jump: Shows many slides per page, useful for quickly finding a slide and 'jumping' to it.
Presentations written for compose
are written in Markdown, not HTML, and
slides are separated by ---
, which is usually the Markdown code for a
<hr />
horizontal rule element. For instance:
It's _big_, but a little more eazy
---
Put dashes between slides to separate them.
---
Supports lists
* Like
* This
* One
This text would be in the file index.md
, and when you run big-presentation-compose
,
each section separated by ---
gets wrapped in a <div>
element, the list
becomes HTML, and the rest of Markdown syntax
becomes HTML.
big-presentation-compose copies big.js
, big.css
, and other files that make
your presentation work into the specified directory, but it makes sure never
to overwrite them if they already exist.
So, if you've customized big.js or big.css but want to get a fresh copy by running
big-presentation-compose, you'll need to delete it first, and then big-presentation-compose
will add a new copy in there: it'll never overwrite your existing dependency files.
That said, it will overwrite the generated index.html
file, because that makes
it way easier to work on a presentation.