From b83f1e372490acd86c6ddcb7b9f5b10b2d50b4ab Mon Sep 17 00:00:00 2001
From: Ines Montani <ines@ines.io>
Date: Fri, 6 Oct 2023 14:22:43 +0200
Subject: [PATCH] Inline displaCy visualizations in docs (#13050) [ci skip]

---
 .../images/displacy-long2.html                |   0
 website/docs/usage/101/_named-entities.mdx    |   8 +-
 website/docs/usage/101/_pos-deps.mdx          |   7 +-
 website/docs/usage/linguistic-features.mdx    |  15 +-
 website/docs/usage/rule-based-matching.mdx    |   7 +-
 website/docs/usage/saving-loading.mdx         |   8 +-
 website/docs/usage/v3-3.mdx                   |   8 +-
 website/docs/usage/visualizers.mdx            |  32 +--
 ...-founded.html => displacy-dep-founded.svg} |   0
 .../public/images/displacy-ent-custom.html    |  80 -------
 website/public/images/displacy-ent-snek.html  |  59 -----
 website/public/images/displacy-ent1.html      |  84 -------
 website/public/images/displacy-ent2.html      |  86 -------
 .../{displacy-long.html => displacy-long.svg} |   0
 website/public/images/displacy-long2.svg      | 212 ++++++++++++++++++
 .../public/images/displacy-span-custom.html   |  84 -------
 website/public/images/displacy-span.html      | 123 ----------
 website/src/components/embed.js               |  18 +-
 website/src/remark.js                         |   4 +-
 website/src/styles/embed.module.sass          |   8 +
 20 files changed, 273 insertions(+), 570 deletions(-)
 rename website/{public => docs}/images/displacy-long2.html (100%)
 rename website/public/images/{displacy-dep-founded.html => displacy-dep-founded.svg} (100%)
 delete mode 100644 website/public/images/displacy-ent-custom.html
 delete mode 100644 website/public/images/displacy-ent-snek.html
 delete mode 100644 website/public/images/displacy-ent1.html
 delete mode 100644 website/public/images/displacy-ent2.html
 rename website/public/images/{displacy-long.html => displacy-long.svg} (100%)
 create mode 100644 website/public/images/displacy-long2.svg
 delete mode 100644 website/public/images/displacy-span-custom.html
 delete mode 100644 website/public/images/displacy-span.html

diff --git a/website/public/images/displacy-long2.html b/website/docs/images/displacy-long2.html
similarity index 100%
rename from website/public/images/displacy-long2.html
rename to website/docs/images/displacy-long2.html
diff --git a/website/docs/usage/101/_named-entities.mdx b/website/docs/usage/101/_named-entities.mdx
index 9ae4134d8..da43c0ddd 100644
--- a/website/docs/usage/101/_named-entities.mdx
+++ b/website/docs/usage/101/_named-entities.mdx
@@ -31,8 +31,6 @@ for ent in doc.ents:
 Using spaCy's built-in [displaCy visualizer](/usage/visualizers), here's what
 our example sentence and its named entities look like:
 
-<Iframe
-  title="displaCy visualization of entities"
-  src="/images/displacy-ent1.html"
-  height={100}
-/>
+<Standalone height={120}>
+<div style={{lineHeight: 2.5, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18}}><mark style={{ background: '#7aecec', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Apple <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark> is looking at buying <mark style={{ background: '#feca74', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>U.K. <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>GPE</span></mark> startup for <mark style={{ background: '#e4e7d2', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>$1 billion <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>MONEY</span></mark></div>
+</Standalone>
diff --git a/website/docs/usage/101/_pos-deps.mdx b/website/docs/usage/101/_pos-deps.mdx
index bedb6ce2c..db1e12885 100644
--- a/website/docs/usage/101/_pos-deps.mdx
+++ b/website/docs/usage/101/_pos-deps.mdx
@@ -56,8 +56,7 @@ for token in doc:
 Using spaCy's built-in [displaCy visualizer](/usage/visualizers), here's what
 our example sentence and its dependencies look like:
 
-<Iframe
-  title="displaCy visualization of dependencies and entities"
-  src="/images/displacy-long.html"
-  height={450}
+<ImageScrollable
+  src="/images/displacy-long.svg"
+  width={1975}
 />
diff --git a/website/docs/usage/linguistic-features.mdx b/website/docs/usage/linguistic-features.mdx
index a58e8a241..47259ce15 100644
--- a/website/docs/usage/linguistic-features.mdx
+++ b/website/docs/usage/linguistic-features.mdx
@@ -290,10 +290,9 @@ for token in doc:
 | toward        | `prep`     | shift     | `NOUN`   | manufacturers           |
 | manufacturers | `pobj`     | toward    | `ADP`    |                         |
 
-<Iframe
-  title="displaCy visualization of dependencies and entities 2"
-  src="/images/displacy-long2.html"
-  height={450}
+<ImageScrollable
+  src="/images/displacy-long2.svg"
+  width={1275}
 />
 
 Because the syntactic relations form a tree, every word has **exactly one
@@ -709,11 +708,9 @@ doc = nlp(text)
 displacy.serve(doc, style="ent")
 ```
 
-<Iframe
-  title="displaCy visualizer for entities"
-  src="/images/displacy-ent2.html"
-  height={180}
-/>
+<Standalone height={180}>
+<div style={{lineHeight: 2.5, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18}}>When <mark style={{ background: '#aa9cfc', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Sebastian Thrun <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>PERSON</span></mark> started working on self-driving cars at <mark style={{ background: '#7aecec', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Google <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark> in <mark style={{ background: '#bfe1d9', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>2007 <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>DATE</span></mark>, few people outside of the company took him seriously.</div>
+</Standalone>
 
 ## Entity Linking {id="entity-linking"}
 
diff --git a/website/docs/usage/rule-based-matching.mdx b/website/docs/usage/rule-based-matching.mdx
index d01107ea2..e5b98da3a 100644
--- a/website/docs/usage/rule-based-matching.mdx
+++ b/website/docs/usage/rule-based-matching.mdx
@@ -1144,10 +1144,9 @@ relations and tokens we want to match:
 > displacy.serve(doc)
 > ```
 
-<Iframe
-  title="displaCy visualization of dependencies"
-  src="/images/displacy-dep-founded.html"
-  height={450}
+<ImageScrollable
+  src="/images/displacy-dep-founded.svg"
+  width={925}
 />
 
 The relations we're interested in are:
diff --git a/website/docs/usage/saving-loading.mdx b/website/docs/usage/saving-loading.mdx
index aad8ea353..26f59750b 100644
--- a/website/docs/usage/saving-loading.mdx
+++ b/website/docs/usage/saving-loading.mdx
@@ -586,11 +586,9 @@ After installing the package, the custom colors will be used when visualizing
 text with `displacy`. Whenever the label `SNEK` is assigned, it will be
 displayed in `#3dff74`.
 
-<Iframe
-  title="displaCy visualization of entities"
-  src="/images/displacy-ent-snek.html"
-  height={100}
-/>
+<Standalone height={100}>
+<div style={{lineHeight: 2.5, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18}}>🌱🌿 <mark style={{ background: '#3dff74', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>🐍 <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>SNEK</span></mark> ____ 🌳🌲 ____ <mark style={{ background: '#cfc5ff', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>👨‍🌾 <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>HUMAN</span></mark> 🏘️</div>
+</Standalone>
 
 ## Saving, loading and distributing trained pipelines {id="models"}
 
diff --git a/website/docs/usage/v3-3.mdx b/website/docs/usage/v3-3.mdx
index d692475de..fd211e6d2 100644
--- a/website/docs/usage/v3-3.mdx
+++ b/website/docs/usage/v3-3.mdx
@@ -77,11 +77,9 @@ doc.spans["custom"] = [Span(doc, 3, 6, "ORG"), Span(doc, 5, 6, "GPE")]
 displacy.serve(doc, style="span", options={"spans_key": "custom"})
 ```
 
-<Iframe
-  title="displaCy visualizer for overlapping spans"
-  src="/images/displacy-span.html"
-  height={180}
-/>
+<Standalone height={100}>
+<div style={{ lineHeight: 2.5, direction: 'ltr', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18 }}>Welcome to the <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>Bank<span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#7aecec', top: 40, height: 4, borderTopLeftRadius: 3, borderBottomLeftRadius: 3, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}><span style={{ background: '#7aecec', color: '#000', top: '-0.5em', padding: '2px 3px', position: 'absolute', fontSize: '0.6em', fontWeight: 'bold', lineHeight: 1, borderRadius: 3 }}>ORG</span></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>of <span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>China<span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#feca74', top: 57, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#feca74', top: 57, height: 4, borderTopLeftRadius: 3, borderBottomLeftRadius: 3, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}><span style={{ background: '#feca74', color: '#000', top: '-0.5em', padding: '2px 3px', position: 'absolute', fontSize: '0.6em', fontWeight: 'bold', lineHeight: 1, borderRadius: 3 }}>GPE</span></span></span>.</div>
+</Standalone>
 
 ## Additional features and improvements
 
diff --git a/website/docs/usage/visualizers.mdx b/website/docs/usage/visualizers.mdx
index e73c4a16a..2905ba2bd 100644
--- a/website/docs/usage/visualizers.mdx
+++ b/website/docs/usage/visualizers.mdx
@@ -119,11 +119,9 @@ doc = nlp(text)
 displacy.serve(doc, style="ent")
 ```
 
-<Iframe
-  title="displaCy visualizer for entities"
-  src="/images/displacy-ent2.html"
-  height={180}
-/>
+<Standalone height={180}>
+<div style={{lineHeight: 2.5, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18}}>When <mark style={{ background: '#aa9cfc', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Sebastian Thrun <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>PERSON</span></mark> started working on self-driving cars at <mark style={{ background: '#7aecec', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Google <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark> in <mark style={{ background: '#bfe1d9', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>2007 <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>DATE</span></mark>, few people outside of the company took him seriously.</div>
+</Standalone>
 
 The entity visualizer lets you customize the following `options`:
 
@@ -148,11 +146,9 @@ use the `colors` setting to add your own colors for them.
 > displacy.serve(doc, style="ent", options=options)
 > ```
 
-<Iframe
-  title="displaCy visualizer for entities (custom styling)"
-  src="/images/displacy-ent-custom.html"
-  height={225}
-/>
+<Standalone height={225}>
+<div style={{lineHeight: 2.5, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18}}>But <mark style={{ background: 'linear-gradient(90deg, #aa9cfc, #fc9ce7)', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Google <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark> is starting from behind. The company made a late push into hardware, and <mark style={{ background: 'linear-gradient(90deg, #aa9cfc, #fc9ce7)', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Apple <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark>’s Siri, available on iPhones, and <mark style={{ background: 'linear-gradient(90deg, #aa9cfc, #fc9ce7)', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Amazon <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark>’s Alexa software, which runs on its Echo and Dot devices, have clear leads in consumer adoption.</div>
+</Standalone>
 
 The above example uses a little trick: Since the background color values are
 added as the `background` style attribute, you can use any
@@ -197,11 +193,9 @@ doc.spans["sc"] = [
 displacy.serve(doc, style="span")
 ```
 
-<Iframe
-  title="displaCy visualizer for overlapping spans"
-  src="/images/displacy-span.html"
-  height={180}
-/>
+<Standalone height={100}>
+<div style={{ lineHeight: 2.5, direction: 'ltr', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18 }}>Welcome to the <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>Bank<span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#7aecec', top: 40, height: 4, borderTopLeftRadius: 3, borderBottomLeftRadius: 3, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}><span style={{ background: '#7aecec', color: '#000', top: '-0.5em', padding: '2px 3px', position: 'absolute', fontSize: '0.6em', fontWeight: 'bold', lineHeight: 1, borderRadius: 3 }}>ORG</span></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>of <span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>China<span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#feca74', top: 57, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#feca74', top: 57, height: 4, borderTopLeftRadius: 3, borderBottomLeftRadius: 3, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}><span style={{ background: '#feca74', color: '#000', top: '-0.5em', padding: '2px 3px', position: 'absolute', fontSize: '0.6em', fontWeight: 'bold', lineHeight: 1, borderRadius: 3 }}>GPE</span></span></span>.</div>
+</Standalone>
 
 The span visualizer lets you customize the following `options`:
 
@@ -223,11 +217,9 @@ specify which one displaCy should use with `spans_key` (`sc` is the default).
 > displacy.serve(doc, style="span", options=options)
 > ```
 
-<Iframe
-  title="displaCy visualizer for spans (custom spans_key)"
-  src="/images/displacy-span-custom.html"
-  height={225}
-/>
+<Standalone height={100}>
+<div style={{ lineHeight: 2.5, direction: 'ltr', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18 }}>Welcome to the <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>Bank<span style={{ background: '#ddd', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#ddd', top: 40, height: 4, borderTopLeftRadius: 3, borderBottomLeftRadius: 3, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}><span style={{ background: '#ddd', color: '#000', top: '-0.5em', padding: '2px 3px', position: 'absolute', fontSize: '0.6em', fontWeight: 'bold', lineHeight: 1, borderRadius: 3 }}>BANK</span></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>of <span style={{ background: '#ddd', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>China<span style={{ background: '#ddd', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span></span>.</div>
+</Standalone>
 
 ## Using displaCy in Jupyter notebooks {id="jupyter"}
 
diff --git a/website/public/images/displacy-dep-founded.html b/website/public/images/displacy-dep-founded.svg
similarity index 100%
rename from website/public/images/displacy-dep-founded.html
rename to website/public/images/displacy-dep-founded.svg
diff --git a/website/public/images/displacy-ent-custom.html b/website/public/images/displacy-ent-custom.html
deleted file mode 100644
index 5da472fdb..000000000
--- a/website/public/images/displacy-ent-custom.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<div
-    class="entities"
-    style="
-        line-height: 2.5;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        font-size: 18px;
-    "
-    >But
-    <mark
-        class="entity"
-        style="
-            background: linear-gradient(90deg, #aa9cfc, #fc9ce7);
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-        >Google
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >ORG</span
-        ></mark
-    >is starting from behind. The company made a late push into hardware, and
-    <mark
-        class="entity"
-        style="
-            background: linear-gradient(90deg, #aa9cfc, #fc9ce7);
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-        >Apple
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >ORG</span
-        ></mark
-    >’s Siri, available on iPhones, and
-    <mark
-        class="entity"
-        style="
-            background: linear-gradient(90deg, #aa9cfc, #fc9ce7);
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-        >Amazon
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >ORG</span
-        ></mark
-    >’s Alexa software, which runs on its Echo and Dot devices, have clear leads in consumer
-    adoption.</div
->
diff --git a/website/public/images/displacy-ent-snek.html b/website/public/images/displacy-ent-snek.html
deleted file mode 100644
index 6604d9b78..000000000
--- a/website/public/images/displacy-ent-snek.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<div
-    class="entities"
-    style="
-        line-height: 2.5;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        font-size: 16px;
-    "
->
-    🌱🌿
-    <mark
-        class="entity"
-        style="
-            background: #3dff74;
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-        >🐍
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >SNEK</span
-        ></mark
-    >
-    ____ 🌳🌲 ____
-    <mark
-        class="entity"
-        style="
-            background: #cfc5ff;
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-        >👨‍🌾
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >HUMAN</span
-        ></mark
-    >
-    🏘️
-</div>
diff --git a/website/public/images/displacy-ent1.html b/website/public/images/displacy-ent1.html
deleted file mode 100644
index 9fde5cf88..000000000
--- a/website/public/images/displacy-ent1.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<div
-    class="entities"
-    style="
-        line-height: 2.5;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        font-size: 16px;
-    "
->
-    <mark
-        class="entity"
-        style="
-            background: #7aecec;
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-    >
-        Apple
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >ORG</span
-        >
-    </mark>
-    is looking at buying
-    <mark
-        class="entity"
-        style="
-            background: #feca74;
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-    >
-        U.K.
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >GPE</span
-        >
-    </mark>
-    startup for
-    <mark
-        class="entity"
-        style="
-            background: #e4e7d2;
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-    >
-        $1 billion
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >MONEY</span
-        >
-    </mark>
-</div>
diff --git a/website/public/images/displacy-ent2.html b/website/public/images/displacy-ent2.html
deleted file mode 100644
index 01ab5c2bf..000000000
--- a/website/public/images/displacy-ent2.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<div
-    class="entities"
-    style="
-        line-height: 2.5;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        font-size: 18px;
-    "
->
-    When
-    <mark
-        class="entity"
-        style="
-            background: #aa9cfc;
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-    >
-        Sebastian Thrun
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >PERSON</span
-        >
-    </mark>
-    started working on self-driving cars at
-    <mark
-        class="entity"
-        style="
-            background: #7aecec;
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-    >
-        Google
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >ORG</span
-        >
-    </mark>
-    in
-    <mark
-        class="entity"
-        style="
-            background: #bfe1d9;
-            padding: 0.45em 0.6em;
-            margin: 0 0.25em;
-            line-height: 1;
-            border-radius: 0.35em;
-        "
-    >
-        2007
-        <span
-            style="
-                font-size: 0.8em;
-                font-weight: bold;
-                line-height: 1;
-                border-radius: 0.35em;
-                text-transform: uppercase;
-                vertical-align: middle;
-                margin-left: 0.5rem;
-            "
-            >DATE</span
-        >
-    </mark>
-    , few people outside of the company took him seriously.
-</div>
diff --git a/website/public/images/displacy-long.html b/website/public/images/displacy-long.svg
similarity index 100%
rename from website/public/images/displacy-long.html
rename to website/public/images/displacy-long.svg
diff --git a/website/public/images/displacy-long2.svg b/website/public/images/displacy-long2.svg
new file mode 100644
index 000000000..c428bd2cb
--- /dev/null
+++ b/website/public/images/displacy-long2.svg
@@ -0,0 +1,212 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    id="0"
+    class="displacy"
+    width="1275"
+    height="399.5"
+    style="
+        max-width: none;
+        height: 399.5px;
+        color: #000000;
+        background: #ffffff;
+        font-family: Arial;
+    "
+>
+    <text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
+        <tspan class="displacy-word" fill="currentColor" x="50">Autonomous</tspan>
+        <tspan class="displacy-tag" dy="2em" fill="currentColor" x="50">ADJ</tspan>
+    </text>
+
+    <text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
+        <tspan class="displacy-word" fill="currentColor" x="225">cars</tspan>
+        <tspan class="displacy-tag" dy="2em" fill="currentColor" x="225">NOUN</tspan>
+    </text>
+
+    <text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
+        <tspan class="displacy-word" fill="currentColor" x="400">shift</tspan>
+        <tspan class="displacy-tag" dy="2em" fill="currentColor" x="400">VERB</tspan>
+    </text>
+
+    <text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
+        <tspan class="displacy-word" fill="currentColor" x="575">insurance</tspan>
+        <tspan class="displacy-tag" dy="2em" fill="currentColor" x="575">NOUN</tspan>
+    </text>
+
+    <text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
+        <tspan class="displacy-word" fill="currentColor" x="750">liability</tspan>
+        <tspan class="displacy-tag" dy="2em" fill="currentColor" x="750">NOUN</tspan>
+    </text>
+
+    <text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
+        <tspan class="displacy-word" fill="currentColor" x="925">toward</tspan>
+        <tspan class="displacy-tag" dy="2em" fill="currentColor" x="925">ADP</tspan>
+    </text>
+
+    <text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
+        <tspan class="displacy-word" fill="currentColor" x="1100">manufacturers</tspan>
+        <tspan class="displacy-tag" dy="2em" fill="currentColor" x="1100">NOUN</tspan>
+    </text>
+
+    <g class="displacy-arrow">
+        <path
+            class="displacy-arc"
+            id="arrow-0-0"
+            stroke-width="2px"
+            d="M70,264.5 C70,177.0 215.0,177.0 215.0,264.5"
+            fill="none"
+            stroke="currentColor"
+        ></path>
+        <text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
+            <textpath
+                xlink:href="#arrow-0-0"
+                class="displacy-label"
+                startOffset="50%"
+                fill="currentColor"
+                text-anchor="middle"
+            >
+                amod
+            </textpath>
+        </text>
+        <path
+            class="displacy-arrowhead"
+            d="M70,266.5 L62,254.5 78,254.5"
+            fill="currentColor"
+        ></path>
+    </g>
+
+    <g class="displacy-arrow">
+        <path
+            class="displacy-arc"
+            id="arrow-0-1"
+            stroke-width="2px"
+            d="M245,264.5 C245,177.0 390.0,177.0 390.0,264.5"
+            fill="none"
+            stroke="currentColor"
+        ></path>
+        <text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
+            <textpath
+                xlink:href="#arrow-0-1"
+                class="displacy-label"
+                startOffset="50%"
+                fill="currentColor"
+                text-anchor="middle"
+            >
+                nsubj
+            </textpath>
+        </text>
+        <path
+            class="displacy-arrowhead"
+            d="M245,266.5 L237,254.5 253,254.5"
+            fill="currentColor"
+        ></path>
+    </g>
+
+    <g class="displacy-arrow">
+        <path
+            class="displacy-arc"
+            id="arrow-0-2"
+            stroke-width="2px"
+            d="M595,264.5 C595,177.0 740.0,177.0 740.0,264.5"
+            fill="none"
+            stroke="currentColor"
+        ></path>
+        <text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
+            <textpath
+                xlink:href="#arrow-0-2"
+                class="displacy-label"
+                startOffset="50%"
+                fill="currentColor"
+                text-anchor="middle"
+            >
+                compound
+            </textpath>
+        </text>
+        <path
+            class="displacy-arrowhead"
+            d="M595,266.5 L587,254.5 603,254.5"
+            fill="currentColor"
+        ></path>
+    </g>
+
+    <g class="displacy-arrow">
+        <path
+            class="displacy-arc"
+            id="arrow-0-3"
+            stroke-width="2px"
+            d="M420,264.5 C420,89.5 745.0,89.5 745.0,264.5"
+            fill="none"
+            stroke="currentColor"
+        ></path>
+        <text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
+            <textpath
+                xlink:href="#arrow-0-3"
+                class="displacy-label"
+                startOffset="50%"
+                fill="currentColor"
+                text-anchor="middle"
+            >
+                dobj
+            </textpath>
+        </text>
+        <path
+            class="displacy-arrowhead"
+            d="M745.0,266.5 L753.0,254.5 737.0,254.5"
+            fill="currentColor"
+        ></path>
+    </g>
+
+    <g class="displacy-arrow">
+        <path
+            class="displacy-arc"
+            id="arrow-0-4"
+            stroke-width="2px"
+            d="M420,264.5 C420,2.0 925.0,2.0 925.0,264.5"
+            fill="none"
+            stroke="currentColor"
+        ></path>
+        <text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
+            <textpath
+                xlink:href="#arrow-0-4"
+                class="displacy-label"
+                startOffset="50%"
+                fill="currentColor"
+                text-anchor="middle"
+            >
+                prep
+            </textpath>
+        </text>
+        <path
+            class="displacy-arrowhead"
+            d="M925.0,266.5 L933.0,254.5 917.0,254.5"
+            fill="currentColor"
+        ></path>
+    </g>
+
+    <g class="displacy-arrow">
+        <path
+            class="displacy-arc"
+            id="arrow-0-5"
+            stroke-width="2px"
+            d="M945,264.5 C945,177.0 1090.0,177.0 1090.0,264.5"
+            fill="none"
+            stroke="currentColor"
+        ></path>
+        <text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
+            <textpath
+                xlink:href="#arrow-0-5"
+                class="displacy-label"
+                startOffset="50%"
+                fill="currentColor"
+                text-anchor="middle"
+            >
+                pobj
+            </textpath>
+        </text>
+        <path
+            class="displacy-arrowhead"
+            d="M1090.0,266.5 L1098.0,254.5 1082.0,254.5"
+            fill="currentColor"
+        ></path>
+    </g>
+</svg>
diff --git a/website/public/images/displacy-span-custom.html b/website/public/images/displacy-span-custom.html
deleted file mode 100644
index 10cb6dd2d..000000000
--- a/website/public/images/displacy-span-custom.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<div
-    class="spans"
-    style="
-        line-height: 2.5;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        font-size: 18px;
-        direction: ltr;
-    "
->
-    Welcome to the
-    <span style="font-weight: bold; display: inline-block; position: relative">
-        Bank
-        <span
-            style="
-                background: #ddd;
-                top: 40px;
-                height: 4px;
-                left: -1px;
-                width: calc(100% + 2px);
-                position: absolute;
-            "
-        >
-        </span>
-        <span
-            style="
-                background: #ddd;
-                top: 40px;
-                height: 4px;
-                border-top-left-radius: 3px;
-                border-bottom-left-radius: 3px;
-                left: -1px;
-                width: calc(100% + 2px);
-                position: absolute;
-            "
-        >
-            <span
-                style="
-                    background: #ddd;
-                    color: #000;
-                    top: -0.5em;
-                    padding: 2px 3px;
-                    position: absolute;
-                    font-size: 0.6em;
-                    font-weight: bold;
-                    line-height: 1;
-                    border-radius: 3px;
-                "
-            >
-                BANK
-            </span>
-        </span>
-    </span>
-    <span style="font-weight: bold; display: inline-block; position: relative">
-        of
-        <span
-            style="
-                background: #ddd;
-                top: 40px;
-                height: 4px;
-                left: -1px;
-                width: calc(100% + 2px);
-                position: absolute;
-            "
-        >
-        </span>
-    </span>
-    <span style="font-weight: bold; display: inline-block; position: relative">
-        China
-
-        <span
-            style="
-                background: #ddd;
-                top: 40px;
-                height: 4px;
-                left: -1px;
-                width: calc(100% + 2px);
-                position: absolute;
-            "
-        >
-        </span>
-    </span>
-    .
-</div>
diff --git a/website/public/images/displacy-span.html b/website/public/images/displacy-span.html
deleted file mode 100644
index cfee1dc7e..000000000
--- a/website/public/images/displacy-span.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<div
-    class="spans"
-    style="
-        line-height: 2.5;
-        direction: ltr;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        font-size: 18px;
-    "
->
-    Welcome to the
-    <span style="font-weight: bold; display: inline-block; position: relative">
-        Bank
-        <span
-            style="
-                background: #7aecec;
-                top: 40px;
-                height: 4px;
-                left: -1px;
-                width: calc(100% + 2px);
-                position: absolute;
-            "
-        >
-        </span>
-        <span
-            style="
-                background: #7aecec;
-                top: 40px;
-                height: 4px;
-                border-top-left-radius: 3px;
-                border-bottom-left-radius: 3px;
-                left: -1px;
-                width: calc(100% + 2px);
-                position: absolute;
-            "
-        >
-            <span
-                style="
-                    background: #7aecec;
-                    color: #000;
-                    top: -0.5em;
-                    padding: 2px 3px;
-                    position: absolute;
-                    font-size: 0.6em;
-                    font-weight: bold;
-                    line-height: 1;
-                    border-radius: 3px;
-                "
-            >
-                ORG
-            </span>
-        </span>
-    </span>
-    <span style="font-weight: bold; display: inline-block; position: relative">
-        of
-
-        <span
-            style="
-                background: #7aecec;
-                top: 40px;
-                height: 4px;
-                left: -1px;
-                width: calc(100% + 2px);
-                position: absolute;
-            "
-        >
-        </span>
-    </span>
-    <span style="font-weight: bold; display: inline-block; position: relative">
-        China
-        <span
-            style="
-                background: #7aecec;
-                top: 40px;
-                height: 4px;
-                left: -1px;
-                width: calc(100% + 2px);
-                position: absolute;
-            "
-        >
-        </span>
-        <span
-            style="
-                background: #feca74;
-                top: 57px;
-                height: 4px;
-                left: -1px;
-                width: calc(100% + 2px);
-                position: absolute;
-            "
-        >
-        </span>
-        <span
-            style="
-                background: #feca74;
-                top: 57px;
-                height: 4px;
-                border-top-left-radius: 3px;
-                border-bottom-left-radius: 3px;
-                left: -1px;
-                width: calc(100% + 2px);
-                position: absolute;
-            "
-        >
-            <span
-                style="
-                    background: #feca74;
-                    color: #000;
-                    top: -0.5em;
-                    padding: 2px 3px;
-                    position: absolute;
-                    font-size: 0.6em;
-                    font-weight: bold;
-                    line-height: 1;
-                    border-radius: 3px;
-                "
-            >
-                GPE
-            </span>
-        </span>
-    </span>
-    .
-</div>
diff --git a/website/src/components/embed.js b/website/src/components/embed.js
index ad15a0b8b..5e92ca535 100644
--- a/website/src/components/embed.js
+++ b/website/src/components/embed.js
@@ -107,6 +107,22 @@ const Image = ({ src, alt, title, href, ...props }) => {
     )
 }
 
+const ImageScrollable = ({ src, alt, width, ...props }) => {
+    return (
+        <figure className={classNames(classes.standalone, classes.scrollable)}>
+            <img className={classes['image-scrollable']} src={src} alt={alt} width={width} height="auto" />
+        </figure>
+    )
+}
+
+const Standalone = ({ height, children, ...props }) => {
+    return (
+        <figure className={classes.standalone} style={{ height }}>
+            {children}
+        </figure>
+    )
+}
+
 const ImageFill = ({ image, ...props }) => {
     return (
         <span
@@ -137,4 +153,4 @@ const GoogleSheet = ({ id, link, height, button = 'View full table' }) => {
     )
 }
 
-export { YouTube, SoundCloud, Iframe, Image, ImageFill, GoogleSheet }
+export { YouTube, SoundCloud, Iframe, Image, ImageFill, ImageScrollable, GoogleSheet, Standalone }
diff --git a/website/src/remark.js b/website/src/remark.js
index 7e5499b01..be787eb84 100644
--- a/website/src/remark.js
+++ b/website/src/remark.js
@@ -13,7 +13,7 @@ import Aside from './components/aside'
 import Button from './components/button'
 import Tag from './components/tag'
 import Grid from './components/grid'
-import { YouTube, SoundCloud, Iframe, Image, GoogleSheet } from './components/embed'
+import { YouTube, SoundCloud, Iframe, Image, ImageScrollable, GoogleSheet, Standalone } from './components/embed'
 import Project from './widgets/project'
 import { Integration, IntegrationLogo } from './widgets/integration.js'
 import { Logos, Colors, Patterns } from './widgets/styleguide'
@@ -90,6 +90,8 @@ export const remarkComponents = {
      * For regular img elements it is not possible to pass properties
      */
     Image,
+    ImageScrollable,
+    Standalone,
 
     Label,
     Logos,
diff --git a/website/src/styles/embed.module.sass b/website/src/styles/embed.module.sass
index 82b7408ca..01814421f 100644
--- a/website/src/styles/embed.module.sass
+++ b/website/src/styles/embed.module.sass
@@ -26,12 +26,20 @@
     padding: var(--spacing-xs)
     margin-bottom: var(--spacing-md)
 
+.scrollable
+    max-width: 100%
+    overflow: auto
+
 .image
     position: relative
     display: block
     max-width: 100%
     margin: 0 auto
 
+.image-scrollable
+    display: block
+    max-width: fit-content
+
 .figure-fill
     display: block
     position: relative