refactor(site, templates): code-block scoped styles

site/src/components/code-block.js

@@ -4,15 +4,13 @@ class CodeBlockComponent extends HTMLElement {
     const lang = this.getAttribute("language");
 
     this.innerHTML = `
-        <pre id="pre"><code id="code">${
+        <pre id="pre"><code id="code">${this.trimmed}</code></pre>
-      this.trimmed
-    }</code></pre>
     `;
 
     /**
      * @type {HTMLPreElement}
      */
-    const pre = this.querySelector('#pre')
+    const pre = this.querySelector("#pre");
 
     if (lang) {
       pre.className = `language-${lang}`;
@@ -22,15 +20,16 @@ class CodeBlockComponent extends HTMLElement {
      * @type {Partial<CSSStyleDeclaration>}
      */
     const style = {
-      padding:'1em',
+      background: "#f5f2f0",
-      background:'#efefef',
+      padding: "1em",
-      margin: '1em 0',
+      margin: "1em 0",
-      borderRadius: '5px',
+      fontSize: "large",
-      fontSize: 'large'
+      overflow: "auto",
-    }
+      borderRadius: '5px'
+    };
 
-    Object.keys(style).forEach(rule => {
+    Object.keys(style).forEach((rule) => {
-      pre.style[rule] = style[rule]
+      pre.style[rule] = style[rule];
-    })
+    });
   }
 }

templates/basic/src/components/code-block.js

@@ -18,12 +18,21 @@ class CodeBlockComponent extends WebComponent {
      * @type {HTMLPreElement} */
     const pre = this.querySelector("#pre");
 
-    // scoped style for pre block
+    /**
-    pre.style.background = "#f5f2f0";
+     * @type {Partial<CSSStyleDeclaration>}
-    pre.style.padding = "1em";
+     */
-    pre.style.margin = "1em 0";
+    const style = {
-    pre.style.fontSize = "1.25em";
+      background: "#f5f2f0",
-    pre.style.overflow = "auto";
+      padding: "1em",
+      margin: "1em 0",
+      fontSize: "large",
+      overflow: "auto",
+      borderRadius: '5px'
+    };
+
+    Object.keys(style).forEach((rule) => {
+      pre.style[rule] = style[rule];
+    });
   }
 
   // readonly template