From 7bebd8cf0793cedfc95f12e2cb4853a0e5be72bd Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Wed, 19 Jan 2022 11:31:39 +0100
Subject: [PATCH] fix(markdown): Move caption to children

---
 markdown/dev/guides/patterns/en.md                |  9 ++++-----
 markdown/dev/guides/patterns/parts/en.md          |  8 +++-----
 markdown/dev/guides/patterns/paths/en.md          |  8 +++-----
 markdown/dev/guides/patterns/pattern/en.md        |  8 +++-----
 markdown/dev/guides/patterns/points/en.md         |  8 +++-----
 markdown/dev/guides/patterns/snippets/en.md       | 15 ++++++---------
 markdown/dev/guides/patterns/store/en.md          |  8 +++-----
 .../guides/prerequisites/coordinate-system/en.md  |  4 +++-
 markdown/dev/howtos/code/adding-snippets/en.md    |  5 ++++-
 markdown/dev/howtos/code/adding-text/en.md        | 15 +++++++--------
 markdown/dev/howtos/code/drawing-circles/en.md    |  4 +++-
 markdown/dev/reference/api/macros/bartack/en.md   |  4 +++-
 .../dev/reference/api/macros/bartackalong/en.md   |  4 +++-
 .../api/macros/bartackfractionalong/en.md         |  4 +++-
 markdown/dev/reference/api/macros/cutonfold/en.md |  4 +++-
 markdown/dev/reference/api/macros/grainline/en.md |  4 +++-
 markdown/dev/reference/api/macros/hd/en.md        |  7 +++----
 markdown/dev/reference/api/macros/ld/en.md        |  7 +++----
 markdown/dev/reference/api/macros/miniscale/en.md |  4 +++-
 markdown/dev/reference/api/macros/mirror/en.md    |  4 +++-
 markdown/dev/reference/api/macros/pd/en.md        |  4 +++-
 markdown/dev/reference/api/macros/round/en.md     |  4 +++-
 markdown/dev/reference/api/macros/scalebox/en.md  |  4 +++-
 markdown/dev/reference/api/path/_curve/en.md      |  4 +++-
 markdown/dev/reference/api/path/attr/en.md        |  4 +++-
 markdown/dev/reference/api/path/clone/en.md       |  4 +++-
 markdown/dev/reference/api/path/close/en.md       |  4 +++-
 markdown/dev/reference/api/path/curve/en.md       |  4 +++-
 markdown/dev/reference/api/path/curve_/en.md      |  4 +++-
 markdown/dev/reference/api/path/divide/en.md      |  4 +++-
 markdown/dev/reference/api/path/edge/en.md        |  4 +++-
 markdown/dev/reference/api/path/end/en.md         |  4 +++-
 markdown/dev/reference/api/path/intersects/en.md  |  4 +++-
 markdown/dev/reference/api/path/intersectsx/en.md |  4 +++-
 markdown/dev/reference/api/path/intersectsy/en.md |  4 +++-
 markdown/dev/reference/api/path/join/en.md        |  4 +++-
 markdown/dev/reference/api/path/length/en.md      |  4 +++-
 markdown/dev/reference/api/path/line/en.md        |  4 +++-
 markdown/dev/reference/api/path/move/en.md        |  4 +++-
 markdown/dev/reference/api/path/offset/en.md      |  4 +++-
 markdown/dev/reference/api/path/reverse/en.md     |  4 +++-
 markdown/dev/reference/api/path/shiftalong/en.md  |  4 +++-
 .../reference/api/path/shiftfractionalong/en.md   |  7 +++----
 markdown/dev/reference/api/path/split/en.md       |  7 +++----
 markdown/dev/reference/api/path/start/en.md       |  7 +++----
 markdown/dev/reference/api/path/translate/en.md   |  7 +++----
 markdown/dev/reference/api/path/trim/en.md        |  7 +++----
 markdown/dev/reference/api/point/angle/en.md      |  7 +++----
 markdown/dev/reference/api/point/attr/en.md       |  7 +++----
 markdown/dev/reference/api/point/clone/en.md      |  7 +++----
 markdown/dev/reference/api/point/copy/en.md       |  7 +++----
 markdown/dev/reference/api/point/dist/en.md       |  7 +++----
 markdown/dev/reference/api/point/dx/en.md         |  7 +++----
 markdown/dev/reference/api/point/dy/en.md         |  7 +++----
 markdown/dev/reference/api/point/flipx/en.md      |  7 +++----
 markdown/dev/reference/api/point/flipy/en.md      |  7 +++----
 markdown/dev/reference/api/point/rotate/en.md     |  7 +++----
 markdown/dev/reference/api/point/shift/en.md      |  7 +++----
 .../api/point/shiftfractiontowards/en.md          |  7 +++----
 .../dev/reference/api/point/shiftoutwards/en.md   |  7 +++----
 .../dev/reference/api/point/shifttowards/en.md    |  7 +++----
 markdown/dev/reference/api/point/sitson/en.md     |  7 +++----
 .../dev/reference/api/point/sitsroughlyon/en.md   |  7 +++----
 markdown/dev/reference/api/point/translate/en.md  |  7 +++----
 markdown/dev/reference/api/snippet/attr/en.md     |  7 +++----
 markdown/dev/reference/api/snippet/clone/en.md    |  8 ++++----
 markdown/dev/reference/api/snippets/button/en.md  |  4 +++-
 .../reference/api/snippets/buttonhole-end/en.md   |  4 +++-
 .../reference/api/snippets/buttonhole-start/en.md |  5 ++++-
 .../dev/reference/api/snippets/buttonhole/en.md   |  4 +++-
 markdown/dev/reference/api/snippets/logo/en.md    |  4 +++-
 markdown/dev/reference/api/snippets/notch/en.md   |  4 +++-
 .../dev/reference/api/snippets/snap-socket/en.md  |  4 +++-
 .../dev/reference/api/snippets/snap-stud/en.md    |  4 +++-
 .../api/utils/beamintersectscircle/en.md          |  4 +++-
 .../dev/reference/api/utils/beamintersectsx/en.md |  4 +++-
 .../dev/reference/api/utils/beamintersectsy/en.md |  4 +++-
 .../dev/reference/api/utils/beamsintersect/en.md  |  4 +++-
 .../reference/api/utils/circlesintersect/en.md    |  4 +++-
 .../dev/reference/api/utils/curvesintersect/en.md |  4 +++-
 .../api/utils/lineintersectscircle/en.md          |  4 +++-
 .../reference/api/utils/lineintersectscurve/en.md |  4 +++-
 .../dev/reference/api/utils/linesintersect/en.md  |  4 +++-
 .../dev/reference/api/utils/pointonbeam/en.md     |  4 +++-
 .../dev/reference/api/utils/pointoncurve/en.md    |  4 +++-
 .../dev/reference/api/utils/pointonline/en.md     |  4 +++-
 .../pattern-design/avoiding-overlap/en.md         |  5 ++++-
 .../completing-the-neck-opening/en.md             |  4 +++-
 .../pattern-design/completing-your-pattern/en.md  |  5 ++++-
 .../pattern-design/creating-the-closure/en.md     |  4 +++-
 .../pattern-design/drawing-the-bib-outline/en.md  |  5 ++++-
 .../pattern-design/drawing-the-straps/en.md       |  5 ++++-
 .../tutorials/pattern-design/paperless-bib/en.md  |  4 +++-
 .../pattern-design/rounding-the-corners/en.md     |  4 +++-
 .../pattern-design/shaping-the-straps/en.md       |  4 +++-
 .../pattern-design/your-first-part/en.md          |  5 ++++-
 96 files changed, 304 insertions(+), 213 deletions(-)

diff --git a/markdown/dev/guides/patterns/en.md b/markdown/dev/guides/patterns/en.md
index 01a962b820e..1a40a5dfae8 100644
--- a/markdown/dev/guides/patterns/en.md
+++ b/markdown/dev/guides/patterns/en.md
@@ -11,10 +11,9 @@ pattern is generated by FreeSewing.
 This illustration is a good starting point to gain a better 
 understanding of the structure of a FreeSewing pattern:
 
-<Example 
-  part="docs_overview" 
-  caption="A schematic overview of FreeSewing"
-/>
+<Example part="docs_overview">
+A schematic overview of FreeSewing
+</Example>
 
 If we look at our image, it can be divided into three areas:
 
@@ -24,7 +23,7 @@ If we look at our image, it can be divided into three areas:
 
 Let's take a closer look at everything that is contained within our central **Pattern** box:
 
-<ReadMore list />
+<ReadMore />
 
 <Note>
 
diff --git a/markdown/dev/guides/patterns/parts/en.md b/markdown/dev/guides/patterns/parts/en.md
index fd99e22e27e..4f0950b5b1f 100644
--- a/markdown/dev/guides/patterns/parts/en.md
+++ b/markdown/dev/guides/patterns/parts/en.md
@@ -3,11 +3,9 @@ title: Parts
 order: 20
 ---
 
-<Example 
-  part="docs_overview" 
-  caption="Parts divide your pattern into re-usable components"
-  options={{focus: "Part"}}
-/>
+<Example part="docs_overview" options={{focus: "Part"}}>
+Parts divide your pattern into re-usable components
+</Example>
 
 Parts are a container for the points, paths, and snippets of (a part of) your pattern.
 They are also re-usable by other patterns, which makes them a powerful tool to build 
diff --git a/markdown/dev/guides/patterns/paths/en.md b/markdown/dev/guides/patterns/paths/en.md
index 8f0de5033bb..c971ce8906c 100644
--- a/markdown/dev/guides/patterns/paths/en.md
+++ b/markdown/dev/guides/patterns/paths/en.md
@@ -3,11 +3,9 @@ title: Paths
 order: 40
 ---
 
-<Example 
-  part="docs_overview" 
-  caption="Paths are the lines and curves of your pattern"
-  options={{focus: "Paths"}}
-/>
+<Example part="docs_overview" options={{focus: "Paths"}}>
+Paths are the lines and curves of your pattern
+</Example>
 
 Paths are the lines and curves that make up your pattern.
 
diff --git a/markdown/dev/guides/patterns/pattern/en.md b/markdown/dev/guides/patterns/pattern/en.md
index 65332c84f7c..3d42d39df26 100644
--- a/markdown/dev/guides/patterns/pattern/en.md
+++ b/markdown/dev/guides/patterns/pattern/en.md
@@ -3,11 +3,9 @@ title: Pattern
 order: 80
 ---
 
-<Example 
-  part="docs_overview" 
-  caption="The pattern you create will be a constructor for instances of your pattern"
-  options={{focus: "Pattern"}}
-/>
+<Example part="docs_overview" options={{focus: "Pattern"}}>
+The pattern you create will be a constructor for instances of your pattern
+</Example>
 
 Last but not least, we've arrived at the level of the pattern itself.
 The pattern is a container that holds all your parts, along with the configuration
diff --git a/markdown/dev/guides/patterns/points/en.md b/markdown/dev/guides/patterns/points/en.md
index e51704fa2a5..0ee46430bc7 100644
--- a/markdown/dev/guides/patterns/points/en.md
+++ b/markdown/dev/guides/patterns/points/en.md
@@ -3,11 +3,9 @@ title: Points
 order: 30
 ---
 
-<Example 
-  part="docs_overview" 
-  caption="Points store coordinates"
-  options={{focus: "Points"}}
-/>
+<Example part="docs_overview" options={{focus: "Points"}}>
+Points store coordinates
+</Example>
 
 Developing a pattern with FreeSewing is similar to doing it on paper.
 But instead of using a pencil and paper, you'll be writing code.
diff --git a/markdown/dev/guides/patterns/snippets/en.md b/markdown/dev/guides/patterns/snippets/en.md
index bdd482c57d6..a803c3a3478 100644
--- a/markdown/dev/guides/patterns/snippets/en.md
+++ b/markdown/dev/guides/patterns/snippets/en.md
@@ -3,11 +3,9 @@ title: Snippets
 order: 50
 ---
 
-<Example 
-  part="docs_overview" 
-  caption="Snippets are little embelishments that go on your pattern"
-  options={{focus: "Snippets"}}
-/>
+<Example part="docs_overview" options={{focus: "Snippets"}}>
+Snippets are little embelishments that go on your pattern
+</Example>
 
 Snippets are little embellishments you can use and re-use on your pattern.
 They are typically used for things like logos or buttons. 
@@ -20,8 +18,7 @@ Each snippet must have:
 Since our example image does not have any snippets in it, here's another example
 of a `button`, `buttonhole`, and `logo` snippet added to a FreeSewing pattern:
 
-<Example 
-  part="snippet" 
-  caption="An example of the use of snippets"
-/>
+<Example part="snippet">
+An example of the use of snippets
+</Example>
 
diff --git a/markdown/dev/guides/patterns/store/en.md b/markdown/dev/guides/patterns/store/en.md
index d8d399044c9..9d4420f2e9a 100644
--- a/markdown/dev/guides/patterns/store/en.md
+++ b/markdown/dev/guides/patterns/store/en.md
@@ -3,11 +3,9 @@ title: Store
 order: 60
 ---
 
-<Example 
-  part="docs_overview" 
-  caption="The store provides pattern-wide key/value storage"
-  options={{focus: "Store"}}
-/>
+<Example part="docs_overview" options={{focus: "Store"}}>
+The store provides pattern-wide key/value storage
+</Example>
 
 The store provides key-value storage that is shared across your pattern.
 
diff --git a/markdown/dev/guides/prerequisites/coordinate-system/en.md b/markdown/dev/guides/prerequisites/coordinate-system/en.md
index 2ce0489ec87..211cff34b29 100644
--- a/markdown/dev/guides/prerequisites/coordinate-system/en.md
+++ b/markdown/dev/guides/prerequisites/coordinate-system/en.md
@@ -7,7 +7,9 @@ The coordinate system in FreeSewing -- and in SVG -- follows the same rules as t
 You start at the top-left, and as you go to the right, the X-coordinate will increase.
 As you go down the Y-coordinate will increase.
 
-<Example part="docs_coords" caption="The SVG coordinate system" /> 
+<Example part="docs_coords">
+The SVG coordinate system
+</Example>
 
 The image above illustrates both the X-axis and Y-axis.
 On the X-axis, `20` is further to the right than `10`.
diff --git a/markdown/dev/howtos/code/adding-snippets/en.md b/markdown/dev/howtos/code/adding-snippets/en.md
index 6c66a3e8b89..3c9c25d345e 100644
--- a/markdown/dev/howtos/code/adding-snippets/en.md
+++ b/markdown/dev/howtos/code/adding-snippets/en.md
@@ -27,4 +27,7 @@ See [Using attributes](/howtos/code/attributes/) for details on how to set attri
 
 Below is an example of the available snippets, and the use of the `data-scale` and `data-rotate` attributes:
 
-<Example pattern="rendertest" caption="Overview of available snippets" options={{ colors: false, text: false, macros: false, circles: false, widthHd: false }} />
+<Example pattern="rendertest" options={{ colors: false, text: false, macros: false, circles: false, widthHd: false }}>
+Overview of available snippets 
+</Example>
+
diff --git a/markdown/dev/howtos/code/adding-text/en.md b/markdown/dev/howtos/code/adding-text/en.md
index 0f48bf507ec..b21ba085f96 100644
--- a/markdown/dev/howtos/code/adding-text/en.md
+++ b/markdown/dev/howtos/code/adding-text/en.md
@@ -16,10 +16,9 @@ points.anchor = new Point(100, 25)
   .attr("data-text-class", "center");
 ```
 
-<Example 
-  part="point_attr" 
-  caption="Text inserted in a FreeSewing pattern"
-/>
+<Example part="point_attr">
+Text inserted in a FreeSewing pattern
+</Example>
 
 <Note>
 
@@ -46,7 +45,7 @@ paths.example = new Path()
   .attr("data-text-class", "text-xs center");
 ```
 
-<Example 
-  part="path_attr" 
-  caption="Text on a path"
-/>
+<Example part="path_attr">
+Text on a path
+</Example>
+
diff --git a/markdown/dev/howtos/code/drawing-circles/en.md b/markdown/dev/howtos/code/drawing-circles/en.md
index 59c04d56efb..d77b80db574 100644
--- a/markdown/dev/howtos/code/drawing-circles/en.md
+++ b/markdown/dev/howtos/code/drawing-circles/en.md
@@ -12,5 +12,7 @@ to the radius of the circle you want to draw.
 
 In addition, all attributes that have a `data-circle-` prefix will apply to the circle, rather than the point.
 
-<Example pattern="rendertest" caption="Circles" options={{ colors: false, text: false, macros: false, snippets: false, widthHd: false }} />
+<Example pattern="rendertest" options={{ colors: false, text: false, macros: false, snippets: false, widthHd: false }}>
+Circles
+</Example>
 
diff --git a/markdown/dev/reference/api/macros/bartack/en.md b/markdown/dev/reference/api/macros/bartack/en.md
index 8c26f9eb8d0..18ca2191ee2 100644
--- a/markdown/dev/reference/api/macros/bartack/en.md
+++ b/markdown/dev/reference/api/macros/bartack/en.md
@@ -5,7 +5,9 @@ title: bartack
 The `bartack` macro allows you to add a *bartack* marker to your sewing pattern.
 It is provided by the [bartack plugin](/reference/plugins/bartack/).
 
-<Example part="plugin_bartack" caption="Example of the bartack macro" />
+<Example part="plugin_bartack">
+Example of the bartack macro
+</Example>
 
 ```js
 points.a = new Point(15, 15)
diff --git a/markdown/dev/reference/api/macros/bartackalong/en.md b/markdown/dev/reference/api/macros/bartackalong/en.md
index 409d7861efe..0c900b71527 100644
--- a/markdown/dev/reference/api/macros/bartackalong/en.md
+++ b/markdown/dev/reference/api/macros/bartackalong/en.md
@@ -6,7 +6,9 @@ The `bartackAlong` macro allows you to add a *bartack* marker to your sewing pat
 More specifically, a bartack along a path.
 It is provided by the [bartack plugin](/reference/plugins/bartack/).
 
-<Example part="plugin_bartackalong" caption="Example of the bartackAlong macro" />
+<Example part="plugin_bartackalong">
+Example of the bartackAlong macro
+</Example>
 
 ```js
 points.a = new Point(15, 15)
diff --git a/markdown/dev/reference/api/macros/bartackfractionalong/en.md b/markdown/dev/reference/api/macros/bartackfractionalong/en.md
index b4c4552a5e7..c26e17380b9 100644
--- a/markdown/dev/reference/api/macros/bartackfractionalong/en.md
+++ b/markdown/dev/reference/api/macros/bartackfractionalong/en.md
@@ -6,7 +6,9 @@ The `bartackFractionAlong` macro allows you to add a *bartack* marker to your se
 More specifically, a bartack along a fraction of a path.
 It is provided by the [bartack plugin](/reference/plugins/bartack/).
 
-<Example part="plugin_bartackfractionalong" caption="Example of the bartackFractionAlong macro" />
+<Example part="plugin_bartackfractionalong">
+Example of the bartackFractionAlong macro
+</Example>
 
 ```js
 points.a = new Point(15, 15)
diff --git a/markdown/dev/reference/api/macros/cutonfold/en.md b/markdown/dev/reference/api/macros/cutonfold/en.md
index ccb545e1b35..2876b988e39 100644
--- a/markdown/dev/reference/api/macros/cutonfold/en.md
+++ b/markdown/dev/reference/api/macros/cutonfold/en.md
@@ -5,7 +5,9 @@ title: cutonfold
 The `cutonfold` macro adds a *cut on fold* indicator to your pattern.  
 It is provided by the [cutonfold plugin](/reference/plugins/cutonfold).
 
-<Example part="plugin_cutonfold" caption="Example of the cut on fold indicator added by this macro" />
+<Example part="plugin_cutonfold">
+Example of the cut on fold indicator added by this macro
+</Example>
 
 ```js
 macro('cutonfold', {
diff --git a/markdown/dev/reference/api/macros/grainline/en.md b/markdown/dev/reference/api/macros/grainline/en.md
index 65c92a5a23a..9d82cb4ed9f 100644
--- a/markdown/dev/reference/api/macros/grainline/en.md
+++ b/markdown/dev/reference/api/macros/grainline/en.md
@@ -5,7 +5,9 @@ title: grainline
 The `grainline` macro adds a *grainline* indicator to your pattern.  
 It is provided by the [grainline plugin](/reference/plugins/grainline/).
 
-<Example part="plugin_grainline" caption="Example of the grainline indicator added by this macro" />
+<Example part="plugin_grainline">
+Example of the grainline indicator added by this macro
+</Example>
 
 ```js
 macro("grainline", {
diff --git a/markdown/dev/reference/api/macros/hd/en.md b/markdown/dev/reference/api/macros/hd/en.md
index a61f91a3b98..9be2625e774 100644
--- a/markdown/dev/reference/api/macros/hd/en.md
+++ b/markdown/dev/reference/api/macros/hd/en.md
@@ -5,10 +5,9 @@ title: hd
 The `hd` macro adds a *horizontal dimension* to your pattern.  
 It is provided by the [dimension plugin](/reference/plugins/dimension/).
 
-<Example 
-  part="point_dx"
-  caption="An example of a horizontal dimension"
-/>
+<Example part="point_dx">
+An example of a horizontal dimension
+</Example>
 
 ```js
 macro('hd', {
diff --git a/markdown/dev/reference/api/macros/ld/en.md b/markdown/dev/reference/api/macros/ld/en.md
index 879c55b745b..3bc2cc6642b 100644
--- a/markdown/dev/reference/api/macros/ld/en.md
+++ b/markdown/dev/reference/api/macros/ld/en.md
@@ -5,10 +5,9 @@ title: ld
 The `ld` macro adds a *linear dimension* to your pattern.  
 It is provided by the [dimension plugin](/reference/plugins/dimension/).
 
-<Example 
-  part="point_dist"
-  caption="An example of a linear dimension"
-/>
+<Example part="point_dist">
+An example of a linear dimension
+</Example>
 
 ```js
 macro('ld', {
diff --git a/markdown/dev/reference/api/macros/miniscale/en.md b/markdown/dev/reference/api/macros/miniscale/en.md
index e727dadebac..82545e3865c 100644
--- a/markdown/dev/reference/api/macros/miniscale/en.md
+++ b/markdown/dev/reference/api/macros/miniscale/en.md
@@ -8,7 +8,9 @@ users to verify their pattern is printed to scale.
 The `miniscale` macro is provided by the [scalebox plugin](/reference/plugins/scalebox).
 It is the mini version of [the scalebox macro](/reference/macros/scalebox/).
 
-<Example part="plugin_scalebox" caption="Example of a scalebox (left) and miniscale (right)" />
+<Example part="plugin_scalebox">
+Example of a scalebox (left) and miniscale (right)
+</Example>
 
 ```js
 macro('miniscale', {
diff --git a/markdown/dev/reference/api/macros/mirror/en.md b/markdown/dev/reference/api/macros/mirror/en.md
index 37b429946dd..e7973ddf464 100644
--- a/markdown/dev/reference/api/macros/mirror/en.md
+++ b/markdown/dev/reference/api/macros/mirror/en.md
@@ -5,7 +5,9 @@ title: mirror
 The `mirror` macro allows you to mirror points and/or paths around a mirror line.
 It is provided by the [mirror plugin](/reference/plugins/mirror/).
 
-<Example part="plugin_mirror" caption="Example of the mirror plugin" />
+<Example part="plugin_mirror">
+Example of the mirror plugin
+</Example>
 
 ```js
 points.a = new Point(5,5)
diff --git a/markdown/dev/reference/api/macros/pd/en.md b/markdown/dev/reference/api/macros/pd/en.md
index 03d8de25ecd..de51b983146 100644
--- a/markdown/dev/reference/api/macros/pd/en.md
+++ b/markdown/dev/reference/api/macros/pd/en.md
@@ -5,7 +5,9 @@ title: pd
 The `pd` macro adds a *path dimension* to your pattern, indicating the length of a path.  
 It is provided by the [dimension plugin](/reference/plugins/dimension/).
 
-<Example part="path_length" caption="Example of a multiple path dimensions" />
+<Example part="path_length"><
+Example of a multiple path dimensions
+</Example>
 
 ```js
 macro('pd', {
diff --git a/markdown/dev/reference/api/macros/round/en.md b/markdown/dev/reference/api/macros/round/en.md
index faac877de6b..81d085c4c7b 100644
--- a/markdown/dev/reference/api/macros/round/en.md
+++ b/markdown/dev/reference/api/macros/round/en.md
@@ -6,7 +6,9 @@ The `round` macro rounds a corner. It is provided by the [round plugin](/referen
 
 Note that this is only intended for 90 degree corners.
 
-<Example part="plugin_round" caption="Example of corners rounded with the round plugin" />
+<Example part="plugin_round">
+Example of corners rounded with the round plugin
+</Example>
 
 ```js
 macro('round', {
diff --git a/markdown/dev/reference/api/macros/scalebox/en.md b/markdown/dev/reference/api/macros/scalebox/en.md
index eb33cd0f0fb..6baa4e5a554 100644
--- a/markdown/dev/reference/api/macros/scalebox/en.md
+++ b/markdown/dev/reference/api/macros/scalebox/en.md
@@ -7,7 +7,9 @@ users to verify their pattern is printed to scale.
 
 The `scalebox` macro is provided by the [scalebox plugin](/reference/plugins/scalebox).
 
-<Example part="plugin_scalebox" caption="Example of the scalebox added by this macro" />
+<Example part="plugin_scalebox">
+Example of the scalebox added by this macro
+</Example>
 
 ```js
 macro('scalebox', {
diff --git a/markdown/dev/reference/api/path/_curve/en.md b/markdown/dev/reference/api/path/_curve/en.md
index 2a8de7d3104..fc643c45573 100644
--- a/markdown/dev/reference/api/path/_curve/en.md
+++ b/markdown/dev/reference/api/path/_curve/en.md
@@ -24,7 +24,9 @@ So the only purpose of this method is to save your some typing.
 
 </Tip>
 
-<Example part="path__curve" caption="Example of the Path._curve() method" />
+<Example part="path__curve">
+Example of the Path.\_curve() method
+</Example>
 
 ```js
   let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/attr/en.md b/markdown/dev/reference/api/path/attr/en.md
index d2234018017..d61a1b5cb87 100644
--- a/markdown/dev/reference/api/path/attr/en.md
+++ b/markdown/dev/reference/api/path/attr/en.md
@@ -16,7 +16,9 @@ This allows you to chain different calls together as in the example below.
 
 If the third parameter is set to `true` it will call `this.attributes.set()` instead, thereby overwriting the value of the attribute.
 
-<Example part="path_attr" caption="Example of the Path.attr() method" />
+<Example part="path_attr">
+Example of the Path.attr() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/clone/en.md b/markdown/dev/reference/api/path/clone/en.md
index cee6019b276..266fdf7d111 100644
--- a/markdown/dev/reference/api/path/clone/en.md
+++ b/markdown/dev/reference/api/path/clone/en.md
@@ -9,7 +9,9 @@ Path path.clone()
 
 Returns a new Path that is a deep copy of this path.
 
-<Example part="path_clone" caption="Example of the Path.clone() method" />
+<Example part="path_clone">
+Example of the Path.clone() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/close/en.md b/markdown/dev/reference/api/path/close/en.md
index 64a569a3efa..8b1acc4f888 100644
--- a/markdown/dev/reference/api/path/close/en.md
+++ b/markdown/dev/reference/api/path/close/en.md
@@ -8,7 +8,9 @@ Path path.close()
 
 Closes a path by drawing a straight line from the current position to the path's start.
 
-<Example part="path_close" caption="Example of the Path.close() method" />
+<Example part="path_close">
+Example of the Path.close() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/curve/en.md b/markdown/dev/reference/api/path/curve/en.md
index 7f806890a7d..22ce7ba5485 100644
--- a/markdown/dev/reference/api/path/curve/en.md
+++ b/markdown/dev/reference/api/path/curve/en.md
@@ -8,7 +8,9 @@ Path path.curve(Point cp1, Point cp2, Point to)
 
 Draws a cubic Bezier curve from the current position via two control points to a given endpoint.
 
-<Example part="path_curve" caption="Example of the Path.curve() method" />
+<Example part="path_curve">
+Example of the Path.curve() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/curve_/en.md b/markdown/dev/reference/api/path/curve_/en.md
index 53fb0eb1d45..5499d61726a 100644
--- a/markdown/dev/reference/api/path/curve_/en.md
+++ b/markdown/dev/reference/api/path/curve_/en.md
@@ -24,7 +24,9 @@ So the only purpose of this method is to save your some typing;
 
 </Tip>
 
-<Example part="path_curve_" caption="Example of the Path.curve_() method" />
+<Example part="path_curve_">
+Example of the Path.curve\_() method
+</Example>
 
 ```js
   let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/divide/en.md b/markdown/dev/reference/api/path/divide/en.md
index fe11df62d00..522d7b4bd2c 100644
--- a/markdown/dev/reference/api/path/divide/en.md
+++ b/markdown/dev/reference/api/path/divide/en.md
@@ -9,7 +9,9 @@ array path.divide()
 Breaks a path apart in an array of atomic paths. An atomic path is a path that can't be divided further and is
 always made up of one move + one drawing operation.
 
-<Example part="path_divide" caption="Example of the Path.divide() method" />
+<Example part="path_divide">
+Example of the Path.divide() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/edge/en.md b/markdown/dev/reference/api/path/edge/en.md
index 95d52735c13..0d2a102cf98 100644
--- a/markdown/dev/reference/api/path/edge/en.md
+++ b/markdown/dev/reference/api/path/edge/en.md
@@ -17,7 +17,9 @@ Returns the Point object at the edge of the path you specify. Edge must be one o
  - `bottomLeft`
  - `bottomRight`
 
-<Example part="path_edge" caption="Example of the Path.edge() method" />
+<Example part="path_edge">
+Example of the Path.edge() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/end/en.md b/markdown/dev/reference/api/path/end/en.md
index 1fea77273fb..278791d8373 100644
--- a/markdown/dev/reference/api/path/end/en.md
+++ b/markdown/dev/reference/api/path/end/en.md
@@ -8,7 +8,9 @@ Point path.end()
 
 Returns the Point object at the end of the path.
 
-<Example part="path_end" caption="Example of the Path.end() method" />
+<Example part="path_end">
+Example of the Path.end() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/intersects/en.md b/markdown/dev/reference/api/path/intersects/en.md
index 735615b310c..c3ff2976c7a 100644
--- a/markdown/dev/reference/api/path/intersects/en.md
+++ b/markdown/dev/reference/api/path/intersects/en.md
@@ -19,7 +19,9 @@ If you do know, use one of the intersection methods in [Utils](/reference/api/ut
 
 </Tip>
 
-<Example part="path_intersects" caption="Example of the Path.intersects() method" />
+<Example part="path_intersects">
+Example of the Path.intersects() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/intersectsx/en.md b/markdown/dev/reference/api/path/intersectsx/en.md
index 37493bf2652..858b6edab96 100644
--- a/markdown/dev/reference/api/path/intersectsx/en.md
+++ b/markdown/dev/reference/api/path/intersectsx/en.md
@@ -8,7 +8,9 @@ array|false path.intersectsX(float x)
 
 Returns the Point object(s) where the path intersects with a given X-value.
 
-<Example part="path_intersectsx" caption="Example of the Path.intersectsX() method" />
+<Example part="path_intersectsx">
+Example of the Path.intersectsX() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/intersectsy/en.md b/markdown/dev/reference/api/path/intersectsy/en.md
index e34cc0be046..df06a59385b 100644
--- a/markdown/dev/reference/api/path/intersectsy/en.md
+++ b/markdown/dev/reference/api/path/intersectsy/en.md
@@ -8,7 +8,9 @@ array|false path.intersectsY(float y)
 
 Returns the Point object(s) where the path intersects with a given Y-value.
 
-<Example part="path_intersectsy" caption="Example of the Path.intersectsY() method" />
+<Example part="path_intersectsy">
+Example of the Path.intersectsY() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/join/en.md b/markdown/dev/reference/api/path/join/en.md
index 19d17471201..81d6e66be88 100644
--- a/markdown/dev/reference/api/path/join/en.md
+++ b/markdown/dev/reference/api/path/join/en.md
@@ -14,7 +14,9 @@ You cannot join a closed path to another path
 
 </Warning>
 
-<Example part="path_join" caption="Example of the Path.join() method" />
+<Example part="path_join">
+Example of the Path.join() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/length/en.md b/markdown/dev/reference/api/path/length/en.md
index 662cb6ae03e..ca15197e6f7 100644
--- a/markdown/dev/reference/api/path/length/en.md
+++ b/markdown/dev/reference/api/path/length/en.md
@@ -8,7 +8,9 @@ float path.length()
 
 Returns the length of the path.
 
-<Example part="path_length" caption="Example of the Path.length() method" />
+<Example part="path_length">
+Example of the Path.length() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, macro } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/line/en.md b/markdown/dev/reference/api/path/line/en.md
index c0ee2bd1114..2cf569eb77e 100644
--- a/markdown/dev/reference/api/path/line/en.md
+++ b/markdown/dev/reference/api/path/line/en.md
@@ -8,7 +8,9 @@ Path path.line(Point to)
 
 Draws a straight line from the current position to a given point.
 
-<Example part="path_line" caption="Example of the Path.line() method" />
+<Example part="path_line">
+Example of the Path.line() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/move/en.md b/markdown/dev/reference/api/path/move/en.md
index bf08423ba6c..71e21d911ed 100644
--- a/markdown/dev/reference/api/path/move/en.md
+++ b/markdown/dev/reference/api/path/move/en.md
@@ -30,7 +30,9 @@ paths.example = new Path()
 </Tip>
 
 
-<Example part="path_move" caption="Example of the Path.move() method" />
+<Example part="path_move">
+Example of the Path.move() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/offset/en.md b/markdown/dev/reference/api/path/offset/en.md
index 41a62c02c4c..0f6ade6a88e 100644
--- a/markdown/dev/reference/api/path/offset/en.md
+++ b/markdown/dev/reference/api/path/offset/en.md
@@ -8,7 +8,9 @@ Path path.offset(float distance)
 
 Returns a new Path that is offset by distance from the original path.
 
-<Example part="path_offset" caption="Example of the Path.offset() method" />
+<Example part="path_offset">
+Example of the Path.offset() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/reverse/en.md b/markdown/dev/reference/api/path/reverse/en.md
index 471390866d7..74193b3ca11 100644
--- a/markdown/dev/reference/api/path/reverse/en.md
+++ b/markdown/dev/reference/api/path/reverse/en.md
@@ -17,7 +17,9 @@ If you want a deep copy, including the attributes, use `Path.clone().reverse()`.
 
 </Note>
 
-<Example part="path_reverse" caption="Example of the Path.reverse() method" />
+<Example part="path_reverse">
+Example of the Path.reverse() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/shiftalong/en.md b/markdown/dev/reference/api/path/shiftalong/en.md
index b0fc4b2fcc9..249a9ce1802 100644
--- a/markdown/dev/reference/api/path/shiftalong/en.md
+++ b/markdown/dev/reference/api/path/shiftalong/en.md
@@ -8,7 +8,9 @@ Point path.shiftAlong(float distance[, int stepsPerMm=25])
 
 Returns a point that lies at distance travelled along the path.
 
-<Example part="path_shiftalong" caption="Example of the Path.shiftAlong() method" />
+<Example part="path_shiftalong">
+Example of the Path.shiftAlong() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/shiftfractionalong/en.md b/markdown/dev/reference/api/path/shiftfractionalong/en.md
index 97046a54478..594a5fcf541 100644
--- a/markdown/dev/reference/api/path/shiftfractionalong/en.md
+++ b/markdown/dev/reference/api/path/shiftfractionalong/en.md
@@ -8,10 +8,9 @@ Point path.shiftFractionAlong(float fraction[, int stepsPerMm=25])
 
 Returns a point that lies at fraction of the length of the path travelled along the path.
 
-<Example 
-  part="path_shiftfractionalong" 
-  caption="Example of the Path.shiftFractionAlong() method" 
-/>
+<Example part="path_shiftfractionalong">
+Example of the Path.shiftFractionAlong() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/split/en.md b/markdown/dev/reference/api/path/split/en.md
index 48c41a1d9e1..eab87b5749b 100644
--- a/markdown/dev/reference/api/path/split/en.md
+++ b/markdown/dev/reference/api/path/split/en.md
@@ -8,10 +8,9 @@ array path.split(Point splitPoint)
 
 Splits a path in two halves, on a point along that path that you pass it.
 
-<Example 
-  part="path_split" 
-  caption="Example of the Path.split() method" 
-/>
+<Example part="path_split">
+Example of the Path.split() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/start/en.md b/markdown/dev/reference/api/path/start/en.md
index 1383b2ab65f..5c07bbce771 100644
--- a/markdown/dev/reference/api/path/start/en.md
+++ b/markdown/dev/reference/api/path/start/en.md
@@ -8,10 +8,9 @@ Point path.start()
 
 Returns the Point object at the start of the path.
 
-<Example 
-  part="path_start" 
-  caption="Example of the Path.start() method" 
-/>
+<Example part="path_start">
+Example of the Path.start() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/translate/en.md b/markdown/dev/reference/api/path/translate/en.md
index c0dedad7392..fbff05e7456 100644
--- a/markdown/dev/reference/api/path/translate/en.md
+++ b/markdown/dev/reference/api/path/translate/en.md
@@ -10,10 +10,9 @@ Returns a path with
 [a translate transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Translate)
 applied.
 
-<Example 
-  part="path_translate" 
-  caption="Example of the Path.translate() method" 
-/>
+<Example part="path_translate">
+Example of the Path.translate() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, macro } = part.shorthand();
diff --git a/markdown/dev/reference/api/path/trim/en.md b/markdown/dev/reference/api/path/trim/en.md
index d8b58748ce4..166a2fb4341 100644
--- a/markdown/dev/reference/api/path/trim/en.md
+++ b/markdown/dev/reference/api/path/trim/en.md
@@ -28,10 +28,9 @@ You can see an example of this
 
 </Warning>
 
-<Example 
-  part="path_trim" 
-  caption="Example of the Path.trim() method" 
-/>
+<Example part="path_trim">
+Example of the Path.trim() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/angle/en.md b/markdown/dev/reference/api/point/angle/en.md
index d0d1f36d095..493432026e9 100644
--- a/markdown/dev/reference/api/point/angle/en.md
+++ b/markdown/dev/reference/api/point/angle/en.md
@@ -13,10 +13,9 @@ float point.angle(Point pointB)
 
 ## Point.angle() Example
 
-<Example
-  part="point_angle"
-  caption="An example of the Point.angle() method"
-/>
+<Example part="point_angle">
+An example of the Point.angle() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/attr/en.md b/markdown/dev/reference/api/point/attr/en.md
index 2a09a351b9f..1f0de570cd2 100644
--- a/markdown/dev/reference/api/point/attr/en.md
+++ b/markdown/dev/reference/api/point/attr/en.md
@@ -22,10 +22,9 @@ If the third parameter is set to `true` it will call [`this.attributes.set()`](/
 
 ## Point.attr() example
 
-<Example
-  part="point_attr"
-  caption="An example of the Point.attr() method"
-/>
+<Example part="point_attr">
+An example of the Point.attr() method
+</Example>
 
 ```js
 let { Point, points } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/clone/en.md b/markdown/dev/reference/api/point/clone/en.md
index d441fbedec2..07a68e362f6 100644
--- a/markdown/dev/reference/api/point/clone/en.md
+++ b/markdown/dev/reference/api/point/clone/en.md
@@ -21,10 +21,9 @@ The [`Point.copy()`](reference/api/point/copy/) method will only copy the point'
 
 ## Point.clone() example
 
-<Example
-  part="point_clone"
-  caption="An example of the Point.clone() method"
-/>
+<Example part="point_clone">
+An example of the Point.clone() method
+</Example>
 
 ```js
   let { Point, points, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/copy/en.md b/markdown/dev/reference/api/point/copy/en.md
index 148959aa682..87b5407682a 100644
--- a/markdown/dev/reference/api/point/copy/en.md
+++ b/markdown/dev/reference/api/point/copy/en.md
@@ -21,10 +21,9 @@ To also copy the attributes, use [`Point.clone()`](reference/api/point/clone/) i
 
 ## Point.copy() example
 
-<Example
-  part="point_copy"
-  caption="An example of the Point.copy() method"
-/>
+<Example part="point_copy">
+An example of the Point.copy() method
+</Example>
 
 ```js
 let { Point, points, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/dist/en.md b/markdown/dev/reference/api/point/dist/en.md
index 5f6d808497d..aeee3e00553 100644
--- a/markdown/dev/reference/api/point/dist/en.md
+++ b/markdown/dev/reference/api/point/dist/en.md
@@ -12,10 +12,9 @@ float point.dist(Point point)
 
 ## Point.dist() example
 
-<Example
-  part="point_dist"
-  caption="An example of the Point.dist() method"
-/>
+<Example part="point_dist">
+An example of the Point.dist() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand()
diff --git a/markdown/dev/reference/api/point/dx/en.md b/markdown/dev/reference/api/point/dx/en.md
index 73ef41b5095..a99fe5a02c7 100644
--- a/markdown/dev/reference/api/point/dx/en.md
+++ b/markdown/dev/reference/api/point/dx/en.md
@@ -12,10 +12,9 @@ float point.dx(Point point)
 
 ## Point.dx() example
 
-<Example
-  part="point_dx"
-  caption="An example of the Point.dx() method"
-/>
+<Example part="point_dx">
+An example of the Point.dx() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand()
diff --git a/markdown/dev/reference/api/point/dy/en.md b/markdown/dev/reference/api/point/dy/en.md
index d73049e070b..194c3eece54 100644
--- a/markdown/dev/reference/api/point/dy/en.md
+++ b/markdown/dev/reference/api/point/dy/en.md
@@ -12,10 +12,9 @@ float point.dy(Point point)
 
 ## Point.dy() example
 
-<Example
-  part="point_dy"
-  caption="An example of the Point.dy() method"
-/>
+<Example part="point_dy">
+An example of the Point.dy() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand()
diff --git a/markdown/dev/reference/api/point/flipx/en.md b/markdown/dev/reference/api/point/flipx/en.md
index ec4c0dc2320..d13043c85ff 100644
--- a/markdown/dev/reference/api/point/flipx/en.md
+++ b/markdown/dev/reference/api/point/flipx/en.md
@@ -13,10 +13,9 @@ Point point.flipX(Point mirror = false)
 
 ## Point.flipX() example
 
-<Example
-  part="point_flipx"
-  caption="An example of the Point.flipX() method"
-/>
+<Example part="point_flipx">
+An example of the Point.flipX() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/flipy/en.md b/markdown/dev/reference/api/point/flipy/en.md
index cbed58ab24d..ff1208324fd 100644
--- a/markdown/dev/reference/api/point/flipy/en.md
+++ b/markdown/dev/reference/api/point/flipy/en.md
@@ -13,10 +13,9 @@ Point point.flipY(Point mirror = false)
 
 ## Point.flipY() example
 
-<Example
-  part="point_flipy"
-  caption="An example of the Point.flipY() method"
-/>
+<Example part="point_flipy">
+An example of the Point.flipY() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/rotate/en.md b/markdown/dev/reference/api/point/rotate/en.md
index 0e47029c5cb..74e3632275a 100644
--- a/markdown/dev/reference/api/point/rotate/en.md
+++ b/markdown/dev/reference/api/point/rotate/en.md
@@ -15,10 +15,9 @@ Point point.rotate(float angle, Point center)
 
 ## Point.rotate() example
 
-<Example
-  part="point_rotate"
-  caption="An example of the Point.rotate() method"
-/>
+<Example part="point_rotate">
+An example of the4Point.rotate() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/shift/en.md b/markdown/dev/reference/api/point/shift/en.md
index 32012619e4f..833f11839d7 100644
--- a/markdown/dev/reference/api/point/shift/en.md
+++ b/markdown/dev/reference/api/point/shift/en.md
@@ -13,10 +13,9 @@ Point point.shift(float angle, float distance)
 
 ## Point.shift() example
 
-<Example
-  part="point_shift"
-  caption="An example of the Point.shift() method"
-/>
+<Example part="point_shift">
+An example of the Point.shift() method
+</Example>
 
 ```js
 let { Point, points, macro } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/shiftfractiontowards/en.md b/markdown/dev/reference/api/point/shiftfractiontowards/en.md
index eeacc778657..652c80dde03 100644
--- a/markdown/dev/reference/api/point/shiftfractiontowards/en.md
+++ b/markdown/dev/reference/api/point/shiftfractiontowards/en.md
@@ -18,10 +18,9 @@ Point point.shiftFractionTowards(Point target, float fraction)
 
 ## Point.shiftFractionTowards() example
 
-<Example
-  part="point_shiftfractiontowards"
-  caption="An example of the Point.shiftFractionTowards() method"
-/>
+<Example part="point_shiftfractiontowards">
+An example of the Point.shiftFractionTowards() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, macro } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/shiftoutwards/en.md b/markdown/dev/reference/api/point/shiftoutwards/en.md
index 55453e40842..e08d536d835 100644
--- a/markdown/dev/reference/api/point/shiftoutwards/en.md
+++ b/markdown/dev/reference/api/point/shiftoutwards/en.md
@@ -12,10 +12,9 @@ Point point.shiftOutwards(Point target, float distance)
 
 ## Point.shiftOutwards() example
 
-<Example
-  part="point_shiftoutwards"
-  caption="An example of the Point.shiftOutwards() method"
-/>
+<Example part="point_shiftoutwards">
+An example of the Point.shiftOutwards() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, macro } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/shifttowards/en.md b/markdown/dev/reference/api/point/shifttowards/en.md
index 012cd8f6f2d..45f8918968f 100644
--- a/markdown/dev/reference/api/point/shifttowards/en.md
+++ b/markdown/dev/reference/api/point/shifttowards/en.md
@@ -14,10 +14,9 @@ Point point.shiftTowards(Point target, float distance)
 
 ## Point.shiftTowards() example
 
-<Example
-  part="point_shifttowards"
-  caption="An example of the Point.shiftTowards() method"
-/>
+<Example part="point_shifttowards">
+An example of the Point.shiftTowards() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, macro } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/sitson/en.md b/markdown/dev/reference/api/point/sitson/en.md
index cfe49d98a22..9552f016b04 100644
--- a/markdown/dev/reference/api/point/sitson/en.md
+++ b/markdown/dev/reference/api/point/sitson/en.md
@@ -24,10 +24,9 @@ bool point.sitsOn(Point check)
 
 ## Point.sitsOn() example
 
-<Example
-  part="point_sitson"
-  caption="An example of the Point.sitsOn() method"
-/>
+<Example part="point_sitson">
+An example of the Point.sitsOn() method
+</Example>
 
 ```js
 let { Point, points, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/sitsroughlyon/en.md b/markdown/dev/reference/api/point/sitsroughlyon/en.md
index af3e45a61b1..170ba9310cb 100644
--- a/markdown/dev/reference/api/point/sitsroughlyon/en.md
+++ b/markdown/dev/reference/api/point/sitsroughlyon/en.md
@@ -21,10 +21,9 @@ that this one rounds things down to the nearest integer (thus mm) before checkin
 
 ## Point.sitsRoughlyOn() example
 
-<Example 
-  part="point_sitsroughlyon"
-  caption="An example of the Point.sitsRoughlyOn() method"
-/>
+<Example part="point_sitsroughlyon">
+An example of the Point.sitsRoughlyOn() method
+</Example>
 
 ```js
 let { Point, points, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/point/translate/en.md b/markdown/dev/reference/api/point/translate/en.md
index 521f51159b8..23c51c8f0fb 100644
--- a/markdown/dev/reference/api/point/translate/en.md
+++ b/markdown/dev/reference/api/point/translate/en.md
@@ -19,10 +19,9 @@ Positive values for `deltaX` will move the point to the right. Positive values f
 
 ## Point.translate() example
 
-<Example
-  part="point_translate"
-  caption="An example of the Point.translate() method"
-/>
+<Example part="point_translate">
+An example of the Point.translate() method
+</Example>
 
 ```js
 let { Point, points, Snippet, snippets, macro } = part.shorthand();
diff --git a/markdown/dev/reference/api/snippet/attr/en.md b/markdown/dev/reference/api/snippet/attr/en.md
index d25b969ffac..72e0412eab8 100644
--- a/markdown/dev/reference/api/snippet/attr/en.md
+++ b/markdown/dev/reference/api/snippet/attr/en.md
@@ -16,10 +16,9 @@ but returns the Snippet object.  This allows you to chain different calls togeth
 If the third parameter is set to `true` it will call [`Attributes.set()`](./attributes#set) instead, 
 thereby overwriting the value of the attribute.
 
-<Example
-  part="snippet_attr"
-  caption="An example of the Snippet.attr() method"
-/>
+<Example part="snippet_attr">
+An example of the Snippet.attr() method
+</Example>
 
 ```js
 let { Point, points, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/snippet/clone/en.md b/markdown/dev/reference/api/snippet/clone/en.md
index e6a761522e0..520fb1c6890 100644
--- a/markdown/dev/reference/api/snippet/clone/en.md
+++ b/markdown/dev/reference/api/snippet/clone/en.md
@@ -8,10 +8,10 @@ Snippet snippet.clone()
 
 Returns a new Snippets object that is a deep copy of this one.
 
-<Example
-  part="snippet_clone"
-  caption="An example of the Snippet.clone() method"
-/>
+<Example part="snippet_clone">
+An example of the Snippet.clone() method
+</Example>
+
 
 ```js
 let { Point, points, Snippet, snippets } = part.shorthand();
diff --git a/markdown/dev/reference/api/snippets/button/en.md b/markdown/dev/reference/api/snippets/button/en.md
index c48369c5e68..f9396e65768 100644
--- a/markdown/dev/reference/api/snippets/button/en.md
+++ b/markdown/dev/reference/api/snippets/button/en.md
@@ -9,5 +9,7 @@ provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('button', points.anchor)
 ```
 
-<Example part="snippets_button" caption="An example of the button snippet" />
+<Example part="snippets_button">
+An example of the button snippet
+</Example>
 
diff --git a/markdown/dev/reference/api/snippets/buttonhole-end/en.md b/markdown/dev/reference/api/snippets/buttonhole-end/en.md
index 6cea7359607..2ad50665e6a 100644
--- a/markdown/dev/reference/api/snippets/buttonhole-end/en.md
+++ b/markdown/dev/reference/api/snippets/buttonhole-end/en.md
@@ -9,7 +9,9 @@ provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('buttonhole-end', points.anchor)
 ```
 
-<Example part="snippets_buttonhole_end" caption="An example of the buttonhole-end snippet" />
+<Example part="snippets_buttonhole_end">
+An example of the buttonhole-end snippet
+</Example>
 
 <Note>
 
diff --git a/markdown/dev/reference/api/snippets/buttonhole-start/en.md b/markdown/dev/reference/api/snippets/buttonhole-start/en.md
index a2638f69dec..e08a75d2ef6 100644
--- a/markdown/dev/reference/api/snippets/buttonhole-start/en.md
+++ b/markdown/dev/reference/api/snippets/buttonhole-start/en.md
@@ -9,7 +9,10 @@ provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('buttonhole-start', points.anchor)
 ```
 
-<Example part="snippets_buttonhole_start" caption="An example of the buttonhole-start snippet" />
+<Example part="snippets_buttonhole_start">
+An example of the buttonhole-start snippet
+</Example>
+
 
 <Note>
 
diff --git a/markdown/dev/reference/api/snippets/buttonhole/en.md b/markdown/dev/reference/api/snippets/buttonhole/en.md
index 847bab92e79..df36625a4d0 100644
--- a/markdown/dev/reference/api/snippets/buttonhole/en.md
+++ b/markdown/dev/reference/api/snippets/buttonhole/en.md
@@ -9,7 +9,9 @@ provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('buttonhole', points.anchor)
 ```
 
-<Example part="snippets_buttonhole" caption="An example of the buttonhole snippet" />
+<Example part="snippets_buttonhole">
+An example of the buttonhole snippet
+</Example>
 
 <Note>
 
diff --git a/markdown/dev/reference/api/snippets/logo/en.md b/markdown/dev/reference/api/snippets/logo/en.md
index b02e6d828b5..bf8a0f55950 100644
--- a/markdown/dev/reference/api/snippets/logo/en.md
+++ b/markdown/dev/reference/api/snippets/logo/en.md
@@ -9,5 +9,7 @@ provided by [plugin-logo](/reference/plugins/logo/).
 snippets.demo = new Snippet('logo', points.anchor)
 ```
 
-<Example part="snippets_logo" caption="An example of the logo snippet" />
+<Example part="snippets_logo">
+An example of the logo snippet
+</Example>
 
diff --git a/markdown/dev/reference/api/snippets/notch/en.md b/markdown/dev/reference/api/snippets/notch/en.md
index 87fe03cee84..8b25d3f01c5 100644
--- a/markdown/dev/reference/api/snippets/notch/en.md
+++ b/markdown/dev/reference/api/snippets/notch/en.md
@@ -8,5 +8,7 @@ provided by [plugin-theme](/reference/plugins/theme/).
 ```js
 snippets.demo = new Snippet('bnotch', points.anchor)
 ```
-<Example part="snippets_notch" caption="An example of the notch snippet" />
+<Example part="snippets_notch">
+An example of the notch snippet
+</Example>
 
diff --git a/markdown/dev/reference/api/snippets/snap-socket/en.md b/markdown/dev/reference/api/snippets/snap-socket/en.md
index 3b958efcc4c..91abf00e4dc 100644
--- a/markdown/dev/reference/api/snippets/snap-socket/en.md
+++ b/markdown/dev/reference/api/snippets/snap-socket/en.md
@@ -10,5 +10,7 @@ It is provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('snap-socket', points.anchor)
 ```
 
-<Example part="snippets_snapsocket" caption="An example of the snap-socket snippet" />
+<Example part="snippets_snapsocket">
+An example of the snap-socket snippet
+</Example>
 
diff --git a/markdown/dev/reference/api/snippets/snap-stud/en.md b/markdown/dev/reference/api/snippets/snap-stud/en.md
index 9cb68f5f73b..b1b83c45103 100644
--- a/markdown/dev/reference/api/snippets/snap-stud/en.md
+++ b/markdown/dev/reference/api/snippets/snap-stud/en.md
@@ -10,5 +10,7 @@ It is provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('snap-stud', points.anchor)
 ```
 
-<Example part="snippets_snapstud" caption="An example of the snap-stud snippet" />
+<Example part="snippets_snapstud">
+An example of the snap-stud snippet
+</Example>
 
diff --git a/markdown/dev/reference/api/utils/beamintersectscircle/en.md b/markdown/dev/reference/api/utils/beamintersectscircle/en.md
index 9a52b4ca7a0..bbdc0b9b070 100644
--- a/markdown/dev/reference/api/utils/beamintersectscircle/en.md
+++ b/markdown/dev/reference/api/utils/beamintersectscircle/en.md
@@ -24,7 +24,9 @@ Set sort to:
  - `x` : The point with the lowest X-coordinate will go first (left to right)
  - `y` : The point with the lowest Y-coordinate will go first (top to bottom)
 
-<Example part="utils_beamintersectscircle" caption="A Utils.beamIntersectsCircle() example" />
+<Example part="utils_beamintersectscircle">
+A Utils.beamIntersectsCircle() example
+</Example>
 
 ```js
 let {
diff --git a/markdown/dev/reference/api/utils/beamintersectsx/en.md b/markdown/dev/reference/api/utils/beamintersectsx/en.md
index ebdd472b0e4..b3d854bf790 100644
--- a/markdown/dev/reference/api/utils/beamintersectsx/en.md
+++ b/markdown/dev/reference/api/utils/beamintersectsx/en.md
@@ -9,7 +9,9 @@ Point | false utils.beamIntersectsX(Point A, Point B, float X)
 Finds the intersection between an endless line and a given X-value. Returns a [Point](#point) object
 for the intersection, or `false` there is no intersection.
 
-<Example part="utils_beamintersectsx" caption="A Utils.beamIntersectsX() example" />
+<Example part="utils_beamintersectsx">
+A Utils.beamIntersectsX() example
+</Example>
 
 ```js
   let {
diff --git a/markdown/dev/reference/api/utils/beamintersectsy/en.md b/markdown/dev/reference/api/utils/beamintersectsy/en.md
index f7e36909d83..f043898d58f 100644
--- a/markdown/dev/reference/api/utils/beamintersectsy/en.md
+++ b/markdown/dev/reference/api/utils/beamintersectsy/en.md
@@ -9,7 +9,9 @@ Point | false utils.beamIntersectsY(Point A, Point B, float Y)
 Finds the intersection between an endless line and a given Y-value. Returns a [Point](#point) object
 for the intersection, or `false` there is no intersection.
 
-<Example part="utils_beamintersectsy" caption="A Utils.beamIntersectsY() example" />
+<Example part="utils_beamintersectsy">
+A Utils.beamIntersectsY() example
+</Example>
 
 ```js
 let {
diff --git a/markdown/dev/reference/api/utils/beamsintersect/en.md b/markdown/dev/reference/api/utils/beamsintersect/en.md
index 062c535a030..fc5ae94e26f 100644
--- a/markdown/dev/reference/api/utils/beamsintersect/en.md
+++ b/markdown/dev/reference/api/utils/beamsintersect/en.md
@@ -14,7 +14,9 @@ Point | false utils.beamsIntersect(
 Finds the intersection between two endless lines (beams). Returns a [Point](#point) object
 for the intersection, or `false` if the lines don't intersect.
 
-<Example part="utils_beamsintersect" caption="A Utils.beamIntersect() example" />
+<Example part="utils_beamsintersect">
+A Utils.beamIntersect() example
+</Example>
 
 ```js
 let {
diff --git a/markdown/dev/reference/api/utils/circlesintersect/en.md b/markdown/dev/reference/api/utils/circlesintersect/en.md
index c95c70c67f1..77ee1a139b7 100644
--- a/markdown/dev/reference/api/utils/circlesintersect/en.md
+++ b/markdown/dev/reference/api/utils/circlesintersect/en.md
@@ -22,7 +22,9 @@ Set sort to:
  - `x` : The point with the lowest X-coordinate will go first (left to right)
  - `y` : The point with the lowest Y-coordinate will go first (top to bottom)
 
-<Example part="utils_circlesintersect" caption="A Utils.circlesIntersect() example" />
+<Example part="utils_circlesintersect">
+A Utils.circlesIntersect() example
+</Example>
 
 ```js
 let { Point, points, Snippet, snippets, utils } = part.shorthand();
diff --git a/markdown/dev/reference/api/utils/curvesintersect/en.md b/markdown/dev/reference/api/utils/curvesintersect/en.md
index ff17cf7706b..4a5519f5e05 100644
--- a/markdown/dev/reference/api/utils/curvesintersect/en.md
+++ b/markdown/dev/reference/api/utils/curvesintersect/en.md
@@ -16,7 +16,9 @@ array | false utils.curvesIntersect(
 
 Finds the intersections between two curves described by 4 points each.
 
-<Example part="utils_curvesintersect" caption="A Utils.curvesIntersect() example" />
+<Example part="utils_curvesintersect">
+A Utils.curvesIntersect() example
+</Example>
 
 ```js
 let {
diff --git a/markdown/dev/reference/api/utils/lineintersectscircle/en.md b/markdown/dev/reference/api/utils/lineintersectscircle/en.md
index 70b7b64ffda..f349ba976aa 100644
--- a/markdown/dev/reference/api/utils/lineintersectscircle/en.md
+++ b/markdown/dev/reference/api/utils/lineintersectscircle/en.md
@@ -23,7 +23,9 @@ Set sort to:
  - `x` : The point with the lowest X-coordinate will go first (left to right)
  - `y` : The point with the lowest Y-coordinate will go first (top to bottom)
 
-<Example part="utils_lineintersectscircle" caption="A Utils.lineIntersectsCircle() example" />
+<Example part="utils_lineintersectscircle">
+A Utils.lineIntersectsCircle() example
+</Example>
 
 ```js
 let {
diff --git a/markdown/dev/reference/api/utils/lineintersectscurve/en.md b/markdown/dev/reference/api/utils/lineintersectscurve/en.md
index 383e212b0ec..d53fa94dc3e 100644
--- a/markdown/dev/reference/api/utils/lineintersectscurve/en.md
+++ b/markdown/dev/reference/api/utils/lineintersectscurve/en.md
@@ -16,7 +16,9 @@ array | false utils.lineIntersectsCurve(
 Finds the intersection between a line segment from point `from` to point `to`
 and a curve described by points `start`, `cp1`, `cp2, and `end`.
 
-<Example part="utils_lineintersectscurve" caption="A Utils.lineIntersectsCurve() example" />
+<Example part="utils_lineintersectscurve">
+A Utils.lineIntersectsCurve() example
+</Example>
 
 ```js
 let {
diff --git a/markdown/dev/reference/api/utils/linesintersect/en.md b/markdown/dev/reference/api/utils/linesintersect/en.md
index 314ad94b68a..a97fe0743c6 100644
--- a/markdown/dev/reference/api/utils/linesintersect/en.md
+++ b/markdown/dev/reference/api/utils/linesintersect/en.md
@@ -14,7 +14,9 @@ Point | false utils.linesIntersect(
 Finds the intersection between two line segments. Returns a [Point](#point) object
 for the intersection, or `false` if the lines don't intersect.
 
-<Example part="utils_linesintersect" caption="A Utils.linesIntersect() example" />
+<Example part="utils_linesintersect">
+A Utils.linesIntersect() example
+</Example>
 
 ```js
 let {
diff --git a/markdown/dev/reference/api/utils/pointonbeam/en.md b/markdown/dev/reference/api/utils/pointonbeam/en.md
index 9569a2a9838..14d8899c217 100644
--- a/markdown/dev/reference/api/utils/pointonbeam/en.md
+++ b/markdown/dev/reference/api/utils/pointonbeam/en.md
@@ -26,7 +26,9 @@ When that happens, you can lower the precision so you get what you expect.
 
 </Note>
 
-<Example part="utils_pointonbeam" caption="A Utils.pointOnBeam() example" />
+<Example part="utils_pointonbeam">
+A Utils.pointOnBeam() example
+</Example>
 
 ```js
 let {
diff --git a/markdown/dev/reference/api/utils/pointoncurve/en.md b/markdown/dev/reference/api/utils/pointoncurve/en.md
index a663885dbac..953a3fd2e76 100644
--- a/markdown/dev/reference/api/utils/pointoncurve/en.md
+++ b/markdown/dev/reference/api/utils/pointoncurve/en.md
@@ -20,7 +20,9 @@ Keep in mind that calculations with Bezier curves are often aproximations.
 
 </Note>
 
-<Example part="utils_pointoncurve" caption="A Utils.pointOnCurve() example" />
+<Example part="utils_pointoncurve">
+A Utils.pointOnCurve() example
+</Example>
 
 ```js
 let {
diff --git a/markdown/dev/reference/api/utils/pointonline/en.md b/markdown/dev/reference/api/utils/pointonline/en.md
index 468090b6175..65fe13547ff 100644
--- a/markdown/dev/reference/api/utils/pointonline/en.md
+++ b/markdown/dev/reference/api/utils/pointonline/en.md
@@ -15,7 +15,9 @@ Returns `true` if the point `check` lies on a line segment from point `from` to
 
 The fourth parameter controls the precision. See [pointOnBeam](#utilspointonbeam).
 
-<Example part="utils_pointonline" caption="A Utils.pointOnLine() example" />
+<Example part="utils_pointonline">
+A Utils.pointOnLine() example
+</Example>
 
 ```js
 let {
diff --git a/markdown/dev/tutorials/pattern-design/avoiding-overlap/en.md b/markdown/dev/tutorials/pattern-design/avoiding-overlap/en.md
index 41e95c190b2..32703439581 100644
--- a/markdown/dev/tutorials/pattern-design/avoiding-overlap/en.md
+++ b/markdown/dev/tutorials/pattern-design/avoiding-overlap/en.md
@@ -47,7 +47,10 @@ While we're at it, let's add a point where the closure's snap should go:
 points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5)
 ```
 
-<Example pattern="tutorial" part="step8" caption="The right part looks a bit wonky now, but we'll get to that" />
+<Example pattern="tutorial" part="step8">
+The right part looks a bit wonky now, but we'll get to that
+</Example>
+
 
 Now let's mirror this on the other side, and replace our `neck` and `rect` paths with a new path.
 
diff --git a/markdown/dev/tutorials/pattern-design/completing-the-neck-opening/en.md b/markdown/dev/tutorials/pattern-design/completing-the-neck-opening/en.md
index ca2bb88259e..701afd7574d 100644
--- a/markdown/dev/tutorials/pattern-design/completing-the-neck-opening/en.md
+++ b/markdown/dev/tutorials/pattern-design/completing-the-neck-opening/en.md
@@ -64,5 +64,7 @@ paths.neck = new Path()
   .close()
 ```
 
-<Example pattern="tutorial" part="step4" caption="And now you have a complete neck opening" />
+<Example pattern="tutorial" part="step4">
+And now you have a complete neck opening
+</Example>
 
diff --git a/markdown/dev/tutorials/pattern-design/completing-your-pattern/en.md b/markdown/dev/tutorials/pattern-design/completing-your-pattern/en.md
index 076d3466644..ce19b65c30b 100644
--- a/markdown/dev/tutorials/pattern-design/completing-your-pattern/en.md
+++ b/markdown/dev/tutorials/pattern-design/completing-your-pattern/en.md
@@ -172,7 +172,10 @@ macro("scalebox", { at: points.scalebox })
 
 And with that, our pattern is now *complete*:
 
-<Example pattern="tutorial" part="step11" caption="We used attributes to add color, dashes, text on a path and even opacity" />
+<Example pattern="tutorial" part="step11">
+We used attributes to add color, dashes, text on a path and even opacity
+</Example>
+
 
 We're not done yet though. There's one more thing the user can ask for: a *paperless* pattern.
 
diff --git a/markdown/dev/tutorials/pattern-design/creating-the-closure/en.md b/markdown/dev/tutorials/pattern-design/creating-the-closure/en.md
index bd4b741eb2b..d343a54f173 100644
--- a/markdown/dev/tutorials/pattern-design/creating-the-closure/en.md
+++ b/markdown/dev/tutorials/pattern-design/creating-the-closure/en.md
@@ -59,7 +59,9 @@ macro("round", {
 
 <Note> You can find more information on the `round` macro in [the macros docs](/reference/api/macros/round/).</Note>
 
-<Example pattern="tutorial" part="step7" caption="Pretty good, but how are we going to fit it over the baby's head?" />
+<Example pattern="tutorial" part="step7">
+Pretty good, but how are we going to fit it over the baby's head?
+</Example>
 
 Like our neck opening, we've only drawn half since we can simply copy the points to the other side.
 
diff --git a/markdown/dev/tutorials/pattern-design/drawing-the-bib-outline/en.md b/markdown/dev/tutorials/pattern-design/drawing-the-bib-outline/en.md
index d5e5e94fb99..6350deafc32 100644
--- a/markdown/dev/tutorials/pattern-design/drawing-the-bib-outline/en.md
+++ b/markdown/dev/tutorials/pattern-design/drawing-the-bib-outline/en.md
@@ -63,5 +63,8 @@ and the sides are equidistant from the neck neck opening.
 
 You didn't have to do that. But it looks nicely balanced this way:
 
-<Example pattern="tutorial" part="step5" caption="Note how the neck opening is the same distance from the left, right, and top edge" />
+<Example pattern="tutorial" part="step5">
+Note how the neck opening is the same distance from the left, right, and top edge
+</Example>
+
 
diff --git a/markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md b/markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md
index b58ccb60dea..532e6dcd97b 100644
--- a/markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md
+++ b/markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md
@@ -113,7 +113,10 @@ macro("round", {
 
 With that out of the way, our bib now looks like this:
 
-<Example pattern="tutorial" part="step9" caption="That is looking a lot like a bib" />
+<Example pattern="tutorial" part="step9">
+That is looking a lot like a bib
+</Example>
+
 
 <Note> 
 
diff --git a/markdown/dev/tutorials/pattern-design/paperless-bib/en.md b/markdown/dev/tutorials/pattern-design/paperless-bib/en.md
index 71afb4dfd76..f2a6defe053 100644
--- a/markdown/dev/tutorials/pattern-design/paperless-bib/en.md
+++ b/markdown/dev/tutorials/pattern-design/paperless-bib/en.md
@@ -83,7 +83,9 @@ if (paperless) {
 
 There's a lot going on, but it's mostly repetition. To see what that did to your pattern, you have to enable *paperless mode* in your developing environment; you can find the option under *Pattern options* on the right. Let's look at the end result, and discuss:
 
-<Example pattern="tutorial" part="bib" caption="Your paperless bib" settings={{paperless: true}} />
+<Example pattern="tutorial" part="bib" setting={{paperless: true }}>
+Your paperless bib
+</Example>
 
 We used the `hd` macro to add two horizontal dimensions:
 
diff --git a/markdown/dev/tutorials/pattern-design/rounding-the-corners/en.md b/markdown/dev/tutorials/pattern-design/rounding-the-corners/en.md
index 3975be88fce..d5aa904582d 100644
--- a/markdown/dev/tutorials/pattern-design/rounding-the-corners/en.md
+++ b/markdown/dev/tutorials/pattern-design/rounding-the-corners/en.md
@@ -72,7 +72,9 @@ and keep the rest of the path as it was.
 
 The shape our bib is now completed:
 
-<Example pattern="tutorial" part="step10" caption="That is looking a lot like a bib" />
+<Example pattern="tutorial" part="step10">
+That is looking a lot like a bib
+</Example>
 
 
 
diff --git a/markdown/dev/tutorials/pattern-design/shaping-the-straps/en.md b/markdown/dev/tutorials/pattern-design/shaping-the-straps/en.md
index 54829f8099c..9eab40fc3c1 100644
--- a/markdown/dev/tutorials/pattern-design/shaping-the-straps/en.md
+++ b/markdown/dev/tutorials/pattern-design/shaping-the-straps/en.md
@@ -44,5 +44,7 @@ paths.rect = new Path()
 
 All of a sudden, things are starting to look like a bib:
 
-<Example pattern="tutorial" part="step6" caption="Pretty good, but how are we going to fit it over the baby's head?" />
+<Example pattern="tutorial" part="step6">
+Pretty good, but how are we going to fit it over the baby's head?
+</Example>
 
diff --git a/markdown/dev/tutorials/pattern-design/your-first-part/en.md b/markdown/dev/tutorials/pattern-design/your-first-part/en.md
index 3924537d4b0..2e04367c63a 100644
--- a/markdown/dev/tutorials/pattern-design/your-first-part/en.md
+++ b/markdown/dev/tutorials/pattern-design/your-first-part/en.md
@@ -70,6 +70,9 @@ In our case, we have a part named `bib` so we're using `draftBib()` as the metho
 Congratulations, your pattern now has a `bib` part, rather than a `box` part. 
 It still looks the same though:
 
-<Example pattern="tutorial" part="step1" caption="Our bib part, which is the renamed box part" />
+<Example pattern="tutorial" part="step1">
+Our bib part, which is the renamed box part
+</Example>
+
 
 This `bib` part is where we'll do some real work. But first, we have some more configuration to do.