Use Pygments for syntax highlighting, design adjustments, preload fonts

5 files changed, 36 insertions, 3 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 0b785d5..05d2974 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -44,8 +44,8 @@ code {
 }
 
 pre {
-    margin: 0;
-    overflow: hidden;
+    margin: ($line-height * 1em) 0 0;
+    overflow-x: auto;
     color: var(--code-block--fg);
     font-size: $code-block--font-size;
     line-height: $code-block--line-height;
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
index 7cf2aa1..e97aaf7 100644
--- a/assets/css/components/_page-header.scss
+++ b/assets/css/components/_page-header.scss
@@ -18,6 +18,11 @@
         line-height: $code-block--line-height;
     }
 
+    &__pre {
+        margin-top: 0;
+        overflow: hidden;
+    }
+
     @media (max-width: map-get($breakpoints, 'sm')) {
         margin-left: 0;
         padding-left: 0;
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index 21969d7..c9a4650 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -7,6 +7,11 @@
         }
     }
 
+    &__code {
+        padding-left: calc(#{$subcontent--indent} - 2px);
+        border-left: 2px solid var(--obj);
+    }
+
     &__prefixed {
         position: relative;
         margin-left: -1 * $page--item-prefix--width;
@@ -44,9 +49,9 @@
         &--pre {
             $scale-factor: $font-size / $code-block--font-size;
 
-            margin-top: $line-height * 1em;
             // margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor});
             // padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor});
+            border-left: 0;
     
             &::before {
                 content: str-repeat('``\A', 40);
diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss
new file mode 100644
index 0000000..cdc9425
--- /dev/null
+++ b/assets/css/scopes/_code.scss
@@ -0,0 +1,22 @@
+.s-code {
+    pre {
+        overflow-x: auto;
+        color: var(--fg-lo);
+        font-size: 1em;
+        line-height: $line-height;
+    }
+
+    .c {
+        color: var(--fg-hi);
+    }
+
+    .nt,
+    .kt,
+    .k,
+    .kr,
+    .o,
+    .si,
+    .p {
+        color: var(--fg);
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 7986bd9..e89cbd6 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -10,6 +10,7 @@
 
 @import 'layouts/container';
 
+@import 'scopes/code';
 @import 'scopes/page';
 
 @import 'utils';