fix: fixed the overflow of codeblock

akinoccc · Feb 13, 2023 · 814e15a · 814e15a
1 parent ef56ed9
commit 814e15a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/source/css/_highlight.styl b/source/css/_highlight.styl
@@ -1,7 +1,7 @@
 .code-block-container
   overflow: hidden
   size(100%, auto)
-  margin: 10px 0
+  margin: 15px 0
   box-sizing: content-box
   border-radius: $border-radius-base
   box-shadow: 0 5px 10px 0 rgb(0, 0, 0, 0.4)
@@ -65,17 +65,15 @@
 
   pre
     overflow-y: hidden
-    overflow-x: auto 
     margin: 0 
     padding: 0.8em
-    white-space: pre-wrap
     transition: all 0.5s
 
   .hljs 
     overflow-x: auto
     display: block
     width: 100%
-    white-space: pre-wrap
+    white-space: pre
     color: #abb2bf
 
   .hljs-comment

diff --git a/source/js/page/codeblock.js b/source/js/page/codeblock.js
@@ -7,6 +7,19 @@ export default class CodeBlock {
   }
 
   _initHighlightStyle() {
+    hljs.registerLanguage('vue', () => {
+      return {
+        // contains: TYPES,
+        // keywords: LITERALS,
+        // illegal: '\\S'
+      }
+    });
+    hljs.registerLanguage('react', () => ({}));
+    $(document).on('DOMContentLoaded', () => {
+      document.querySelectorAll('pre code').forEach((el) => {
+        hljs.highlightElement(el);
+      });
+    });
     hljs.highlightAll();
     $('pre').each(function () {
       const language = $(this).children(':first')[0].result.language || 'TEXT';