feat: fix index.html

remove p element from code and add highlight.js

.prettierignore

@@ -1,2 +1,3 @@
 **/*.html
 **/*.md
+demo/lib/*

demo/lib/highlight-theme.css

@@ -0,0 +1,115 @@
+/*
+ * Visual Studio 2015 dark style
+ * Author: Nicolas LLOBERA <nllobera@gmail.com>
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #1E1E1E;
+  color: #DCDCDC;
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol,
+.hljs-name {
+  color: #569CD6;
+}
+.hljs-link {
+  color: #569CD6;
+  text-decoration: underline;
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: #4EC9B0;
+}
+
+.hljs-number,
+.hljs-class {
+  color: #B8D7A3;
+}
+
+.hljs-string,
+.hljs-meta-string {
+  color: #D69D85;
+}
+
+.hljs-regexp,
+.hljs-template-tag {
+  color: #9A5334;
+}
+
+.hljs-subst,
+.hljs-function,
+.hljs-title,
+.hljs-params,
+.hljs-formula {
+  color: #DCDCDC;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #57A64A;
+  font-style: italic;
+}
+
+.hljs-doctag {
+  color: #608B4E;
+}
+
+.hljs-meta,
+.hljs-meta-keyword,
+.hljs-tag {
+  color: #9B9B9B;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #BD63C5;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-builtin-name {
+  color: #9CDCFE;
+}
+
+.hljs-section {
+  color: gold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+/*.hljs-code {
+  font-family:'Monospace';
+}*/
+
+.hljs-bullet,
+.hljs-selector-tag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #D7BA7D;
+}
+
+.hljs-addition {
+  background-color: #144212;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #600;
+  display: inline-block;
+  width: 100%;
+}

style.css → demo/style.css

@@ -96,64 +96,65 @@ div.containers > .nes-container {
 }
 
 .show-code {
-  font-size: .7em;
-  height: 34px;
+  position: absolute;
+  top: -4px;
+  right: -4px;
   display: flex;
   justify-content: center;
   width: 40px;
-  position: absolute;
-  right: -4px;
-  top: -4px;
+  height: 34px;
+  font-size: 0.7em;
 }
 
-pre {
-  white-space: normal;
+.sample-code {
+  margin: 0;
+}
+.sample-code > code {
+  padding: 1em 2em;
+  line-height: 2em;
 }
 
 .code {
+  box-sizing: border-box;
   display: none;
-  font-size: .85em;
-  color: #e76e55;
-  background-color: rgba(45, 45, 45, .9);
-  padding: 15px 0px 0px 15px;
+  padding: 15px 0 0 15px;
   margin-top: -20px;
-  box-sizing: border-box;
   overflow: auto;
+  font-size: 0.85em;
+  color: #e76e55;
+  background-color: rgba(45, 45, 45, 0.9);
 }
 
 .copy {
-  height: 34px;
   width: 58px;
+  height: 34px;
 }
 
-#form .nes-field, #form .field {
+#form .nes-field,
+#form .field {
   margin-top: 20px;
 }
 
 .copied {
   position: absolute;
+  right: 35px;
   bottom: 25px;
-  padding: 10px;
-  font-size: .7em;
   z-index: 2;
-  right: 35px;
-  color: #000;
   display: none;
+  padding: 10px;
+  font-size: 0.7em;
+  color: #000;
 }
 
 .balloon .copied {
-  bottom: -4px;
   right: 10px;
-}
-
-.code p {
-  width: 96%;
+  bottom: -4px;
 }
 
 @media screen and (max-width: 1280px) {
   .code p:first-child {
-    padding-top: 2.7em;
     width: 99%;
+    padding-top: 2.7em;
   }
 }
 
@@ -171,8 +172,8 @@ pre {
   }
 
   .code p {
-    font-size: .8em;
     width: 100%;
+    font-size: 0.8em;
   }
 
   #code-avatars p {