Updated highlight.js and created new code theme.

assets/misuzu.css/hljs.css

@@ -0,0 +1,92 @@
+pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+    font-size: 1.2em;
+    font-family: var(--font-monospace);
+}
+
+code.hljs {
+    padding: 2px 5px;
+}
+
+.hljs {
+    color: #eee;
+    background: #121212;
+}
+
+.hljs-strong,
+.hljs-emphasis,
+.hljs-section {
+    font-weight: 700;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal {
+    color: #b2b376;
+}
+
+.hljs-code {
+    background-color: #242424;
+}
+
+.hljs-comment,
+.hljs-meta,
+.hljs-emphasis,
+.hljs-stronge,
+.hljs-type,
+.hljs-attribute,
+.hljs-params {
+    font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-symbol,
+.hljs-name {
+    color: #9475b2;
+}
+
+.hljs-built_in,
+.hljs-subst,
+.hljs-tag,
+.hljs-title,
+.hljs-selector-attr {
+    color: #c8b9d7;
+}
+
+.hljs-variable,
+.hljs-class .hljs-title,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-selector-pseudo {
+    color: #b37fae;
+}
+
+.hljs-string {
+    color: #76b38a;
+}
+
+.hljs-type,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-link {
+    color: #b39a76;
+}
+
+.hljs-comment,
+.hljs-meta {
+    color: #70647b;
+}
+
+.hljs-addition {
+    background: #0e4d0e;
+}
+
+.hljs-deletion {
+    background: #4d0e0e;
+}

assets/misuzu.css/main.css

@@ -107,6 +107,7 @@ html {
 @include flags.css;
 @include footer.css;
 @include header.css;
+@include hljs.css;
 @include impersonate.css;
 @include landing.css;
 @include main.css;

public/vendor/highlightjs/styles/tomorrow-night.css

@@ -1,75 +0,0 @@
-/* Tomorrow Night Theme */
-/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
-/* Original theme - https://github.com/chriskempson/tomorrow-theme */
-/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
-
-/* Tomorrow Comment */
-.hljs-comment,
-.hljs-quote {
-  color: #969896;
-}
-
-/* Tomorrow Red */
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag,
-.hljs-name,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-regexp,
-.hljs-deletion {
-  color: #cc6666;
-}
-
-/* Tomorrow Orange */
-.hljs-number,
-.hljs-built_in,
-.hljs-builtin-name,
-.hljs-literal,
-.hljs-type,
-.hljs-params,
-.hljs-meta,
-.hljs-link {
-  color: #de935f;
-}
-
-/* Tomorrow Yellow */
-.hljs-attribute {
-  color: #f0c674;
-}
-
-/* Tomorrow Green */
-.hljs-string,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition {
-  color: #b5bd68;
-}
-
-/* Tomorrow Blue */
-.hljs-title,
-.hljs-section {
-  color: #81a2be;
-}
-
-/* Tomorrow Purple */
-.hljs-keyword,
-.hljs-selector-tag {
-  color: #b294bb;
-}
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  background: #1d1f21;
-  color: #c5c8c6;
-  padding: 0.5em;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}

src/Parsers/BBCode/BBCodeParser.php

@@ -39,6 +39,7 @@ class BBCodeParser implements ParserInterface {
 
                 // Finally parse leftover newlines
                 new Tags\NewLineTag,
+                new Tags\CodeNewLineHackTag,
             ];
         }
 

src/Parsers/BBCode/Tags/CodeNewLineHackTag.php

@@ -0,0 +1,14 @@
+<?php
+namespace Misuzu\Parsers\BBCode\Tags;
+
+use Misuzu\Parsers\BBCode\BBCodeSimpleTag;
+
+final class CodeNewLineHackTag extends BBCodeSimpleTag {
+    public function getPattern(): string {
+        return "/&#20;/";
+    }
+
+    public function getReplacement(): string {
+        return "\r\n";
+    }
+}

src/Parsers/BBCode/Tags/CodeTag.php

@@ -9,7 +9,16 @@ final class CodeTag extends BBCodeTag {
             '/\[code(?:\=([a-z]+))?\](.+?)\[\/code\]/s',
             function ($matches) {
                 $class = strlen($matches[1]) ? "lang-{$matches[1]}" : '';
-                $text = str_replace(['[', ']', '<', '>'], ['&#91;', '&#93;', '&lt;', '&gt;'], $matches[2]);
+                $text = strtr($matches[2], [
+                    '[' => '&#91;',
+                    ']' => '&#93;',
+                    '<' => '&lt;',
+                    '>' => '&gt;',
+                    "\r\n" => '&#20;',
+                    "\r" => '&#20;',
+                    "\n" => '&#20;',
+                ]);
+
                 return "<pre class='bbcode__code'><code class='bbcode__code-container {$class}'>{$text}</code></pre>";
             },
             $text

templates/master.twig

@@ -5,7 +5,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         {% include '_layout/meta.twig' %}
         <link href="/vendor/fontawesome/css/all.min.css" type="text/css" rel="stylesheet">
-        <link href="/vendor/highlightjs/styles/tomorrow-night.css" type="text/css" rel="stylesheet">
         <link href="{{ globals.assets.mszcss|default() }}" type="text/css" rel="stylesheet">
 {% if site_background is defined %}
         <style>
@@ -57,7 +56,7 @@
         <script type="text/javascript">
             window.addEventListener('DOMContentLoaded', function() { Misuzu(); });
         </script>
-        <script src="/vendor/highlightjs/highlight.pack.js" type="text/javascript"></script>
+        <script src="/vendor/highlightjs/highlight.min.js" type="text/javascript"></script>
         <script src="{{ globals.assets.mszjs|default() }}" type="text/javascript"></script>
     </body>
 </html>