Make the slide shortcode easier to use

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 */>}}
 <!-- .slide: data-background="#FF4081" -->
 # I'm a colorful slide

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
+
+<small>This slide has a fast zoom transition.</small>
+
+```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" */%}}
+<small>This slide has a different background color.</small>
+
+```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.
+<br><br>
+
+```markdown
+---
+{{</* slide id="custom-1" */>}}
+
+## Custom slide 1
+
+---
+```
 
-<br>
 ```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 %}}