feat: show language on code block

Former-commit-id: 0fcc5b953efd01b1d1e68679830e85b6957b2ac1

1 files changed, 32 insertions, 8 deletions

diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss
index ac4e28bd..0cb8bb9e 100644
--- a/assets/css/components/_markdown.scss
+++ b/assets/css/components/_markdown.scss
@@ -62,15 +62,39 @@ $em-text-color: #889E73;
 
   pre {
     padding: 0.5rem 1rem;
-    overflow: auto;
+    font-size: 1rem;
     border-radius: 5px;
-  }
-
-  pre > code {
-    padding: 0;
-    color: unset;
-    background-color: inherit;
-    border: 0;
+    border-top-right-radius: 0;
+    position: relative;
+
+    & > code {
+      padding: 0;
+      color: unset;
+      background-color: inherit;
+      border: 0;
+
+      &::before {
+        --width: 1rem;
+        content: attr(data-lang);
+        display: block;
+        box-sizing: border-box;
+        line-height: 1rem;
+
+        position: absolute;
+        top: 0;
+        right: -1rem;
+        width: var(--width);
+        min-height: 2.5rem;
+        writing-mode: vertical-rl;
+        text-align: center;
+
+        font-size: 0.75em;
+        background: #333;
+        color: #fff;
+        padding: 0.5rem 0;
+        border-radius: 0 4px 4px 0;
+      }
+    }
   }
 
   p {