refactor(scss): extract code highlight styles from globals.scss to separate file

Author: yoshinorin

src/styles/globals.scss

@@ -2,6 +2,7 @@
 @use '_themes';
 @use '_syntax-themes';
 @use '_variables';
+@use 'syntax-highlight';
 @use 'components/alert.module';
 
 html {
@@ -253,333 +254,3 @@ figure {
   }
 }
 
-// TODO: some value move to _.valiables.scss
-// TODO: fix important
-figure.highlight,
-.codeblock {
-  background:       map.get(variables.$highlight-colors, 'background');
-  color:            map.get(variables.$highlight-font-colors, 'night-rider');
-  border:           0.1em solid map.get(variables.$highlight-colors, 'border-color');
-  border-radius:    0.3em;
-  overflow-x:       auto;
-  overflow-y:       hidden;
-  display:          block;
-  color:            map.get(variables.$basic-colors, 'base');
-  line-height:      2.45rem !important;
-  font-size:        map.get(variables.$font-size, large);
-
-  table {
-    display: block;
-    width:   100%;
-  }
-
-  pre,
-  .gutter,
-  .code,
-  .tag {
-    font-family:      variables.$font-families-code;
-    border:           none;
-    cursor:           text;
-  }
-  &.plain,
-  &.plaintext {
-    .gutter {
-        display: none;
-    }
-    overflow-x:     auto;
-    overflow-y:     hidden;
-    .code {
-      pre {
-        margin-left:   0.5em;
-      }
-    }
-  }
-  figcaption {
-    font-family:  variables.$font-families-code;
-    background:   map.get(variables.$highlight-colors, 'background');
-    color:        map.get(variables.$basic-colors, 'base');
-  }
-  .gutter {
-    border-right-color:  map.get(variables.$highlight-colors, 'border-light') !important;
-    border-right:        1px solid;
-    background:          map.get(variables.$highlight-colors, 'border-color') !important;
-    opacity:             0.7;
-  }
-  .code {
-    padding:       0.1em 0.1em 0.3em 0.6em;
-    width:         100%;
-    background:    map.get(variables.$highlight-colors, 'background');
-
-    pre {
-      max-width: calc(#{map.get(variables.$main, 'max-width')} - 50px);
-    }
-  }
-  .line {
-    height:    map.get(variables.$highlight-colors, line-height);
-    font-size: map.get(variables.$highlight-colors, font-size);
-    color:     map.get(variables.$highlight-colors, 'base');
-  }
-
-  // TextMate scope-based syntax highlighting (syntect)
-
-  // Text (base text, used in PHP and other embedded languages)
-  .text {
-    color: map.get(variables.$highlight-colors, 'base');
-
-    &.plain {
-      color: map.get(variables.$highlight-colors, 'base');
-    }
-  }
-
-  // Embedding (PHP, etc.)
-  .embedding {
-    color: map.get(variables.$highlight-colors, 'base');
-  }
-
-  // Source (source code)
-  .source {
-    color: map.get(variables.$highlight-colors, 'base');
-  }
-
-  // Comment
-  .comment {
-    color: map.get(variables.$highlight-font-colors, 'night-rider');
-  }
-
-  // Keyword
-  .keyword {
-    color: map.get(variables.$highlight-font-colors, 'cardinal');
-  }
-
-  // Storage (type declarations, modifiers)
-  .storage {
-    color: map.get(variables.$highlight-font-colors, 'cardinal');
-  }
-
-  // String
-  .string {
-    color: map.get(variables.$highlight-font-colors, 'egyptian-blue');
-  }
-
-  // Constant
-  .constant {
-    color: map.get(variables.$highlight-font-colors, 'bondi-blue');
-
-    &.language {
-      color: map.get(variables.$highlight-font-colors, 'bondi-blue');
-    }
-
-    &.numeric {
-      color: map.get(variables.$highlight-font-colors, 'bondi-blue');
-    }
-
-    &.character {
-      color: map.get(variables.$highlight-font-colors, 'egyptian-blue');
-    }
-  }
-
-  // Entity (function names, type names, class names, tags)
-  .entity {
-    &.name {
-      &.function {
-        color: map.get(variables.$highlight-font-colors, 'scampi');
-      }
-
-      &.type {
-        color: map.get(variables.$highlight-font-colors, 'scampi');
-      }
-
-      &.class {
-        color: map.get(variables.$highlight-font-colors, 'scampi');
-      }
-
-      &.val {
-        color: map.get(variables.$highlight-font-colors, 'scampi');
-      }
-
-      &.tag {
-        color: map.get(variables.$highlight-font-colors, 'asparagus');
-      }
-
-      &.section {
-        color: map.get(variables.$highlight-font-colors, 'scampi');
-      }
-    }
-
-    &.other {
-      &.attribute-name {
-        color: map.get(variables.$highlight-font-colors, 'scampi');
-      }
-
-      &.inherited-class {
-        color: map.get(variables.$highlight-font-colors, 'scampi');
-      }
-    }
-  }
-
-  // Support (built-in functions, types)
-  .support {
-    &.function {
-      color: map.get(variables.$highlight-font-colors, 'scampi');
-    }
-
-    &.type {
-      color: map.get(variables.$highlight-font-colors, 'cardinal');
-    }
-
-    &.class {
-      color: map.get(variables.$highlight-font-colors, 'scampi');
-    }
-
-    &.constant {
-      color: map.get(variables.$highlight-font-colors, 'bondi-blue');
-    }
-  }
-
-  // Variable
-  .variable {
-    color: map.get(variables.$highlight-font-colors, 'bahama-blue');
-
-    &.parameter {
-      color: map.get(variables.$highlight-font-colors, 'scampi');
-    }
-
-    &.language {
-      color: map.get(variables.$highlight-font-colors, 'cardinal');
-    }
-
-    &.other {
-      color: map.get(variables.$highlight-font-colors, 'base');
-    }
-  }
-
-  // Punctuation
-  .punctuation {
-    color: map.get(variables.$highlight-font-colors, 'night-rider');
-  }
-
-  // Meta (preprocessor, docstrings)
-  .meta {
-    &.preprocessor {
-      color: map.get(variables.$highlight-font-colors, 'persimmon');
-    }
-
-    &.tag {
-      color: map.get(variables.$highlight-font-colors, 'night-rider');
-    }
-  }
-
-  // Invalid
-  .invalid {
-    color: map.get(variables.$highlight-font-colors, 'free-speech-red');
-
-    &.illegal {
-      color: map.get(variables.$highlight-font-colors, 'free-speech-red');
-      background-color: map.get(variables.$highlight-font-colors, 'misty-rose');
-    }
-
-    &.deprecated {
-      color: map.get(variables.$highlight-font-colors, 'free-speech-red');
-    }
-  }
-
-  // Markup (for Markdown, etc.)
-  .markup {
-    &.heading {
-      color: map.get(variables.$highlight-font-colors, 'scampi');
-      font-weight: bold;
-    }
-
-    &.bold {
-      font-weight: bold;
-    }
-
-    &.italic {
-      font-style: italic;
-    }
-
-    &.inserted {
-      color: map.get(variables.$highlight-font-colors, 'limeade');
-      background-color: map.get(variables.$highlight-font-colors, 'honeydew');
-    }
-
-    &.deleted {
-      color: map.get(variables.$highlight-font-colors, 'free-speech-red');
-      background-color: map.get(variables.$highlight-font-colors, 'misty-rose');
-    }
-
-    &.list {
-      color: map.get(variables.$highlight-font-colors, 'cardinal');
-    }
-
-    &.quote {
-      color: map.get(variables.$highlight-font-colors, 'night-rider');
-      font-style: italic;
-    }
-  }
-
-  // Backward compatibility: keep some highlight.js classes
-  .quote {
-    color: map.get(variables.$highlight-font-colors, 'night-rider');
-  }
-
-  .number {
-    color: map.get(variables.$highlight-font-colors, 'bondi-blue');
-  }
-
-  .literal {
-    color: map.get(variables.$highlight-font-colors, 'bondi-blue');
-  }
-
-  .built_in,
-  .name,
-  .tag {
-    color: map.get(variables.$code-basic-colors, 'tag');
-  }
-
-  .title,
-  .section,
-  .attribute {
-    color: map.get(variables.$highlight-font-colors, 'egyptian-blue');
-  }
-
-  .selector-tag,
-  .selector-attr,
-  .selector-pseudo {
-    color: map.get(variables.$code-basic-colors, 'meta');
-  }
-
-  .template-tag,
-  .template-variable,
-  .type,
-  .addition {
-    color: map.get(variables.$highlight-font-colors, 'egyptian-blue');
-  }
-
-  .deletion {
-    color: map.get(variables.$code-basic-colors, 'meta');
-  }
-
-  .doctag {
-    color: map.get(variables.$code-basic-colors, 'doctag');
-  }
-
-  .attr {
-    color: map.get(variables.$code-basic-colors, 'attr');
-  }
-
-  .symbol,
-  .bullet,
-  .link {
-    color: map.get(variables.$code-basic-colors, 'link');
-  }
-
-  .emphasis {
-    font-style: italic;
-  }
-
-  .strong {
-    font-weight: bold;
-  }
-}
-