HackMD
    • Create new note
    • Create a note from template
    • Options
    • Versions
    • Transfer ownership
    • Delete this note
    • Template
    • Save as template
    • Insert from template
    • Export
    • Dropbox
    • Google Drive
    • Gist
    • Import
    • Dropbox
    • Google Drive
    • Gist
    • Clipboard
    • Download
    • Markdown
    • HTML
    • Raw HTML
    • ODF (Beta)
    • PDF (Beta)
    • Sharing Link copied
    • /edit
    • View mode
      • Edit mode
      • View mode
      • Book mode
      • Slide mode
      Edit mode View mode Book mode Slide mode
    • Note Permission
    • Read
      Owners
      • Owners
      • Signed-in users
      • Everyone
      Owners Signed-in users Everyone
    • Write
      Owners
      • Owners
      • Signed-in users
      • Everyone
      Owners Signed-in users Everyone
    • More (Comment, Invitee)
    • Publishing

      After the note is published, everyone on the web can find and read this note.
      See all published notes on profile page.

    • More (Comment, Invitee)
    • Commenting Enable
      Disabled Forbidden Owners Signed-in users Everyone
    • Permission
      Owners
      • Forbidden
      • Owners
      • Signed-in users
      • Everyone
    • Invitee
    • No invitee
Menu Sharing Create Help
Create Create new note Create a note from template
Menu
Options
Versions Transfer ownership Delete this note
Export
Dropbox Google Drive Gist
Import
Dropbox Google Drive Gist Clipboard
Download
Markdown HTML Raw HTML ODF (Beta) PDF (Beta)
Back
Sharing
Sharing Link copied
/edit
View mode
  • Edit mode
  • View mode
  • Book mode
  • Slide mode
Edit mode View mode Book mode Slide mode
Note Permission
Read
Owners
  • Owners
  • Signed-in users
  • Everyone
Owners Signed-in users Everyone
Write
Owners
  • Owners
  • Signed-in users
  • Everyone
Owners Signed-in users Everyone
More (Comment, Invitee)
Publishing

After the note is published, everyone on the web can find and read this note.
See all published notes on profile page.

More (Comment, Invitee)
Commenting Enable
Disabled Forbidden Owners Signed-in users Everyone
Permission
Owners
  • Forbidden
  • Owners
  • Signed-in users
  • Everyone
Invitee
No invitee
   Published      
   owned this note    owned this note
   Linked with GitHub
  • Watch - Be notified of any changes
  • Never - Never be notified
--- slideOptions: transition: slide --- # Slide example ![](https://i.imgur.com/Ov8F3IV.png =450x) Choose <i class="fa fa-tv"></i> **Slide Mode** in the top right sharing <i class="fa fa-share-alt fa-18"></i> menu and hit "**Preview**" to see your slide. --- For feature details please visit: https://github.com/hakimel/reveal.js/ You can use `URL query` or `slideOptions` of the YAML metadata to customize your slides. --- ## First slide `---` Is the divider of slides ---- ### First branch of first the slide `----` Is the divider of branches Use the _Space_ key to navigate through all slides. ---- ### Second branch of first the slide Nested slides are useful for adding additional detail underneath a high-level horizontal slide. --- ## Point of View Press **ESC** to enter the slide overview. --- ## Touch Optimized Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. --- ## Fragments `<!-- .element: class="fragment" data-fragment-index="1" -->` Is the fragment syntax Hit the next arrow... ... to step through ... <span>... a<!-- .element: class="fragment" data-fragment-index="1" --></span> <span>fragmented<!-- .element: class="fragment" data-fragment-index="2" --></span> <span>slide.<!-- .element: class="fragment" data-fragment-index="3" --></span> Note: This slide has fragments which are also stepped through in the notes window. --- ## Fragment Styles There are different types of fragments, like: grow shrink fade-out fade-up (also down, left and right!) current-visible Highlight <span><!-- .element: class="fragment highlight-red" -->red</span> <span><!-- .element: class="fragment highlight-blue" -->blue</span> <span><!-- .element: class="fragment highlight-green"-->green</span> --- <!-- .slide: data-transition="zoom" --> ## Transition Styles Different background transitions are available via the transition option. This one's called "zoom". `<!-- .slide: data-transition="zoom" -->` Is the transition syntax You can use: none/fade/slide/convex/concave/zoom --- <!-- .slide: data-transition="fade-in convex-out" --> `<!-- .slide: data-transition="fade-in convex-out" -->` Also, you can set different in/out transition You can use: none/fade/slide/convex/concave/zoom postfix with `-in` or `-out` --- <!-- .slide: data-transition-speed="fast" --> `<!-- .slide: data-transition-speed="fast" -->` Custom the transition speed! You can use: default/fast/slow --- ## Themes reveal.js comes with a few themes built in: Black (default) - White - League - Sky - Beige - Simple Serif - Blood - Night - Moon - Solarized It can be set in YAML slideOptions --- <!-- .slide: data-background="#1A237E" --> `<!-- .slide: data-background="#1A237E" -->` Is the background syntax --- <!-- .slide: data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-color="#005" --> <div style="color: #fff;"> ## Image Backgrounds `<!-- .slide: data-background="image.png"-->` </div> ---- <!-- .slide: data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px" data-background-color="#005" --> <div style="color: #fff;"> ## Tiled Backgrounds `<!-- .slide: data-background="image.png" data-background-repeat="repeat" data-background-size="100px" -->` </div> ---- <!-- .slide: data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000" --> <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> ## Video Backgrounds `<!-- .slide: data-background-video="video.mp4,video.webm" -->` </div> ---- <!-- .slide: data-background="http://i.giphy.com/90F8aUepslB84.gif" --> ## ... and GIFs! --- ## Pretty Code ``` javascript function linkify( selector ) { if( supports3DTransforms ) { const nodes = document.querySelectorAll( selector ); for( const i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; if( !node.className ) { node.className += ' roll'; } } } } ``` Code syntax highlighting courtesy of [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/). --- ## Marvelous List - No order here - Or here - Or here - Or here --- ## Fantastic Ordered List 1. One is smaller than... 2. Two is smaller than... 3. Three! --- ## Tabular Tables | Item | Value | Quantity | | ---- | ----- | -------- | | Apples | $1 | 7 | | Lemonade | $2 | 18 | | Bread | $3 | 2 | --- ## Clever Quotes > “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” --- ## Intergalactic Interconnections You can link between slides internally, [like this](#/1/3). --- ## Speaker There's a [speaker view](https://github.com/hakimel/reveal.js#speaker-notes). It includes a timer, preview of the upcoming slide as well as your speaker notes. Press the _S_ key to try it out. Note: Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit `s` on your keyboard). --- ## Take a Moment Press `B` or `.` on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. --- ## Spotlight Enable with `slideOptions.spotlight.enabled: true` in YAML frontmatter ```yaml --- slideOptions: spotlight: enabled: true --- ``` ---- ### Demo ![spotlight](https://i.imgur.com/dXhHcCP.gif) --- ## Slides Timer Enable with `slideOptions.allottedMinutes = {? minutes}` in YAML frontmatter ```yaml --- slideOptions: allottedMinutes: 5 --- ``` ---- ### Demo ![Timer](https://i.imgur.com/l5Akz4B.gif) --- # The End

Import from clipboard

Editing is for members only

With current role, you can only comment.
Learn how

This team is disabled

Sorry, this team is disabled. You can't edit this note.

This note is locked

Sorry, only owner can edit this note.

Reach the limit

Sorry, you've reached the max length this note can be.
Please reduce the content or divide it to more notes, thank you!

Import from Gist

Import from Snippet

or

Export to Snippet

Are you sure?

Do you really want to delete this note?
All users will lost their connection.

Transfer ownership

    or

      Create a note from template

      Create a note from template

      Oops...
      This template is not available.
      All
      • All
      • Team
      No template found.

      Create a template

      Delete template

      Do you really want to delete this template?

      This page need refresh

      You have an incompatible client version.
      Refresh to update.
      New version available!
      See releases notes here
      Refresh to enjoy new features.
      Your user state has changed.
      Refresh to load new user state.

      Sign in

      Forgot password

      or

      Sign in via Facebook Sign in via GitHub Sign in via Google

      New to HackMD? Sign up

      Help

      Documents

      Features
      YAML Metadata
      Slide Example
      Book Example

      Cheatsheet

      Example
      Header # Header
      • Unordered List
      - Unordered List
      1. Ordered List
      1. Ordered List
      • Todo List
      - [ ] Todo List
      Blockquote
      > Blockquote
      Bold font **Bold font**
      Italics font *Italics font*
      Strikethrough ~~Strikethrough~~
      19th 19^th^
      H2O H~2~O
      Inserted text ++Inserted text++
      Marked text ==Marked text==
      Link [link text](https:// "title")
      Image ![image alt](https:// "title")
      Code `Code`
      var i = 0;
      ```javascript
      var i = 0;
      ```
      :smile: :smile:
      Externals {%youtube youtube_id %}
      LaTeX $L^aT_eX$

      This is a alert area.

      :::info
      This is a alert area.
      :::

      Versions

      Versions

      Version named by    

      More Less
      • Edit
      • Delete

      Note content is identical to the latest version.
      Compare with
        Choose a version
        No search result
        Version not found

      Feedback

      Submission failed, please try again

      Thanks for your support.

      On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

      Please give us some advice and help us improve HackMD.

       

      Thanks for your feedback

      Remove version name

      Do you want to remove this version name and description?