diff --git a/guide/getting-started.md b/guide/getting-started.md
index 1854911..57ddbfd 100644
--- a/guide/getting-started.md
+++ b/guide/getting-started.md
@@ -4,7 +4,7 @@ Pear Runtime can be installed from the [pears.com](pears.com) or via [npm](https
 
 Since `npm` (or equivalent package manager) is needed to install application dependencies this guide will walk through installing `pear` with `npm`.
 
-> [Build with Pear - Episode 01: Developing with Pear](https://www.youtube.com/watch?v=y2G97xz78gU)
+{% embed url="https://www.youtube.com/watch?v=y2G97xz78gU" %} Build with Pear - Episode 01: Developing with Pear {% embeded %}
 
 ## Requirements
 
diff --git a/guide/making-a-pear-desktop-app.md b/guide/making-a-pear-desktop-app.md
index b7302c4..b175ddc 100644
--- a/guide/making-a-pear-desktop-app.md
+++ b/guide/making-a-pear-desktop-app.md
@@ -4,7 +4,7 @@ This guide demonstrates how to build a peer-to-peer chat application.
 
 It continues where [Starting a Pear Desktop Project](./starting-a-pear-desktop-project.md) left off.
 
-> [Build with Pear - Episode 01: Developing with Pear](https://www.youtube.com/watch?v=y2G97xz78gU)
+{% embed url="https://www.youtube.com/watch?v=y2G97xz78gU" %} Build with Pear - Episode 01: Developing with Pear {% embeded %}
 
 ## Step 1. HTML Structure and CSS Styles
 
diff --git a/guide/making-a-pear-terminal-app.md b/guide/making-a-pear-terminal-app.md
index 9eba8b5..a9c8737 100644
--- a/guide/making-a-pear-terminal-app.md
+++ b/guide/making-a-pear-terminal-app.md
@@ -4,7 +4,7 @@ This guide demonstrates how to build a peer-to-peer chat application.
 
 It continues where [Starting a Pear Terminal Project](./starting-a-pear-terminal-project.md) left off.
 
-> [Build with Pear - Episode 04: Pear Terminal Applications](https://www.youtube.com/watch?v=UoGJ7PtAwtI)
+{% embed url="https://www.youtube.com/watch?v=UoGJ7PtAwtI" %} Build with Pear - Episode 04: Pear Terminal Applications {% embeded %}
 
 ## Step 1. Install modules
 
diff --git a/guide/releasing-a-pear-app.md b/guide/releasing-a-pear-app.md
index 807d116..b67f3fd 100644
--- a/guide/releasing-a-pear-app.md
+++ b/guide/releasing-a-pear-app.md
@@ -4,7 +4,7 @@ Pear applications are stored in an append-only log ([hypercore](../building-bloc
 
 Each version is identified by `<fork>.<length>.<key>`. The length corresponds to the length of the application's append-only log at the time.
 
-> [Build with Pear - Episode 03: Releasing Pear Applications](https://www.youtube.com/watch?v=OTwY_avUPyI)
+{% embed url="https://www.youtube.com/watch?v=OTwY_avUPyI" %} Build with Pear - Episode 03: Releasing Pear Applications {% embeded %}
 
 `pear run <key>` opens the application.
 
diff --git a/guide/sharing-a-pear-app.md b/guide/sharing-a-pear-app.md
index f305249..b9d337c 100644
--- a/guide/sharing-a-pear-app.md
+++ b/guide/sharing-a-pear-app.md
@@ -2,7 +2,7 @@
 
 Applications can be shared with peers by seeding them to the network from an efficient local data structure (a [hypercore](../building-blocks/hypercore.md)). We call the mirroring of a local file system into the Pear platform Application Storage "staging". Seeding is sharing an app from a machine over the Distributed Hash Table (DHT) (via [hyperswarm](../building-blocks/hyperswarm.md)) so that other peers can replicate, consume and reseed the application.
 
-> [Build with Pear - Episode 02: Sharing Pear Applications](https://www.youtube.com/watch?v=BEadqmp7lA0)
+{% embed url="https://www.youtube.com/watch?v=BEadqmp7lA0" %} Build with Pear - Episode 02: Sharing Pear Applications {% embeded %}
 
 This guide can either follow on from, [Making a Pear Desktop Application](./making-a-pear-desktop-app.md), [Making a Pear Terminal Application](./making-a-pear-terminal-app.md), or get setup quickly with the following:
 
diff --git a/guide/starting-a-pear-desktop-project.md b/guide/starting-a-pear-desktop-project.md
index a1623a8..36b49db 100644
--- a/guide/starting-a-pear-desktop-project.md
+++ b/guide/starting-a-pear-desktop-project.md
@@ -2,7 +2,7 @@
 
 This section shows how to generate, configure, and develop a Pear desktop project, in preparation for [Making a Pear Desktop Application](./making-a-pear-desktop-app.md).
 
-> [Build with Pear - Episode 01: Developing with Pear](https://www.youtube.com/watch?v=y2G97xz78gU)
+{% embed url="https://www.youtube.com/watch?v=y2G97xz78gU" %} Build with Pear - Episode 01: Developing with Pear {% embeded %}
 
 ## Step 1. Initialization
 
diff --git a/guide/starting-a-pear-terminal-project.md b/guide/starting-a-pear-terminal-project.md
index 71f0a35..1e3fa02 100644
--- a/guide/starting-a-pear-terminal-project.md
+++ b/guide/starting-a-pear-terminal-project.md
@@ -1,6 +1,6 @@
 # Starting a Pear Terminal Project
 
-> [Build with Pear - Episode 04: Pear Terminal Applications](https://www.youtube.com/watch?v=UoGJ7PtAwtI)
+{% embed url="https://www.youtube.com/watch?v=UoGJ7PtAwtI" %} Build with Pear - Episode 04: Pear Terminal Applications {% embeded %}
 
 ## Step 1. Init
 
diff --git a/howto/connect-to-many-peers-by-topic-with-hyperswarm.md b/howto/connect-to-many-peers-by-topic-with-hyperswarm.md
index b83048b..ef189c2 100644
--- a/howto/connect-to-many-peers-by-topic-with-hyperswarm.md
+++ b/howto/connect-to-many-peers-by-topic-with-hyperswarm.md
@@ -4,7 +4,7 @@ In the former example, two peers connected directly using the first peer's publi
 
 The [Hyperswarm](../building-blocks/hyperswarm.md) module provides a higher-level interface over the underlying DHT, abstracting away the mechanics of establishing and maintaining connections. Instead, 'join' topics, and the swarm discovers peers automatically. It also handles reconnections in the event of failures.
 
-> [Build with Pear - Episode 01: Developing with Pear](https://www.youtube.com/watch?v=y2G97xz78gU)
+{% embed url="https://www.youtube.com/watch?v=y2G97xz78gU" %} Build with Pear - Episode 01: Developing with Pear {% embeded %}
 
 In the [How to connect two Peers by key with Hyperdht](./connect-two-peers-by-key-with-hyperdht.md), we needed to explicitly indicate which peer was the server and which was the client. By using Hyperswarm, we create two peers, have them join a common topic, and let the swarm deal with connections.
 
diff --git a/howto/replicate-and-persist-with-hypercore.md b/howto/replicate-and-persist-with-hypercore.md
index 402ff8a..586afae 100644
--- a/howto/replicate-and-persist-with-hypercore.md
+++ b/howto/replicate-and-persist-with-hypercore.md
@@ -4,7 +4,7 @@ In the HyperDHT How-to ([Connect Two Peers](./connect-two-peers-by-key-with-hype
 
 [`Hypercore`](../building-blocks/hypercore.md) is a secure, distributed append-only log. It is built for sharing enormous datasets and streams of real-time data. It has a secure transport protocol, making it easy to build fast and scalable peer-to-peer applications.
 
-> [Build with Pear - Episode 05: Replication and Persistence](https://www.youtube.com/watch?v=5t2mOi0BeDg)
+{% embed url="https://www.youtube.com/watch?v=5t2mOi0BeDg" %} Build with Pear - Episode 05: Replication and Persistence {% embeded %}
 
 In this guide we'll extend the ephemeral chat example in [Connect Many Peers](./connect-to-many-peers-by-topic-with-hyperswarm.md) but using Hypercore to add many significant new features:
 
diff --git a/lib/docs-viewer.js b/lib/docs-viewer.js
index 61d16f5..884bac8 100644
--- a/lib/docs-viewer.js
+++ b/lib/docs-viewer.js
@@ -68,10 +68,20 @@ customElements.define('docs-viewer', class extends HTMLElement {
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
   }
 
+  patchSyntax(input) {
+    // remove backticks inside link, example: [`hypercore`] -> [hypercore]
+    let output = input.replace(/\[`([^`]+)`\]/g, "[$1]")
+
+    // remove gitbook embed syntax
+    output =  output.replace(/{% embed url="([^"]+)" %}\s*(.*?)\s*{% embeded %}/g, '> [$2]($1)')
+
+    return output
+  }
+
   async load (page = '/') {
     if (page === '/') page = this.entry
     const html = await fetch(page)
-    const text = await marked.parse((await html.text()).replace(/\[`([^`]+)`\]/g, "[$1]")) // remove backticks inside link, example: [`hypercore`] -> [hypercore]
+    const text = await marked.parse(this.patchSyntax(await html.text()))
     this.panel.querySelector('slot').innerHTML = text
     this.panel.style.display = ''
   }