perf(ui): improve code snippet design

- Apply the new syntax color themes
- Center the text in the code snippet header
- Maintaining space to the left of a 3-digit line number or more

_sass/addon/syntax.scss

@@ -2,8 +2,8 @@
 * The syntax highlight.
 */
 
-@import 'colors/light-syntax';
-@import 'colors/dark-syntax';
+@import 'colors/syntax-light';
+@import 'colors/syntax-dark';
 
 html {
   @media (prefers-color-scheme: light) {
@@ -55,27 +55,35 @@ html {
   }
 
   overflow: auto;
-  padding-top: 0.5rem;
-  padding-bottom: 1rem;
+  padding-bottom: 0.75rem;
 
   pre {
     margin-bottom: 0;
     font-size: $code-font-size;
     line-height: 1.4rem;
     word-wrap: normal; /* Fixed Safari overflow-x */
-    color: var(--code-snippets-color);
   }
 
   table {
-    td pre {
-      overflow: visible; /* Fixed iOS safari overflow-x */
-      word-break: normal; /* Fixed iOS safari linenos code break */
+    td {
+      &:first-child {
+        display: inline-block;
+        margin-left: 1rem;
+        margin-right: 0.75rem;
+      }
+
+      &:last-child {
+        padding-right: 2rem !important;
+      }
+
+      pre {
+        overflow: visible; /* Fixed iOS safari overflow-x */
+        word-break: normal; /* Fixed iOS safari linenos code break */
+      }
     }
   }
 
   .lineno {
-    padding-right: 0.5rem;
-    min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
     -webkit-user-select: none;
@@ -90,6 +98,7 @@ code {
   -webkit-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
+  color: var(--code-color);
 
   &.highlighter-rouge {
     font-size: $code-font-size;
@@ -145,6 +154,11 @@ div[class^='language-'] {
 
     border-radius: 0;
   }
+
+  .highlight {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */
@@ -153,12 +167,13 @@ div {
   &.language-plaintext,
   &.language-console,
   &.language-terminal {
-    pre.lineno {
-      display: none;
-    }
+    td:first-child {
+      padding: 0 !important;
+      margin-right: 0;
 
-    td.rouge-code {
-      padding-left: 1.5rem;
+      .lineno {
+        display: none;
+      }
     }
   }
 }
@@ -166,21 +181,21 @@ div {
 .code-header {
   @extend %no-cursor;
 
-  $code-header-height: 2.25rem;
-
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: $code-header-height;
-  margin-left: 1rem;
+  margin-left: 0.75rem;
   margin-right: 0.5rem;
 
   /* the label block */
   span {
+    line-height: $code-header-height;
+
     /* label icon */
     i {
       font-size: 1rem;
-      margin-right: 0.5rem;
+      width: $code-icon-width;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -252,19 +267,25 @@ div {
     .code-header {
       @include ml-mr(0);
 
-      &::before {
-        $dot-size: 0.75rem;
-        $dot-margin: 0.5rem;
+      $dot-margin: calc($code-header-height / 2);
 
+      &::before {
         content: '';
         display: inline-block;
-        margin-left: 1rem;
-        width: $dot-size;
-        height: $dot-size;
+        margin-left: $dot-margin;
+        width: $code-dot-size;
+        height: $code-dot-size;
         border-radius: 50%;
         background-color: var(--code-header-muted-color);
-        box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
-          ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
+        box-shadow: ($code-dot-size + $code-dot-gap) 0 0
+            var(--code-header-muted-color),
+          ($code-dot-size + $code-dot-gap) * 2 0 0
+            var(--code-header-muted-color);
+      }
+
+      span {
+        // center the text of label
+        margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1);
       }
     }
   }

_sass/addon/variables.scss

@@ -20,6 +20,10 @@ $base-radius: 0.5rem;
 /* syntax highlight */
 
 $code-font-size: 0.85rem !default;
+$code-header-height: 2.25rem;
+$code-dot-size: 0.75rem;
+$code-dot-gap: 0.5rem;
+$code-icon-width: 1.75rem;
 
 /* fonts */