feat: Add stylesheet for code highlighting

apps/content/lib/content_web/templates/posts/index.html.eex

@@ -45,3 +45,6 @@
     %>
   </div>
 </nav>
+
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>

apps/content/lib/content_web/templates/posts/show.html.eex

@@ -35,3 +35,6 @@
     %>
   <% end %>
 </article>
+
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>

apps/core/assets/css/app.css

@@ -6,6 +6,8 @@
 
 @import "@fortawesome/fontawesome-free/css/all.css";
 
+@import "code";
+
 input[type="checkbox"]::after {
   content: "";
   color: currentColor;

apps/core/assets/css/code.css

@@ -0,0 +1,104 @@
+/* hljs theme built using tailwind
+
+/* Comment */
+.hljs-comment,
+.hljs-quote {
+  color: var(--positive-color);
+}
+
+/* Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: var(--highlight-color);
+}
+
+/* Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: var(--warning-color);
+}
+
+/* Yellow */
+.hljs-attribute {
+  color: var(--attribute-color);
+}
+
+/* Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: var(--string-color);
+}
+
+/* Blue */
+.hljs-title,
+.hljs-section {
+  color: var(--section-color);
+}
+
+/* Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: var(--keyword-color);
+}
+
+.hljs {
+  @apply mt-6 mb-12 border-l-4 border-indigo-900 font-mono;
+  --background-color: theme("colors.indigo.100");
+  --attribute-color: theme("colors.orange.700");
+  --section-color: theme("colors.teal.700");
+  --string-color: theme("colors.green.700");
+  --keyword-color: theme("colors.indigo.900");
+
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: var(--body-color);
+  background: var(--background-color);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-built_in,
+  .hljs-builtin-name,
+  .hljs-bullet,
+  .hljs-comment,
+  .hljs-link,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-params,
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-type,
+  .hljs-quote {
+    color: highlight;
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag {
+    font-weight: bold;
+  }
+}