Add Copy btn on install command (#1846)

* add copy btn on install command

* remove CCS

* add padding

* remove $ sign from copied install command

---------

Co-authored-by: Sebastian Beltran <bjohansebas@gmail.com>

css/style.css

@@ -143,12 +143,17 @@ main.home {
   column-gap: 8px
 }
 
-#install-command {
+.install-command {
   font-family: Consolas, Monaco, "Andale Mono", monospace;
-  padding: 5px 10px;
+  padding: 10px;
   border: 1px solid var(--border);
   border-radius: 3px;
   max-width: 375px;
+  background-color: inherit;
+
+  code {
+    background-color: inherit;
+  }
 }
 
 .content {
@@ -1147,7 +1152,7 @@ h2 a {
     flex-direction: column;
   }
 
-  #install-command {
+  .install-command {
     display: none;
   }
 
@@ -1219,11 +1224,6 @@ h2 a {
     font-weight: 200;
   }
 
-  #install-command {
-    width: 100%;
-    margin-right: 5%;
-  }
-
   .logo-container {
     margin-inline: auto;
   }

index.md

@@ -13,7 +13,7 @@ redirect_from: "/en/index.html"
         <div class="express"><a href="/">Express</a><a href="{{ page.lang }}/changelog/4x.html#{{ site.data.express.current_version }}" id="express-version">{{ site.data.express.current_version }}</a></div>
         <h1 class="description">Fast, unopinionated, minimalist web framework for <a href='https://nodejs.org/en/'>Node.js</a></h1>
     </section>
-    <div id="install-command">$ npm install express --save</div>
+    <pre class="install-command"><code>$ npm install express --save</code></pre>
   </div>
 
   <div id="homepage-rightpane" class="pane" markdown="1">

js/copycode.js

@@ -31,7 +31,9 @@ function setButtonAttributes(button, attributes) {
 
 async function copyCode(block, button) {
   const code = block.querySelector("code");
-  const text = code.innerText;
+  let text = code.innerText;
+  // remove "$" and space if exists at the beginning of the code
+  text = text.replace(/^\$\s?/,"");
 
   try {
     await navigator.clipboard.writeText(text);