fix: Adding maxheight invalidates the height of the block

Author: F-one-1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-highlight-code",
   "private": false,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "MIT",
   "main": "./dist/vue3-highlight.umd.js",
   "module": "./dist/vue3-highlight.es.js",

src/App.vue

@@ -20,6 +20,7 @@ export default {
 const light = 'light'
 const vue = 'vue'
 const dark = 'dark'
+const height = '200px'
 </script>
 <template>
   <div class="wrapper">
@@ -29,6 +30,7 @@ const dark = 'dark'
       :codeValue="value"
       :theme="dark"
       :lang="vue"
+      :maxHeight="height"
     ></HighCode>
     <HighCode
       class="code"

src/components/CopyCode.vue

@@ -65,7 +65,7 @@ const getContent = () => {
   cursor: pointer;
   transition: 0.3s opacity linear;
   opacity: 0.5;
-  height: 40px;
+  height: 30px;
   width: 80px;
   // float: right;
   right: 0px;

src/components/HighCode.vue

@@ -194,8 +194,8 @@ nextTick(() => {
   &_header {
     position: relative;
     display: flex;
-    justify-content: space-around;
-    height: 40px;
+    justify-content: flex-start;
+    height: 30px;
     width: 100%;
   }
   pre code {
@@ -222,7 +222,7 @@ nextTick(() => {
   flex-direction: column;
   width: 10px;
   // justify-content: center;
-  padding-top: 40px;
+  padding-top: 30px;
   align-items: center;
   position: absolute;
   transform: translateX(6px);

src/components/TypeShow.vue

@@ -19,9 +19,9 @@ const props = defineProps({
   align-items: center;
   justify-content: center;
   width: 40px;
-  height: 40px;
-  position: absolute;
-  left: 0px;
+  height: 30px;
+  position: relative;
+  // left: 0px;
   &_word {
     width: 20px;
     height: 20px;

vite.config.js

@@ -9,8 +9,8 @@ export default defineConfig({
   build: {
     lib: {
       entry: resolve(__dirname, 'src/build.js'),
-      name: 'vue3-highlight',
-      fileName: (format) => `vue3-highlight.${format}.js`
+      name: 'vue-highlight-code',
+      fileName: (format) => `vue-highlight-code.${format}.js`
     },
     sourcemap: true,
     rollupOptions: {