adding syntax highlighting in code using highlight.js

themes/tailwind-custom/css/highlight.js.min.css

@@ -0,0 +1,72 @@
+/*
+Monokai style - ported by Luigi Maselli - http://grigio.org
+*/
+
+.hljs {
+  /* Inherit the pre background from the theme's prose styles
+     (--tw-prose-pre-bg) instead of Monokai's brown #272822 */
+  background: transparent;
+  color: #ddd;
+}
+
+.hljs-tag,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-strong,
+.hljs-number,
+.hljs-name {
+  color: #f92672;
+}
+
+.hljs-code {
+  color: #66d9ef;
+}
+
+.hljs-attribute,
+.hljs-attr,
+.hljs-symbol,
+.hljs-regexp,
+.hljs-link {
+  color: #bf79db;
+}
+
+.hljs-string,
+.hljs-bullet,
+.hljs-subst,
+.hljs-title,
+.hljs-section,
+.hljs-emphasis,
+.hljs-type,
+.hljs-built_in,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #a6e22e;
+}
+
+.hljs-title.class_,
+.hljs-class .hljs-title {
+  color: white;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+  color: #75715e;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-selector-id {
+  font-weight: bold;
+}

themes/tailwind-custom/layout.html.php

@@ -7,6 +7,7 @@
 	<link rel="stylesheet" href="<?php echo theme_path();?>css/typography.css" data-precedence="next" />
 	<link rel="stylesheet" href="<?php echo theme_path();?>css/tailwind.css" data-precedence="next" />
 	<link rel="stylesheet" href="<?php echo theme_path();?>css/style.css" data-precedence="next" />
+	<link rel="stylesheet" href="<?php echo theme_path();?>css/highlight.js.min.css" data-precedence="next" />
 </head>
 <body class="bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white">
 <?php if (facebook()) { echo facebook(); } ?>
@@ -120,6 +121,8 @@
 		};
 	</script>
 	<script src="<?php echo theme_path();?>js/functions.js"></script>
+	<script src="<?php echo theme_path();?>js/highlight.min.js"></script>
+	<script>hljs.highlightAll();</script>
 	<?php if (analytics()): ?><?php echo analytics() ?><?php endif; ?>
 </body>
 </html>