create: highlight.scss — styling for highlightjs-diff

Author: EmptyWork

src/assets/scss/highlight.scss

@@ -0,0 +1,139 @@
+pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em
+}
+
+code.hljs {
+    padding: 3px 5px
+}
+
+/*!
+  Theme: Tokyo-night-Dark
+  origin: https://github.com/enkia/tokyo-night-vscode-theme
+  Description: Original highlight.js style
+  Author: (c) Henri Vandersleyen <hvandersleyen@gmail.com>
+  License: see project LICENSE
+  Touched: 2022
+*/
+.hljs-comment,
+.hljs-meta {
+    color: #565f89
+}
+
+.hljs-deletion,
+.hljs-doctag,
+.hljs-regexp,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-selector-pseudo,
+.hljs-tag,
+.hljs-template-tag,
+.hljs-variable.language_ {
+    color: #f7768e
+}
+
+.hljs-link,
+.hljs-literal,
+.hljs-number,
+.hljs-params,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable {
+    color: #ff9e64
+}
+
+.hljs-attribute,
+.hljs-built_in {
+    color: #e0af68
+}
+
+.hljs-keyword,
+.hljs-property,
+.hljs-subst,
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+    color: #7dcfff
+}
+
+.hljs-selector-tag {
+    color: #73daca
+}
+
+.hljs-addition,
+.hljs-bullet,
+.hljs-quote,
+.hljs-string,
+.hljs-symbol {
+    color: #9ece6a
+}
+
+.hljs-code,
+.hljs-formula,
+.hljs-section {
+    color: #7aa2f7
+}
+
+.hljs-attr,
+.hljs-char.escape_,
+.hljs-keyword,
+.hljs-name,
+.hljs-operator {
+    color: #bb9af7
+}
+
+.hljs-punctuation {
+    color: #c0caf5
+}
+
+.hljs {
+    background: #1a1b26;
+    color: #9aa5ce
+}
+
+.hljs-emphasis {
+    font-style: italic
+}
+
+.hljs-strong {
+    font-weight: 700
+}
+
+/*!
+  Author: (c) EmptyWork <contact@emptywork.my.id>
+  Touched: 2025
+
+  Additional styling for diff support
+*/
+
+.hljs-addition,
+.hljs-deletion {
+    --_distance: 1em;
+    --_border: 0em;
+    --_offset: 0.61875em;
+    display: inline-block;
+    width: calc(100% + calc(var(--_distance) * 2));
+    margin-inline: calc(var(--_distance) * -1);
+    padding-inline: 1em;
+    padding-left: calc(0.5em - var(--_border) + var(--_offset));
+}
+
+.hljs-addition,
+.hljs-deletion {
+    --_border: 0.25em;
+    --_offset: 0em;
+    --_color: 349, 89%, 72%;
+    background-color: hsl(var(--_color), 0.2);
+    border-left: var(--_border) solid hsl(var(--_color), 0.2);
+}
+
+.hljs-addition {
+    --_color: 89, 51%, 61%;
+}
+
+.hljs-deletion {
+    --_color: 349, 89%, 72%;
+}