Updated highlight.js and created new code theme.

This commit is contained in:
flash 2023-12-15 12:47:01 +00:00
parent 7ef5994da4
commit bf65c95490
9 changed files with 2187 additions and 84 deletions

View file

@ -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;
}

View file

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

2068
public/vendor/highlightjs/highlight.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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;
}

View file

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

View file

@ -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";
}
}

View file

@ -9,7 +9,16 @@ final class CodeTag extends BBCodeTag {
'/\[code(?:\=([a-z]+))?\](.+?)\[\/code\]/s', '/\[code(?:\=([a-z]+))?\](.+?)\[\/code\]/s',
function ($matches) { function ($matches) {
$class = strlen($matches[1]) ? "lang-{$matches[1]}" : ''; $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>"; return "<pre class='bbcode__code'><code class='bbcode__code-container {$class}'>{$text}</code></pre>";
}, },
$text $text

View file

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