diff --git a/app/components/rendered-html.hbs b/app/components/rendered-html.hbs
new file mode 100644
index 00000000000..0325c7e09aa
--- /dev/null
+++ b/app/components/rendered-html.hbs
@@ -0,0 +1,7 @@
+{{!--
+  This component renders raw HTML. Be very careful with this since it
+  can enable cross-site scripting attacks!
+--}}
+<div local-class="wrapper" ...attributes {{highlight-syntax selector="pre > code"}}>
+  {{html-safe @html}}
+</div>
\ No newline at end of file
diff --git a/app/components/rendered-html.module.css b/app/components/rendered-html.module.css
new file mode 100644
index 00000000000..1836bffaca0
--- /dev/null
+++ b/app/components/rendered-html.module.css
@@ -0,0 +1,38 @@
+.wrapper {
+    line-height: 1.5;
+    overflow-wrap: break-word;
+
+    > :first-child {
+        margin-top: 0;
+    }
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    pre {
+        overflow-x: auto;
+    }
+
+    p {
+        code {
+            background-color: #fff;
+            padding: 0 2px;
+        }
+    }
+
+    table {
+        border-collapse: collapse;
+        display: block;
+        overflow-x: auto;
+
+        th, td {
+            border: 1px solid #dfe2e5;
+            padding: 6px 13px;
+        }
+    }
+}
diff --git a/app/styles/crate/version.module.css b/app/styles/crate/version.module.css
index f2dc90a894d..a547a0daba2 100644
--- a/app/styles/crate/version.module.css
+++ b/app/styles/crate/version.module.css
@@ -66,7 +66,7 @@ div.header {
 .docs {
     @media only screen and (min-width: 890px) {
         flex: 7;
-        padding-right: 40px;
+        padding-right: 20px;
         max-width: 640px;
     }
 }
@@ -194,35 +194,9 @@ div.header {
     margin-bottom: 40px;
 }
 
-.crate-readme {
-    line-height: 1.5;
-    overflow-wrap: break-word;
-
-    img {
-        max-width: 100%;
-    }
-
-    pre {
-        overflow-x: auto;
-    }
-
-    p {
-        code {
-            background-color: #fff;
-            padding: 0 2px;
-        }
-    }
-
-    table {
-        border-collapse: collapse;
-        display: block;
-        overflow-x: auto;
-
-        th, td {
-            border: 1px solid #dfe2e5;
-            padding: 6px 13px;
-        }
-    }
+.readme {
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 .crate-downloads {
diff --git a/app/templates/crate/version.hbs b/app/templates/crate/version.hbs
index ec6d4d4b765..8c46c952898 100644
--- a/app/templates/crate/version.hbs
+++ b/app/templates/crate/version.hbs
@@ -66,8 +66,8 @@
         {{/if}}
       </div>
       {{#if this.readme}}
-        <section local-class="crate-readme" aria-label="Readme" {{highlight-syntax selector="pre > code"}}>
-          {{html-safe this.readme}}
+        <section aria-label="Readme">
+          <RenderedHtml @html={{this.readme}} local-class="readme" />
         </section>
       {{else}}
         {{#if this.crate.description}}