[Agregar] estilos al codigo incrustado

assets/highlight/dracula.css

@@ -0,0 +1,81 @@
+/* Dracula Theme v1.2.5
+ *
+ * https://github.com/dracula/highlightjs
+ *
+ * Copyright 2016-present, All rights reserved
+ *
+ * Code licensed under the MIT license
+ *
+ * @author Denis Ciccale <dciccale@gmail.com>
+ * @author Zeno Rocha <hi@zenorocha.com>
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #282a36;
+}
+
+.hljs-built_in,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-link {
+  color: #8be9fd;
+}
+
+.hljs-keyword {
+  color: #ff79c6;
+}
+
+.hljs,
+.hljs-subst {
+  color: #f8f8f2;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-meta-keyword {
+  font-style: italic;
+  color: #50fa7b;
+}
+
+.hljs-string,
+.hljs-meta,
+.hljs-name,
+.hljs-type,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #f1fa8c;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion {
+  color: #6272a4;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-literal,
+.hljs-number {
+  color: #bd93f9;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}

assets/scripts/article/article.js

@@ -15,6 +15,10 @@
 * junto con este programa. De lo contrario, consulte <https://www.gnu.org/licenses/>.
 */
 
+// ---------------------- Init the hightlight functionality ------------------
+hljs.highlightAll();
+
+// ---------------------- Animation heart ------------------
 const post = document.querySelector('.post__copy');
 const heart = document.querySelector('.icon');
 
@@ -26,8 +30,7 @@ post.addEventListener("click", () => {
     }, 1200);
 });
 
-
-// Fix some styles for the content post
+// ---------------------- Fix images for the content post ------------------
 const imagesPost = document.querySelectorAll('.post__copy img');
 
 // Get the media query

assets/styles/pages/article/article-desktop.css

@@ -109,6 +109,11 @@ header:hover {
     width: 50%;
 }
 
+/* Estilos para el codigo incrustado */
+.post__copy pre code {
+    font-size: 1.2rem;
+}
+
 
 /* Estilos para la seccion de popular posts */
 .popular-posts {

assets/styles/pages/article/article.css

@@ -260,6 +260,7 @@ header::before {
 .post__copy h4,
 .post__copy h5,
 .post__copy h6 {
+    margin: 0;
     margin-top: 2.2rem;
 }
 
@@ -321,8 +322,14 @@ header::before {
 }
 
 /* Estilos para el codigo incrustado */
+.hljs {
+    background: transparent;
+}
+
 .post__copy pre {
-    tab-width: 4;
+    padding: 20px;
+    background-color: #383A59;
+    color: white;
 }
 
 .post__copy pre[data-lang]::before { 
@@ -331,14 +338,14 @@ header::before {
 }
 
 .post__copy pre code {
-    display: block;
-    background: none;
-    white-space: pre;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: scroll;
     max-width: 100%;
     min-width: 100px;
     padding: 0;
+    display: block;
+    white-space: pre;
+    overflow-x: auto;
+    font-size: 0.8rem;
+    -webkit-overflow-scrolling: touch;
 }
 
 /* Estilos de la sección de otros post para mostrar */

views/pages/article.php

@@ -40,9 +40,10 @@
 ) ?>
 
 <!-- HTML head -->
+<link rel="stylesheet" href="/assets/highlight/dracula.css">
 <?php require_once 'views/components/head.php' ?>
 <?php require_once 'views/components/messages.php' ?>
-<link href="https://{{cdn}}/prismjs@v1.x/themes/prism.css" rel="stylesheet" />
+
 
 <!-- HTML body -->
 <header>
@@ -83,6 +84,11 @@
     </aside>
 
     <article class="post__copy">
+        <pre>
+            <code>
+                const hi = 2;
+            </code>
+        </pre>
         <?= $article['body'] ?>
     </article>
 </section>
@@ -159,5 +165,5 @@
 </section>
 
 <?php require_once 'views/components/footer.php' ?>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js" defer></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js" defer></script>
 <script src="/assets/scripts/article/article.js" defer></script>