From 814e15a2926cfda048405f189074f1ea92ed2892 Mon Sep 17 00:00:00 2001
From: vkm0303 <1947055799@qq.com>
Date: Tue, 14 Feb 2023 00:49:53 +0800
Subject: [PATCH] fix: fixed the overflow of codeblock

---
 source/css/_highlight.styl  |  6 ++----
 source/js/page/codeblock.js | 13 +++++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/source/css/_highlight.styl b/source/css/_highlight.styl
index 071fcd4..648cfb4 100644
--- 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
index 5eb5ab3..6d56782 100644
--- 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';