Extract RenderedHtml component

Author: Turbo87

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>

app/components/rendered-html.module.css

@@ -0,0 +1,30 @@
+.wrapper {
+    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;
+        }
+    }
+}

app/styles/crate/version.module.css

@@ -194,37 +194,6 @@ 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;
-        }
-    }
-}
-
 .crate-downloads {
     display: flex;
     flex-wrap: wrap;

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}} />
         </section>
       {{else}}
         {{#if this.crate.description}}