diff --git a/README.md b/README.md
index b0e9508..60e1901 100644
--- a/README.md
+++ b/README.md
@@ -151,21 +151,25 @@ Wrap any content in the fragment shortcode and it will appear incrementally. Gre
Like fragment but more terse - content is placed inline in a self-closing shortcode.
```markdown
-- {{< frag c="One" />}}
-- {{< frag c="Two" />}}
-- {{< frag c="Three" />}}
+- {{< frag c="One" >}}
+- {{< frag c="Two" >}}
+- {{< frag c="Three" >}}
```
#### slide shortcode
The slide shortcode lets you set custom HTML and Reveal.js attributes for each slide - things like id, class, transition, background and [much more](https://github.com/hakimel/reveal.js/#slide-attributes). The names are the same as Reveal.js but without the 'data-' prefix.
+Add the shortcode above the slide content, below the `---` separator. Do not place content inside of the shortcode.
+
```markdown
-{{% slide id="hello" background="#FFF" transition="zoom" transition-speed="fast" %}}
+---
+
+{{< slide id="hello" background="#FFF" transition="zoom" transition-speed="fast" >}}
# Hello, world!
-{{% /slide %}}
+---
```
Here's a list of documented slide attributes from the Reveal.js docs:
@@ -355,6 +359,10 @@ Here are a few useful Reveal.js-related tools:
Find many more on the Reveal.js wiki: [Plugins, tools and hardware](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware).
+## Changelog
+
+- 2018-08-03: The slide shortcode is now easier to use. An auto-closing version sits inside the slide instead of needing to surround its content and add a closing tag.
+
## Contributing
Contributions are very welcome. To run the example site in this repository locally, clone this repository and run:
diff --git a/exampleSite/content/home/shortcodes/markdown.md b/exampleSite/content/home/shortcodes/markdown.md
index 21167bd..0c49b4e 100644
--- a/exampleSite/content/home/shortcodes/markdown.md
+++ b/exampleSite/content/home/shortcodes/markdown.md
@@ -8,7 +8,7 @@ weight = 36
Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#markdown). To use that instead of Hugo, surround a slide with the markdown shortcode.
-```
+```markdown
{{* markdown */>}}
# Hello world!
@@ -27,7 +27,7 @@ Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#
Reveal.js markdown uses HTML comments to change slide properties, like background color.
-```
+```markdown
{{* markdown */>}}
# I'm a colorful slide
diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md
index 473199e..6a135c1 100644
--- a/exampleSite/content/home/shortcodes/slide.md
+++ b/exampleSite/content/home/shortcodes/slide.md
@@ -4,45 +4,66 @@ weight = 34
## Slide
-Customize individual slide attributes like id, class, background color and transition. Use the same keys as Reveal.js but omit the 'data-' prefix.
+Use this shortcode when you need to customize slide attributes like id, class, background color and transition.
---
-{{% slide id="custom-1" transition="zoom" transition-speed="fast" %}}
+## Slide
-## Custom slide 1
+Add the shortcode above the slide's content, below the `---`.
+```markdown
+---
+
+{{* slide class="hello" */>}}
+
+## Hello, world!
+
+---
```
-{{%/* slide id="custom-1" transition="zoom" transition-speed="fast" */%}}
-
-## Custom slide 1
-
-{{%/* /slide */%}}
-```
-
-{{% /slide %}}
---
-{{% slide id="custom-2" background="#FF4081" %}}
+{{< slide id="custom-1" transition="zoom" transition-speed="fast" >}}
+
+## Custom slide 1
+
+This slide has a fast zoom transition.
+
+```markdown
+{{* slide id="custom-1" transition="zoom" transition-speed="fast" */>}}
+
+## Custom slide 1
+```
+
+---
+
+{{< slide id="custom-2" background="#FF4081" >}}
## Custom slide 2
-```
-{{%/* slide id="custom-2" background="#FF4081" */%}}
+This slide has a different background color.
+
+```markdown
+{{* slide id="custom-2" background="#FF4081" */>}}
## Custom slide 2
-
-{{%/* /slide */%}}
```
-{{% /slide %}}
-
---
💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.
+
+
+```markdown
+---
+{{* slide id="custom-1" */>}}
+
+## Custom slide 1
+
+---
+```
-
```markdown
Go to [custom slide 1](#custom-1)
```
@@ -104,20 +125,16 @@ background = "#FF4081"
---
-{{% slide template="hotpink" %}}
+{{< slide template="hotpink" >}}
Apply the template using the **template** attribute of the slide shortcode:
```markdown
-{{%/* slide template="hotpink" */%}}
+{{* slide template="hotpink" */>}}
# I'm a hot pink slide!
-
-{{%/* /slide */%}}
```
-{{% /slide %}}
-
---
If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is:
@@ -132,6 +149,6 @@ If a template exists in multiple configurations, it's properties will be merged.
{{% section %}}
-{{% slide content="home.example" /%}}
+{{< slide content="home.reusable" >}}
{{% /section %}}
diff --git a/exampleSite/data/home.toml b/exampleSite/data/home.toml
index f242290..86b4d10 100644
--- a/exampleSite/data/home.toml
+++ b/exampleSite/data/home.toml
@@ -1,4 +1,4 @@
-example = '''
+reusable = '''
# Reusable slides
@@ -13,17 +13,17 @@ navigate down to learn more
---
-Add an `example` key to data/home.toml:
+Add a `example` key to data/home.toml:
-```
+```toml
example = "I'm a slide"
```
Set the `content` attribute to "home.example":
-```
-{{% slide content="home.example" /%}}
+```markdown
+{{< slide content="home.example" >}}
```
diff --git a/layouts/partials/reveal-hugo/slides.html b/layouts/partials/reveal-hugo/slides.html
index e578882..3ee4432 100644
--- a/layouts/partials/reveal-hugo/slides.html
+++ b/layouts/partials/reveal-hugo/slides.html
@@ -11,7 +11,8 @@
{{- range (split $content "