From 2741e7aff9c757c17420279bd9e5378f5d28f695 Mon Sep 17 00:00:00 2001
From: xiaozzzi <42293085+xiaozzzi@users.noreply.github.com>
Date: Sat, 14 Oct 2023 14:38:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=A1=8C=E6=95=B0=E4=B8=8E?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/resources/exportTemplate.html    | 386 ++++++++++++++++--
 .../src/renderer/src/assets/utils/hljsTest.ts |  28 +-
 .../src/views/article/styles/bl-preview.css   |   8 +-
 .../src/renderer/src/views/doc/type.d.ts      |  86 ++--
 blossom-web/src/views/article/Articles.vue    | 232 +++++++----
 blossom-web/src/views/article/index.d.ts      |  72 ++--
 6 files changed, 609 insertions(+), 203 deletions(-)

diff --git a/blossom-backend/backend/src/main/resources/exportTemplate.html b/blossom-backend/backend/src/main/resources/exportTemplate.html
index 67a2c8c..3e873d8 100644
--- a/blossom-backend/backend/src/main/resources/exportTemplate.html
+++ b/blossom-backend/backend/src/main/resources/exportTemplate.html
@@ -10,135 +10,159 @@
           font-weight: normal;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Caligraphic';
           src: url(fonts/KaTeX_Caligraphic-Bold.woff2) format('woff2'), url(fonts/KaTeX_Caligraphic-Bold.woff) format('woff'), url(fonts/KaTeX_Caligraphic-Bold.ttf) format('truetype');
           font-weight: bold;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Caligraphic';
           src: url(fonts/KaTeX_Caligraphic-Regular.woff2) format('woff2'), url(fonts/KaTeX_Caligraphic-Regular.woff) format('woff'), url(fonts/KaTeX_Caligraphic-Regular.ttf) format('truetype');
           font-weight: normal;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Fraktur';
           src: url(fonts/KaTeX_Fraktur-Bold.woff2) format('woff2'), url(fonts/KaTeX_Fraktur-Bold.woff) format('woff'), url(fonts/KaTeX_Fraktur-Bold.ttf) format('truetype');
           font-weight: bold;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Fraktur';
           src: url(fonts/KaTeX_Fraktur-Regular.woff2) format('woff2'), url(fonts/KaTeX_Fraktur-Regular.woff) format('woff'), url(fonts/KaTeX_Fraktur-Regular.ttf) format('truetype');
           font-weight: normal;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Main';
           src: url(fonts/KaTeX_Main-Bold.woff2) format('woff2'), url(fonts/KaTeX_Main-Bold.woff) format('woff'), url(fonts/KaTeX_Main-Bold.ttf) format('truetype');
           font-weight: bold;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Main';
           src: url(fonts/KaTeX_Main-BoldItalic.woff2) format('woff2'), url(fonts/KaTeX_Main-BoldItalic.woff) format('woff'), url(fonts/KaTeX_Main-BoldItalic.ttf) format('truetype');
           font-weight: bold;
           font-style: italic;
       }
+
       @font-face {
           font-family: 'KaTeX_Main';
           src: url(fonts/KaTeX_Main-Italic.woff2) format('woff2'), url(fonts/KaTeX_Main-Italic.woff) format('woff'), url(fonts/KaTeX_Main-Italic.ttf) format('truetype');
           font-weight: normal;
           font-style: italic;
       }
+
       @font-face {
           font-family: 'KaTeX_Main';
           src: url(fonts/KaTeX_Main-Regular.woff2) format('woff2'), url(fonts/KaTeX_Main-Regular.woff) format('woff'), url(fonts/KaTeX_Main-Regular.ttf) format('truetype');
           font-weight: normal;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Math';
           src: url(fonts/KaTeX_Math-BoldItalic.woff2) format('woff2'), url(fonts/KaTeX_Math-BoldItalic.woff) format('woff'), url(fonts/KaTeX_Math-BoldItalic.ttf) format('truetype');
           font-weight: bold;
           font-style: italic;
       }
+
       @font-face {
           font-family: 'KaTeX_Math';
           src: url(fonts/KaTeX_Math-Italic.woff2) format('woff2'), url(fonts/KaTeX_Math-Italic.woff) format('woff'), url(fonts/KaTeX_Math-Italic.ttf) format('truetype');
           font-weight: normal;
           font-style: italic;
       }
+
       @font-face {
           font-family: 'KaTeX_SansSerif';
           src: url(fonts/KaTeX_SansSerif-Bold.woff2) format('woff2'), url(fonts/KaTeX_SansSerif-Bold.woff) format('woff'), url(fonts/KaTeX_SansSerif-Bold.ttf) format('truetype');
           font-weight: bold;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_SansSerif';
           src: url(fonts/KaTeX_SansSerif-Italic.woff2) format('woff2'), url(fonts/KaTeX_SansSerif-Italic.woff) format('woff'), url(fonts/KaTeX_SansSerif-Italic.ttf) format('truetype');
           font-weight: normal;
           font-style: italic;
       }
+
       @font-face {
           font-family: 'KaTeX_SansSerif';
           src: url(fonts/KaTeX_SansSerif-Regular.woff2) format('woff2'), url(fonts/KaTeX_SansSerif-Regular.woff) format('woff'), url(fonts/KaTeX_SansSerif-Regular.ttf) format('truetype');
           font-weight: normal;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Script';
           src: url(fonts/KaTeX_Script-Regular.woff2) format('woff2'), url(fonts/KaTeX_Script-Regular.woff) format('woff'), url(fonts/KaTeX_Script-Regular.ttf) format('truetype');
           font-weight: normal;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Size1';
           src: url(fonts/KaTeX_Size1-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size1-Regular.woff) format('woff'), url(fonts/KaTeX_Size1-Regular.ttf) format('truetype');
           font-weight: normal;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Size2';
           src: url(fonts/KaTeX_Size2-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size2-Regular.woff) format('woff'), url(fonts/KaTeX_Size2-Regular.ttf) format('truetype');
           font-weight: normal;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Size3';
           src: url(fonts/KaTeX_Size3-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size3-Regular.woff) format('woff'), url(fonts/KaTeX_Size3-Regular.ttf) format('truetype');
           font-weight: normal;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Size4';
           src: url(fonts/KaTeX_Size4-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size4-Regular.woff) format('woff'), url(fonts/KaTeX_Size4-Regular.ttf) format('truetype');
           font-weight: normal;
           font-style: normal;
       }
+
       @font-face {
           font-family: 'KaTeX_Typewriter';
           src: url(fonts/KaTeX_Typewriter-Regular.woff2) format('woff2'), url(fonts/KaTeX_Typewriter-Regular.woff) format('woff'), url(fonts/KaTeX_Typewriter-Regular.ttf) format('truetype');
           font-weight: normal;
           font-style: normal;
       }
+
       .katex {
           font: normal 1.21em KaTeX_Main, Times New Roman, serif;
           line-height: 1.2;
           text-indent: 0;
           text-rendering: auto;
       }
+
       .katex * {
           -ms-high-contrast-adjust: none !important;
       }
+
       .katex * {
           border-color: currentColor;
       }
+
       .katex .katex-version::after {
           content: "0.16.8";
       }
+
       .katex .katex-mathml {
           /* Accessibility hack to only show to screen readers
                  Found at: http://a11yproject.com/posts/how-to-hide-content/ */
@@ -150,12 +174,15 @@
           width: 1px;
           overflow: hidden;
       }
+
       .katex .katex-html {
           /* \newline is an empty block at top level, between .base elements */
       }
+
       .katex .katex-html > .newline {
           display: block;
       }
+
       .katex .base {
           position: relative;
           display: inline-block;
@@ -164,111 +191,140 @@
           width: -moz-min-content;
           width: min-content;
       }
+
       .katex .strut {
           display: inline-block;
       }
+
       .katex .textbf {
           font-weight: bold;
       }
+
       .katex .textit {
           font-style: italic;
       }
+
       .katex .textrm {
           font-family: KaTeX_Main;
       }
+
       .katex .textsf {
           font-family: KaTeX_SansSerif;
       }
+
       .katex .texttt {
           font-family: KaTeX_Typewriter;
       }
+
       .katex .mathnormal {
           font-family: KaTeX_Math;
           font-style: italic;
       }
+
       .katex .mathit {
           font-family: KaTeX_Main;
           font-style: italic;
       }
+
       .katex .mathrm {
           font-style: normal;
       }
+
       .katex .mathbf {
           font-family: KaTeX_Main;
           font-weight: bold;
       }
+
       .katex .boldsymbol {
           font-family: KaTeX_Math;
           font-weight: bold;
           font-style: italic;
       }
+
       .katex .amsrm {
           font-family: KaTeX_AMS;
       }
+
       .katex .mathbb,
       .katex .textbb {
           font-family: KaTeX_AMS;
       }
+
       .katex .mathcal {
           font-family: KaTeX_Caligraphic;
       }
+
       .katex .mathfrak,
       .katex .textfrak {
           font-family: KaTeX_Fraktur;
       }
+
       .katex .mathtt {
           font-family: KaTeX_Typewriter;
       }
+
       .katex .mathscr,
       .katex .textscr {
           font-family: KaTeX_Script;
       }
+
       .katex .mathsf,
       .katex .textsf {
           font-family: KaTeX_SansSerif;
       }
+
       .katex .mathboldsf,
       .katex .textboldsf {
           font-family: KaTeX_SansSerif;
           font-weight: bold;
       }
+
       .katex .mathitsf,
       .katex .textitsf {
           font-family: KaTeX_SansSerif;
           font-style: italic;
       }
+
       .katex .mainrm {
           font-family: KaTeX_Main;
           font-style: normal;
       }
+
       .katex .vlist-t {
           display: inline-table;
           table-layout: fixed;
           border-collapse: collapse;
       }
+
       .katex .vlist-r {
           display: table-row;
       }
+
       .katex .vlist {
           display: table-cell;
           vertical-align: bottom;
           position: relative;
       }
+
       .katex .vlist > span {
           display: block;
           height: 0;
           position: relative;
       }
+
       .katex .vlist > span > span {
           display: inline-block;
       }
+
       .katex .vlist > span > .pstrut {
           overflow: hidden;
           width: 0;
       }
+
       .katex .vlist-t2 {
           margin-right: -2px;
       }
+
       .katex .vlist-s {
           display: table-cell;
           vertical-align: bottom;
@@ -276,33 +332,40 @@
           width: 2px;
           min-width: 2px;
       }
+
       .katex .vbox {
           display: inline-flex;
           flex-direction: column;
           align-items: baseline;
       }
+
       .katex .hbox {
           display: inline-flex;
           flex-direction: row;
           width: 100%;
       }
+
       .katex .thinbox {
           display: inline-flex;
           flex-direction: row;
           width: 0;
           max-width: 0;
       }
+
       .katex .msupsub {
           text-align: left;
       }
+
       .katex .mfrac > span > span {
           text-align: center;
       }
+
       .katex .mfrac .frac-line {
           display: inline-block;
           width: 100%;
           border-bottom-style: solid;
       }
+
       .katex .mfrac .frac-line,
       .katex .overline .overline-line,
       .katex .underline .underline-line,
@@ -311,41 +374,50 @@
       .katex .rule {
           min-height: 1px;
       }
+
       .katex .mspace {
           display: inline-block;
       }
+
       .katex .llap,
       .katex .rlap,
       .katex .clap {
           width: 0;
           position: relative;
       }
+
       .katex .llap > .inner,
       .katex .rlap > .inner,
       .katex .clap > .inner {
           position: absolute;
       }
+
       .katex .llap > .fix,
       .katex .rlap > .fix,
       .katex .clap > .fix {
           display: inline-block;
       }
+
       .katex .llap > .inner {
           right: 0;
       }
+
       .katex .rlap > .inner,
       .katex .clap > .inner {
           left: 0;
       }
+
       .katex .clap > .inner > span {
           margin-left: -50%;
           margin-right: 50%;
       }
+
       .katex .rule {
           display: inline-block;
           border: solid 0;
           position: relative;
       }
+
       .katex .overline .overline-line,
       .katex .underline .underline-line,
       .katex .hline {
@@ -353,569 +425,715 @@
           width: 100%;
           border-bottom-style: solid;
       }
+
       .katex .hdashline {
           display: inline-block;
           width: 100%;
           border-bottom-style: dashed;
       }
+
       .katex .sqrt > .root {
           /* These values are taken from the definition of `\r@@t`,
                      `\mkern 5mu` and `\mkern -10mu`. */
           margin-left: 0.27777778em;
           margin-right: -0.55555556em;
       }
+
       .katex .sizing.reset-size1.size1,
       .katex .fontsize-ensurer.reset-size1.size1 {
           font-size: 1em;
       }
+
       .katex .sizing.reset-size1.size2,
       .katex .fontsize-ensurer.reset-size1.size2 {
           font-size: 1.2em;
       }
+
       .katex .sizing.reset-size1.size3,
       .katex .fontsize-ensurer.reset-size1.size3 {
           font-size: 1.4em;
       }
+
       .katex .sizing.reset-size1.size4,
       .katex .fontsize-ensurer.reset-size1.size4 {
           font-size: 1.6em;
       }
+
       .katex .sizing.reset-size1.size5,
       .katex .fontsize-ensurer.reset-size1.size5 {
           font-size: 1.8em;
       }
+
       .katex .sizing.reset-size1.size6,
       .katex .fontsize-ensurer.reset-size1.size6 {
           font-size: 2em;
       }
+
       .katex .sizing.reset-size1.size7,
       .katex .fontsize-ensurer.reset-size1.size7 {
           font-size: 2.4em;
       }
+
       .katex .sizing.reset-size1.size8,
       .katex .fontsize-ensurer.reset-size1.size8 {
           font-size: 2.88em;
       }
+
       .katex .sizing.reset-size1.size9,
       .katex .fontsize-ensurer.reset-size1.size9 {
           font-size: 3.456em;
       }
+
       .katex .sizing.reset-size1.size10,
       .katex .fontsize-ensurer.reset-size1.size10 {
           font-size: 4.148em;
       }
+
       .katex .sizing.reset-size1.size11,
       .katex .fontsize-ensurer.reset-size1.size11 {
           font-size: 4.976em;
       }
+
       .katex .sizing.reset-size2.size1,
       .katex .fontsize-ensurer.reset-size2.size1 {
           font-size: 0.83333333em;
       }
+
       .katex .sizing.reset-size2.size2,
       .katex .fontsize-ensurer.reset-size2.size2 {
           font-size: 1em;
       }
+
       .katex .sizing.reset-size2.size3,
       .katex .fontsize-ensurer.reset-size2.size3 {
           font-size: 1.16666667em;
       }
+
       .katex .sizing.reset-size2.size4,
       .katex .fontsize-ensurer.reset-size2.size4 {
           font-size: 1.33333333em;
       }
+
       .katex .sizing.reset-size2.size5,
       .katex .fontsize-ensurer.reset-size2.size5 {
           font-size: 1.5em;
       }
+
       .katex .sizing.reset-size2.size6,
       .katex .fontsize-ensurer.reset-size2.size6 {
           font-size: 1.66666667em;
       }
+
       .katex .sizing.reset-size2.size7,
       .katex .fontsize-ensurer.reset-size2.size7 {
           font-size: 2em;
       }
+
       .katex .sizing.reset-size2.size8,
       .katex .fontsize-ensurer.reset-size2.size8 {
           font-size: 2.4em;
       }
+
       .katex .sizing.reset-size2.size9,
       .katex .fontsize-ensurer.reset-size2.size9 {
           font-size: 2.88em;
       }
+
       .katex .sizing.reset-size2.size10,
       .katex .fontsize-ensurer.reset-size2.size10 {
           font-size: 3.45666667em;
       }
+
       .katex .sizing.reset-size2.size11,
       .katex .fontsize-ensurer.reset-size2.size11 {
           font-size: 4.14666667em;
       }
+
       .katex .sizing.reset-size3.size1,
       .katex .fontsize-ensurer.reset-size3.size1 {
           font-size: 0.71428571em;
       }
+
       .katex .sizing.reset-size3.size2,
       .katex .fontsize-ensurer.reset-size3.size2 {
           font-size: 0.85714286em;
       }
+
       .katex .sizing.reset-size3.size3,
       .katex .fontsize-ensurer.reset-size3.size3 {
           font-size: 1em;
       }
+
       .katex .sizing.reset-size3.size4,
       .katex .fontsize-ensurer.reset-size3.size4 {
           font-size: 1.14285714em;
       }
+
       .katex .sizing.reset-size3.size5,
       .katex .fontsize-ensurer.reset-size3.size5 {
           font-size: 1.28571429em;
       }
+
       .katex .sizing.reset-size3.size6,
       .katex .fontsize-ensurer.reset-size3.size6 {
           font-size: 1.42857143em;
       }
+
       .katex .sizing.reset-size3.size7,
       .katex .fontsize-ensurer.reset-size3.size7 {
           font-size: 1.71428571em;
       }
+
       .katex .sizing.reset-size3.size8,
       .katex .fontsize-ensurer.reset-size3.size8 {
           font-size: 2.05714286em;
       }
+
       .katex .sizing.reset-size3.size9,
       .katex .fontsize-ensurer.reset-size3.size9 {
           font-size: 2.46857143em;
       }
+
       .katex .sizing.reset-size3.size10,
       .katex .fontsize-ensurer.reset-size3.size10 {
           font-size: 2.96285714em;
       }
+
       .katex .sizing.reset-size3.size11,
       .katex .fontsize-ensurer.reset-size3.size11 {
           font-size: 3.55428571em;
       }
+
       .katex .sizing.reset-size4.size1,
       .katex .fontsize-ensurer.reset-size4.size1 {
           font-size: 0.625em;
       }
+
       .katex .sizing.reset-size4.size2,
       .katex .fontsize-ensurer.reset-size4.size2 {
           font-size: 0.75em;
       }
+
       .katex .sizing.reset-size4.size3,
       .katex .fontsize-ensurer.reset-size4.size3 {
           font-size: 0.875em;
       }
+
       .katex .sizing.reset-size4.size4,
       .katex .fontsize-ensurer.reset-size4.size4 {
           font-size: 1em;
       }
+
       .katex .sizing.reset-size4.size5,
       .katex .fontsize-ensurer.reset-size4.size5 {
           font-size: 1.125em;
       }
+
       .katex .sizing.reset-size4.size6,
       .katex .fontsize-ensurer.reset-size4.size6 {
           font-size: 1.25em;
       }
+
       .katex .sizing.reset-size4.size7,
       .katex .fontsize-ensurer.reset-size4.size7 {
           font-size: 1.5em;
       }
+
       .katex .sizing.reset-size4.size8,
       .katex .fontsize-ensurer.reset-size4.size8 {
           font-size: 1.8em;
       }
+
       .katex .sizing.reset-size4.size9,
       .katex .fontsize-ensurer.reset-size4.size9 {
           font-size: 2.16em;
       }
+
       .katex .sizing.reset-size4.size10,
       .katex .fontsize-ensurer.reset-size4.size10 {
           font-size: 2.5925em;
       }
+
       .katex .sizing.reset-size4.size11,
       .katex .fontsize-ensurer.reset-size4.size11 {
           font-size: 3.11em;
       }
+
       .katex .sizing.reset-size5.size1,
       .katex .fontsize-ensurer.reset-size5.size1 {
           font-size: 0.55555556em;
       }
+
       .katex .sizing.reset-size5.size2,
       .katex .fontsize-ensurer.reset-size5.size2 {
           font-size: 0.66666667em;
       }
+
       .katex .sizing.reset-size5.size3,
       .katex .fontsize-ensurer.reset-size5.size3 {
           font-size: 0.77777778em;
       }
+
       .katex .sizing.reset-size5.size4,
       .katex .fontsize-ensurer.reset-size5.size4 {
           font-size: 0.88888889em;
       }
+
       .katex .sizing.reset-size5.size5,
       .katex .fontsize-ensurer.reset-size5.size5 {
           font-size: 1em;
       }
+
       .katex .sizing.reset-size5.size6,
       .katex .fontsize-ensurer.reset-size5.size6 {
           font-size: 1.11111111em;
       }
+
       .katex .sizing.reset-size5.size7,
       .katex .fontsize-ensurer.reset-size5.size7 {
           font-size: 1.33333333em;
       }
+
       .katex .sizing.reset-size5.size8,
       .katex .fontsize-ensurer.reset-size5.size8 {
           font-size: 1.6em;
       }
+
       .katex .sizing.reset-size5.size9,
       .katex .fontsize-ensurer.reset-size5.size9 {
           font-size: 1.92em;
       }
+
       .katex .sizing.reset-size5.size10,
       .katex .fontsize-ensurer.reset-size5.size10 {
           font-size: 2.30444444em;
       }
+
       .katex .sizing.reset-size5.size11,
       .katex .fontsize-ensurer.reset-size5.size11 {
           font-size: 2.76444444em;
       }
+
       .katex .sizing.reset-size6.size1,
       .katex .fontsize-ensurer.reset-size6.size1 {
           font-size: 0.5em;
       }
+
       .katex .sizing.reset-size6.size2,
       .katex .fontsize-ensurer.reset-size6.size2 {
           font-size: 0.6em;
       }
+
       .katex .sizing.reset-size6.size3,
       .katex .fontsize-ensurer.reset-size6.size3 {
           font-size: 0.7em;
       }
+
       .katex .sizing.reset-size6.size4,
       .katex .fontsize-ensurer.reset-size6.size4 {
           font-size: 0.8em;
       }
+
       .katex .sizing.reset-size6.size5,
       .katex .fontsize-ensurer.reset-size6.size5 {
           font-size: 0.9em;
       }
+
       .katex .sizing.reset-size6.size6,
       .katex .fontsize-ensurer.reset-size6.size6 {
           font-size: 1em;
       }
+
       .katex .sizing.reset-size6.size7,
       .katex .fontsize-ensurer.reset-size6.size7 {
           font-size: 1.2em;
       }
+
       .katex .sizing.reset-size6.size8,
       .katex .fontsize-ensurer.reset-size6.size8 {
           font-size: 1.44em;
       }
+
       .katex .sizing.reset-size6.size9,
       .katex .fontsize-ensurer.reset-size6.size9 {
           font-size: 1.728em;
       }
+
       .katex .sizing.reset-size6.size10,
       .katex .fontsize-ensurer.reset-size6.size10 {
           font-size: 2.074em;
       }
+
       .katex .sizing.reset-size6.size11,
       .katex .fontsize-ensurer.reset-size6.size11 {
           font-size: 2.488em;
       }
+
       .katex .sizing.reset-size7.size1,
       .katex .fontsize-ensurer.reset-size7.size1 {
           font-size: 0.41666667em;
       }
+
       .katex .sizing.reset-size7.size2,
       .katex .fontsize-ensurer.reset-size7.size2 {
           font-size: 0.5em;
       }
+
       .katex .sizing.reset-size7.size3,
       .katex .fontsize-ensurer.reset-size7.size3 {
           font-size: 0.58333333em;
       }
+
       .katex .sizing.reset-size7.size4,
       .katex .fontsize-ensurer.reset-size7.size4 {
           font-size: 0.66666667em;
       }
+
       .katex .sizing.reset-size7.size5,
       .katex .fontsize-ensurer.reset-size7.size5 {
           font-size: 0.75em;
       }
+
       .katex .sizing.reset-size7.size6,
       .katex .fontsize-ensurer.reset-size7.size6 {
           font-size: 0.83333333em;
       }
+
       .katex .sizing.reset-size7.size7,
       .katex .fontsize-ensurer.reset-size7.size7 {
           font-size: 1em;
       }
+
       .katex .sizing.reset-size7.size8,
       .katex .fontsize-ensurer.reset-size7.size8 {
           font-size: 1.2em;
       }
+
       .katex .sizing.reset-size7.size9,
       .katex .fontsize-ensurer.reset-size7.size9 {
           font-size: 1.44em;
       }
+
       .katex .sizing.reset-size7.size10,
       .katex .fontsize-ensurer.reset-size7.size10 {
           font-size: 1.72833333em;
       }
+
       .katex .sizing.reset-size7.size11,
       .katex .fontsize-ensurer.reset-size7.size11 {
           font-size: 2.07333333em;
       }
+
       .katex .sizing.reset-size8.size1,
       .katex .fontsize-ensurer.reset-size8.size1 {
           font-size: 0.34722222em;
       }
+
       .katex .sizing.reset-size8.size2,
       .katex .fontsize-ensurer.reset-size8.size2 {
           font-size: 0.41666667em;
       }
+
       .katex .sizing.reset-size8.size3,
       .katex .fontsize-ensurer.reset-size8.size3 {
           font-size: 0.48611111em;
       }
+
       .katex .sizing.reset-size8.size4,
       .katex .fontsize-ensurer.reset-size8.size4 {
           font-size: 0.55555556em;
       }
+
       .katex .sizing.reset-size8.size5,
       .katex .fontsize-ensurer.reset-size8.size5 {
           font-size: 0.625em;
       }
+
       .katex .sizing.reset-size8.size6,
       .katex .fontsize-ensurer.reset-size8.size6 {
           font-size: 0.69444444em;
       }
+
       .katex .sizing.reset-size8.size7,
       .katex .fontsize-ensurer.reset-size8.size7 {
           font-size: 0.83333333em;
       }
+
       .katex .sizing.reset-size8.size8,
       .katex .fontsize-ensurer.reset-size8.size8 {
           font-size: 1em;
       }
+
       .katex .sizing.reset-size8.size9,
       .katex .fontsize-ensurer.reset-size8.size9 {
           font-size: 1.2em;
       }
+
       .katex .sizing.reset-size8.size10,
       .katex .fontsize-ensurer.reset-size8.size10 {
           font-size: 1.44027778em;
       }
+
       .katex .sizing.reset-size8.size11,
       .katex .fontsize-ensurer.reset-size8.size11 {
           font-size: 1.72777778em;
       }
+
       .katex .sizing.reset-size9.size1,
       .katex .fontsize-ensurer.reset-size9.size1 {
           font-size: 0.28935185em;
       }
+
       .katex .sizing.reset-size9.size2,
       .katex .fontsize-ensurer.reset-size9.size2 {
           font-size: 0.34722222em;
       }
+
       .katex .sizing.reset-size9.size3,
       .katex .fontsize-ensurer.reset-size9.size3 {
           font-size: 0.40509259em;
       }
+
       .katex .sizing.reset-size9.size4,
       .katex .fontsize-ensurer.reset-size9.size4 {
           font-size: 0.46296296em;
       }
+
       .katex .sizing.reset-size9.size5,
       .katex .fontsize-ensurer.reset-size9.size5 {
           font-size: 0.52083333em;
       }
+
       .katex .sizing.reset-size9.size6,
       .katex .fontsize-ensurer.reset-size9.size6 {
           font-size: 0.5787037em;
       }
+
       .katex .sizing.reset-size9.size7,
       .katex .fontsize-ensurer.reset-size9.size7 {
           font-size: 0.69444444em;
       }
+
       .katex .sizing.reset-size9.size8,
       .katex .fontsize-ensurer.reset-size9.size8 {
           font-size: 0.83333333em;
       }
+
       .katex .sizing.reset-size9.size9,
       .katex .fontsize-ensurer.reset-size9.size9 {
           font-size: 1em;
       }
+
       .katex .sizing.reset-size9.size10,
       .katex .fontsize-ensurer.reset-size9.size10 {
           font-size: 1.20023148em;
       }
+
       .katex .sizing.reset-size9.size11,
       .katex .fontsize-ensurer.reset-size9.size11 {
           font-size: 1.43981481em;
       }
+
       .katex .sizing.reset-size10.size1,
       .katex .fontsize-ensurer.reset-size10.size1 {
           font-size: 0.24108004em;
       }
+
       .katex .sizing.reset-size10.size2,
       .katex .fontsize-ensurer.reset-size10.size2 {
           font-size: 0.28929605em;
       }
+
       .katex .sizing.reset-size10.size3,
       .katex .fontsize-ensurer.reset-size10.size3 {
           font-size: 0.33751205em;
       }
+
       .katex .sizing.reset-size10.size4,
       .katex .fontsize-ensurer.reset-size10.size4 {
           font-size: 0.38572806em;
       }
+
       .katex .sizing.reset-size10.size5,
       .katex .fontsize-ensurer.reset-size10.size5 {
           font-size: 0.43394407em;
       }
+
       .katex .sizing.reset-size10.size6,
       .katex .fontsize-ensurer.reset-size10.size6 {
           font-size: 0.48216008em;
       }
+
       .katex .sizing.reset-size10.size7,
       .katex .fontsize-ensurer.reset-size10.size7 {
           font-size: 0.57859209em;
       }
+
       .katex .sizing.reset-size10.size8,
       .katex .fontsize-ensurer.reset-size10.size8 {
           font-size: 0.69431051em;
       }
+
       .katex .sizing.reset-size10.size9,
       .katex .fontsize-ensurer.reset-size10.size9 {
           font-size: 0.83317261em;
       }
+
       .katex .sizing.reset-size10.size10,
       .katex .fontsize-ensurer.reset-size10.size10 {
           font-size: 1em;
       }
+
       .katex .sizing.reset-size10.size11,
       .katex .fontsize-ensurer.reset-size10.size11 {
           font-size: 1.19961427em;
       }
+
       .katex .sizing.reset-size11.size1,
       .katex .fontsize-ensurer.reset-size11.size1 {
           font-size: 0.20096463em;
       }
+
       .katex .sizing.reset-size11.size2,
       .katex .fontsize-ensurer.reset-size11.size2 {
           font-size: 0.24115756em;
       }
+
       .katex .sizing.reset-size11.size3,
       .katex .fontsize-ensurer.reset-size11.size3 {
           font-size: 0.28135048em;
       }
+
       .katex .sizing.reset-size11.size4,
       .katex .fontsize-ensurer.reset-size11.size4 {
           font-size: 0.32154341em;
       }
+
       .katex .sizing.reset-size11.size5,
       .katex .fontsize-ensurer.reset-size11.size5 {
           font-size: 0.36173633em;
       }
+
       .katex .sizing.reset-size11.size6,
       .katex .fontsize-ensurer.reset-size11.size6 {
           font-size: 0.40192926em;
       }
+
       .katex .sizing.reset-size11.size7,
       .katex .fontsize-ensurer.reset-size11.size7 {
           font-size: 0.48231511em;
       }
+
       .katex .sizing.reset-size11.size8,
       .katex .fontsize-ensurer.reset-size11.size8 {
           font-size: 0.57877814em;
       }
+
       .katex .sizing.reset-size11.size9,
       .katex .fontsize-ensurer.reset-size11.size9 {
           font-size: 0.69453376em;
       }
+
       .katex .sizing.reset-size11.size10,
       .katex .fontsize-ensurer.reset-size11.size10 {
           font-size: 0.83360129em;
       }
+
       .katex .sizing.reset-size11.size11,
       .katex .fontsize-ensurer.reset-size11.size11 {
           font-size: 1em;
       }
+
       .katex .delimsizing.size1 {
           font-family: KaTeX_Size1;
       }
+
       .katex .delimsizing.size2 {
           font-family: KaTeX_Size2;
       }
+
       .katex .delimsizing.size3 {
           font-family: KaTeX_Size3;
       }
+
       .katex .delimsizing.size4 {
           font-family: KaTeX_Size4;
       }
+
       .katex .delimsizing.mult .delim-size1 > span {
           font-family: KaTeX_Size1;
       }
+
       .katex .delimsizing.mult .delim-size4 > span {
           font-family: KaTeX_Size4;
       }
+
       .katex .nulldelimiter {
           display: inline-block;
           width: 0.12em;
       }
+
       .katex .delimcenter {
           position: relative;
       }
+
       .katex .op-symbol {
           position: relative;
       }
+
       .katex .op-symbol.small-op {
           font-family: KaTeX_Size1;
       }
+
       .katex .op-symbol.large-op {
           font-family: KaTeX_Size2;
       }
+
       .katex .op-limits > .vlist-t {
           text-align: center;
       }
+
       .katex .accent > .vlist-t {
           text-align: center;
       }
+
       .katex .accent .accent-body {
           position: relative;
       }
+
       .katex .accent .accent-body:not(.accent-full) {
           width: 0;
       }
+
       .katex .overlay {
           display: block;
       }
+
       .katex .mtable .vertical-separator {
           display: inline-block;
           min-width: 1px;
       }
+
       .katex .mtable .arraycolsep {
           display: inline-block;
       }
+
       .katex .mtable .col-align-c > .vlist-t {
           text-align: center;
       }
+
       .katex .mtable .col-align-l > .vlist-t {
           text-align: left;
       }
+
       .katex .mtable .col-align-r > .vlist-t {
           text-align: right;
       }
+
       .katex .svg-align {
           text-align: left;
       }
+
       .katex svg {
           display: block;
           position: absolute;
@@ -933,9 +1151,11 @@
           stroke-dashoffset: 0;
           stroke-opacity: 1;
       }
+
       .katex svg path {
           stroke: none;
       }
+
       .katex img {
           border-style: none;
           min-width: 0;
@@ -943,143 +1163,174 @@
           max-width: none;
           max-height: none;
       }
+
       .katex .stretchy {
           width: 100%;
           display: block;
           position: relative;
           overflow: hidden;
       }
+
       .katex .stretchy::before,
       .katex .stretchy::after {
           content: "";
       }
+
       .katex .hide-tail {
           width: 100%;
           position: relative;
           overflow: hidden;
       }
+
       .katex .halfarrow-left {
           position: absolute;
           left: 0;
           width: 50.2%;
           overflow: hidden;
       }
+
       .katex .halfarrow-right {
           position: absolute;
           right: 0;
           width: 50.2%;
           overflow: hidden;
       }
+
       .katex .brace-left {
           position: absolute;
           left: 0;
           width: 25.1%;
           overflow: hidden;
       }
+
       .katex .brace-center {
           position: absolute;
           left: 25%;
           width: 50%;
           overflow: hidden;
       }
+
       .katex .brace-right {
           position: absolute;
           right: 0;
           width: 25.1%;
           overflow: hidden;
       }
+
       .katex .x-arrow-pad {
           padding: 0 0.5em;
       }
+
       .katex .cd-arrow-pad {
           padding: 0 0.55556em 0 0.27778em;
       }
+
       .katex .x-arrow,
       .katex .mover,
       .katex .munder {
           text-align: center;
       }
+
       .katex .boxpad {
           padding: 0 0.3em;
       }
+
       .katex .fbox,
       .katex .fcolorbox {
           box-sizing: border-box;
           border: 0.04em solid;
       }
+
       .katex .cancel-pad {
           padding: 0 0.2em;
       }
+
       .katex .cancel-lap {
           margin-left: -0.2em;
           margin-right: -0.2em;
       }
+
       .katex .sout {
           border-bottom-style: solid;
           border-bottom-width: 0.08em;
       }
+
       .katex .angl {
           box-sizing: border-box;
           border-top: 0.049em solid;
           border-right: 0.049em solid;
           margin-right: 0.03889em;
       }
+
       .katex .anglpad {
           padding: 0 0.03889em;
       }
+
       .katex .eqn-num::before {
           counter-increment: katexEqnNo;
           content: "(" counter(katexEqnNo) ")";
       }
+
       .katex .mml-eqn-num::before {
           counter-increment: mmlEqnNo;
           content: "(" counter(mmlEqnNo) ")";
       }
+
       .katex .mtr-glue {
           width: 50%;
       }
+
       .katex .cd-vert-arrow {
           display: inline-block;
           position: relative;
       }
+
       .katex .cd-label-left {
           display: inline-block;
           position: absolute;
           right: calc(50% + 0.3em);
           text-align: left;
       }
+
       .katex .cd-label-right {
           display: inline-block;
           position: absolute;
           left: calc(50% + 0.3em);
           text-align: right;
       }
+
       .katex-display {
           display: block;
           margin: 1em 0;
           text-align: center;
       }
+
       .katex-display > .katex {
           display: block;
           text-align: center;
           white-space: nowrap;
       }
+
       .katex-display > .katex > .katex-html {
           display: block;
           position: relative;
       }
+
       .katex-display > .katex > .katex-html > .tag {
           position: absolute;
           right: 0;
       }
+
       .katex-display.leqno > .katex > .katex-html > .tag {
           left: 0;
           right: auto;
       }
+
       .katex-display.fleqn > .katex {
           text-align: left;
           padding-left: 2em;
       }
+
       body {
           counter-reset: katexEqnNo mmlEqnNo;
       }
@@ -1144,17 +1395,17 @@
           height: 100%;
           width: 300px;
           padding-left: 15px;
-          border-right: 1px solid#eeeeee;
+          border-right: 1px solid #eeeeee;
           overflow-x: hidden;
           overflow-y: scroll
       }
 
-      .toc>h1,
-      .toc>h2,
-      .toc>h3,
-      .toc>h4,
-      .toc>h5,
-      .toc>h6 {
+      .toc > h1,
+      .toc > h2,
+      .toc > h3,
+      .toc > h4,
+      .toc > h5,
+      .toc > h6 {
           margin: 0;
           font-size: 15px;
           font-weight: 300;
@@ -1162,12 +1413,12 @@
           color: #727272
       }
 
-      .toc>h1:hover,
-      .toc>h2:hover,
-      .toc>h3:hover,
-      .toc>h4:hover,
-      .toc>h5:hover,
-      .toc>h6:hover {
+      .toc > h1:hover,
+      .toc > h2:hover,
+      .toc > h3:hover,
+      .toc > h4:hover,
+      .toc > h5:hover,
+      .toc > h6:hover {
           color: #7843E9
       }
 
@@ -1222,7 +1473,7 @@
           --bl-preview-border-radius: 4px;
           --bl-preview-toc-border-color: #e0e0e0;
           --bl-preview-h1-bg-color: #eaeaea;
-          --bl-preview-h1-box-shadow: 3px 3px 5px 1px#a8a8a8;
+          --bl-preview-h1-box-shadow: 3px 3px 5px 1px #a8a8a8;
           --bl-preview-h1-text-shadow: 3px 3px 3px rgb(148, 148, 148);
           --bl-preview-table-border-color: #939393;
           --bl-preview-table-thead-bg-color: #2b2b2b;
@@ -1241,11 +1492,11 @@
           --bl-preview-blockquote-border-purple: #ba9bf2;
           --bl-preview-blockquote-bg-black: rgba(0, 0, 0, 0.7);
           --bl-preview-blockquote-border-black: #000000;
-          --bl-preview-img-box-shadow: 2px 2px 10px 3px#c6c6c6;
+          --bl-preview-img-box-shadow: 2px 2px 10px 3px #c6c6c6;
           --bl-preview-img-filter: brightness(100%);
           --bl-preview-code-bg-color: #eaeaea;
           --bl-preview-pre-bg-color: #2b2b2b;
-          --bl-preview-pre-box-shadow: 2px 2px 10px 1px#000;
+          --bl-preview-pre-box-shadow: 2px 2px 10px 1px #000;
       }
 
       html.dark {
@@ -1272,8 +1523,8 @@
           --bl-preview-border-radius: 4px;
           --bl-preview-toc-border-color: #525252;
           --bl-preview-h1-bg-color: #545454;
-          --bl-preview-h1-box-shadow: 3px 3px 5px 1px#000000;
-          --bl-preview-h1-text-shadow: 3px 3px 3px#000000;
+          --bl-preview-h1-box-shadow: 3px 3px 5px 1px #000000;
+          --bl-preview-h1-text-shadow: 3px 3px 3px #000000;
           --bl-preview-table-border-color: #525252;
           --bl-preview-table-thead-bg-color: #454545;
           --bl-preview-blockquote-color: #b9b9b9;
@@ -1291,11 +1542,11 @@
           --bl-preview-blockquote-border-purple: #4600c8;
           --bl-preview-blockquote-bg-black: #181818;
           --bl-preview-blockquote-border-black: #000000;
-          --bl-preview-img-box-shadow: 2px 2px 10px 3px#000000;
+          --bl-preview-img-box-shadow: 2px 2px 10px 3px #000000;
           --bl-preview-img-filter: brightness(80%);
           --bl-preview-code-bg-color: #414141;
           --bl-preview-pre-bg-color: #131313;
-          --bl-preview-pre-box-shadow: inset 0 0 5px 3px#000;
+          --bl-preview-pre-box-shadow: inset 0 0 5px 3px #000;
       }
 
       * {
@@ -1445,7 +1696,8 @@
           color: #d4d4d4;
       }
 
-      .bl-preview table thead tr {}
+      .bl-preview table thead tr {
+      }
 
       .bl-preview table thead tr th {
           font-size: 16px !important;
@@ -1457,9 +1709,11 @@
           border: 0;
       }
 
-      .bl-preview table tbody {}
+      .bl-preview table tbody {
+      }
 
-      .bl-preview table tbody tr {}
+      .bl-preview table tbody tr {
+      }
 
       .bl-preview table tbody tr td {
           padding: 5px;
@@ -1473,7 +1727,8 @@
           border-right: 0
       }
 
-      .bl-preview table tbody tr:last-child {}
+      .bl-preview table tbody tr:last-child {
+      }
 
       .bl-preview table tbody tr:last-child td {
           border-bottom: 0
@@ -1487,7 +1742,8 @@
           display: none
       }
 
-      .bl-preview .bl-table-container tbody {}
+      .bl-preview .bl-table-container tbody {
+      }
 
       .bl-preview .bl-table-container tbody td {
           border: 0
@@ -1544,12 +1800,57 @@
       }
 
       .bl-preview pre {
-          padding: 10px 10px 10px 10px;
+          padding: 10px 10px 10px 30px;
           background-color: var(--bl-preview-pre-bg-color);
           overflow: scroll;
           border-radius: var(--bl-preview-border-radius);
           box-shadow: var(--bl-preview-pre-box-shadow);
-          font-size: 13px
+          font-size: 13px;
+          position: relative;
+      }
+
+      .bl-preview pre .pre-copy {
+          position: absolute;
+          top: 10px;
+          right: 10px;
+          text-align: right;
+          z-index: 10;
+          color: #5c5c5c;
+          padding: 1px 8px;
+          border-radius: 4px;
+          cursor: pointer;
+          user-select: none;
+      }
+
+      .bl-preview pre .pre-copy:hover {
+          background-color: #1a1a1a;
+          color: #9d9d9d;
+      }
+
+      .bl-preview pre .pre-copy:active {
+          color: #e2e2e2;
+      }
+
+      .bl-preview pre ol {
+          margin: 0;
+          padding-left: 0;
+          position: absolute;
+          top: 10px;
+          left: 3px;
+          user-select: none;
+      }
+
+      .bl-preview pre ol li {
+          list-style: none;
+      }
+
+      .bl-preview pre ol li .line-num {
+          width: 30px;
+          display: inline-block;
+          text-align: right;
+          padding-right: 10px;
+          color: #6a6a6a;
+          user-select: none;
       }
 
       .bl-preview pre code {
@@ -1694,7 +1995,36 @@
           color: #ffffff
       }
   </style>
-  <script>window.onload = function () { let heads = document.getElementById('blossom-view').querySelectorAll('h1, h2, h3, h4, h5, h6'); let tocs = []; let tocContainer = document.getElementById('blossom-toc'); for (let i = 0; i < heads.length; i++) { let head = heads[i]; let tocHead = document.createElement(head.localName); console.log(head.id); tocHead.setAttribute('class', `toc-${head.localName}`); tocHead.innerText = head.innerText; tocHead.onclick = function () { let ele = document.getElementById(head.id); if (ele == null || ele == undefined) { return }; ele.parentNode.scrollTop = ele.offsetTop - 30 }; tocContainer.appendChild(tocHead) } }</script>
+  <script>
+    window.onload = function () {
+      let heads = document.getElementById('blossom-view').querySelectorAll('h1, h2, h3, h4, h5, h6');
+      let tocContainer = document.getElementById('blossom-toc');
+      for (let i = 0; i < heads.length; i++) {
+        let head = heads[i];
+        let tocHead = document.createElement(head.localName);
+        console.log(head.id);
+        tocHead.setAttribute('class', `toc-${head.localName}`);
+        tocHead.innerText = head.innerText;
+        tocHead.onclick = function () {
+          let ele = document.getElementById(head.id);
+          if (ele == null || ele == undefined) {
+            return
+          }
+          ele.parentNode.scrollTop = ele.offsetTop - 30
+        };
+        tocContainer.appendChild(tocHead)
+      }
+    }
+
+    function onHtmlEventDispatch(type, data) {
+      if (type === 'copyPreCode') {
+        let code = document.getElementById(data)
+        if (code) {
+          navigator.clipboard.writeText(code.innerText)
+        }
+      }
+    }
+  </script>
 </head>
 
 
diff --git a/blossom-editor/src/renderer/src/assets/utils/hljsTest.ts b/blossom-editor/src/renderer/src/assets/utils/hljsTest.ts
index 4bb616a..404d5d4 100644
--- a/blossom-editor/src/renderer/src/assets/utils/hljsTest.ts
+++ b/blossom-editor/src/renderer/src/assets/utils/hljsTest.ts
@@ -2,19 +2,31 @@ import hljs from 'highlight.js'
 
 hljs.addPlugin({
   'after:highlight': (el) => {
-    console.log(el);
-    
+    // console.log(el.value);
+    // let result = '<ol>'
+    let lines: any[] = el.value.split(/\n|\r\n?|\n\n+/g)
+    // snsArr.forEach((item: string) => {
+    //   result += `<li>${item}</li>`
+    // })
+    // el.value = result += '</ol>'
     let result = '<ol>'
-    let snsArr: string[] = el.value.split(/[\n\r]+/)
-    snsArr.forEach((item: string) => {
-      result += `<li>${item}</li>`
-    })
-    el.value = result += '</ol>'
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i]
+      result += `<li>${i + 1}</li>`
+    }
+    el.value = el.value + result + '</ol>'
   }
 })
 
 const html = hljs.highlight(
-  `public void main () {
+  `/**
+ * 注释
+ */
+
+
+
+
+public void main () {
   li
   神经
 }`,
diff --git a/blossom-editor/src/renderer/src/views/article/styles/bl-preview.css b/blossom-editor/src/renderer/src/views/article/styles/bl-preview.css
index 3b8c949..27b5e25 100644
--- a/blossom-editor/src/renderer/src/views/article/styles/bl-preview.css
+++ b/blossom-editor/src/renderer/src/views/article/styles/bl-preview.css
@@ -246,7 +246,7 @@ table container
 
 .bl-preview pre .pre-copy {
   position: absolute;
-  top: 5px;
+  top: 10px;
   right: 10px;
   text-align: right;
   z-index: 10;
@@ -254,10 +254,16 @@ table container
   padding: 1px 8px;
   border-radius: 4px;
   cursor: pointer;
+  user-select: none;
 }
 
 .bl-preview pre .pre-copy:hover {
   background-color: #1a1a1a;
+  color: #9d9d9d;
+}
+
+.bl-preview pre .pre-copy:active {
+  color: #e2e2e2;
 }
 
 .bl-preview pre ol {
diff --git a/blossom-editor/src/renderer/src/views/doc/type.d.ts b/blossom-editor/src/renderer/src/views/doc/type.d.ts
index 34b7d63..31e4eb5 100644
--- a/blossom-editor/src/renderer/src/views/doc/type.d.ts
+++ b/blossom-editor/src/renderer/src/views/doc/type.d.ts
@@ -3,27 +3,27 @@
  */
 declare interface DocTree {
   /** id */
-  i: number,
+  i: number
   /** pid */
-  p: number,
+  p: number
   /** name */
-  n: string,
+  n: string
   /** open: 0:否;1:是; */
-  o: number,
+  o: number
   /** 版本有差异, 公开文章才会有此项 */
-  vd?: number | null,
+  vd?: number | null
   /** Tags */
-  t: string[],
+  t: string[]
   /** 排序 */
-  s: number,
+  s: number
   /** 图标 */
-  icon: string,
+  icon: string
   /** 文档类型: 1:文章文件夹|2:图片文件夹|3:文章; */
-  ty: DocType,
+  ty: DocType
   /** 是否 star */
-  star: number,
+  star: number
   /** 是否显示排序 */
-  showSort?: boolean,
+  showSort?: boolean
   /** 子集 */
   children?: DocTree[]
 }
@@ -32,47 +32,49 @@ declare interface DocTree {
  * 文章详情
  */
 declare interface DocInfo {
-  id: number,
-  pid: number,
-  name: string,
-  icon?: string,
-  tags: string[],
-  sort: number,
-  cover?: string,
-  color?: string,
-  describes?: string,
-  starStatus: number,
-  pv?: number,
-  uv?: number,
-  likes?: number,
-  words?: number,
-  version?: number,
-  storePath?: string,
-  subjectWords?: string,
-  subjectUpdTime?: string,
-  type: DocType,
-  creTime?: string,
-  updTime?: string,
-  toc?: string,
+  id: number
+  pid: number
+  name: string
+  icon?: string
+  tags: string[]
+  sort: number
+  cover?: string
+  color?: string
+  describes?: string
+  starStatus: number
+  pv?: number
+  uv?: number
+  likes?: number
+  words?: number
+  version?: number
+  storePath?: string
+  subjectWords?: string
+  subjectUpdTime?: string
+  type: DocType
+  creTime?: string
+  updTime?: string
+  toc?: string
   // 文章正文
-  markdown?: string,
-  html?: string,
+  markdown?: string
+  html?: string
   // 公开文章的信息
-  openStatus: number,
-  openTime?: string,
-  openVersion?: number,
-  syncTime?: string,
+  openStatus: number
+  openTime?: string
+  openVersion?: number
+  syncTime?: string
 }
 
 /** 文档类型: 1:文章文件夹|2:图片文件夹|3:文章|11:分隔文档; */
-declare type DocType = 1 | 2 | 3 | 11;
+declare type DocType = 1 | 2 | 3 | 11
 
 /** 文档弹框类型: 增|删|查 */
 declare type DocDialogType = 'add' | 'upd' | 'info'
 
 /** 右键菜单对象的显示位置 */
-declare type RightMenu = { show: boolean, clientX?: number, clientY?: number }
+declare type RightMenu = { show: boolean; clientX?: number; clientY?: number }
 
 declare type RightMenuLevel2 = { top: string }
 
-
+declare interface Window {
+  onHtmlEventDispatch: any
+}
diff --git a/blossom-web/src/views/article/Articles.vue b/blossom-web/src/views/article/Articles.vue
index ce42528..f8e43bf 100644
--- a/blossom-web/src/views/article/Articles.vue
+++ b/blossom-web/src/views/article/Articles.vue
@@ -8,22 +8,24 @@
 
     <div class="headmenu">
       <bl-row @click="handleMenu(!menuShow)">
-        <div class="iconbl  bl-model-line"></div>
-        <div style="font-size: 0.8rem;">菜单</div>
+        <div class="iconbl bl-model-line"></div>
+        <div style="font-size: 0.8rem">菜单</div>
       </bl-row>
       <bl-row just="flex-end" @click="handleToc(!tocShow)">
-        <div style="font-size: 0.8rem;">目录</div>
+        <div style="font-size: 0.8rem">目录</div>
         <div class="iconbl bl-list-ordered"></div>
       </bl-row>
     </div>
     <div class="main">
       <div class="menu" :style="menuStyle">
-        <el-menu v-if="docTreeData != undefined && docTreeData.length > 0" class="doc-trees"
-          :default-active="docTreeDefaultActive" :default-openeds="defaultOpeneds" :unique-opened="true">
-
+        <el-menu
+          v-if="docTreeData != undefined && docTreeData.length > 0"
+          class="doc-trees"
+          :default-active="docTreeDefaultActive"
+          :default-openeds="defaultOpeneds"
+          :unique-opened="true">
           <!-- ================================================ L1 ================================================ -->
           <div v-for="L1 in docTreeData" :key="L1.i" class="menu-level-one">
-
             <el-menu-item v-if="isEmpty(L1.children)" :index="L1.i">
               <template #title>
                 <DocTitle :trees="L1" @click-doc="clickCurDoc" />
@@ -32,7 +34,7 @@
 
             <el-sub-menu v-else :expand-open-icon="ArrowDownBold" :expand-close-icon="ArrowRightBold" :index="L1.i">
               <template #title>
-                <DocTitle :trees="L1" @click-doc="clickCurDoc" style="font-size: 15px;" />
+                <DocTitle :trees="L1" @click-doc="clickCurDoc" style="font-size: 15px" />
               </template>
 
               <!-- ================================================ L2 ================================================ -->
@@ -56,8 +58,7 @@
                       </template>
                     </el-menu-item>
 
-                    <el-sub-menu v-else :expand-open-icon="ArrowDownBold" :expand-close-icon="ArrowRightBold"
-                      :index="L3.i">
+                    <el-sub-menu v-else :expand-open-icon="ArrowDownBold" :expand-close-icon="ArrowRightBold" :index="L3.i">
                       <template #title>
                         <DocTitle :trees="L3" @click-doc="clickCurDoc" />
                       </template>
@@ -72,7 +73,6 @@
                       </div>
                     </el-sub-menu>
                   </div>
-
                 </el-sub-menu>
               </div>
             </el-sub-menu>
@@ -81,21 +81,23 @@
       </div>
 
       <div class="article">
-        <div class="bl-preview" v-html="article?.html">
-        </div>
+        <div class="bl-preview" v-html="article?.html"></div>
       </div>
 
       <div class="toc-container" :style="tocStyle">
         <div class="viewer-toc">
-          <div class="toc-subtitle" style="font-size: 15px;">《{{ article?.name }}》</div>
+          <div class="toc-subtitle" style="font-size: 15px">《{{ article?.name }}》</div>
           <div class="toc-subtitle">
-            <span class="iconbl bl-pen-line"></span> {{ article?.words }} 字 |
-            <span class="iconbl bl-read-line"></span> {{ article?.uv }} |
+            <span class="iconbl bl-pen-line"></span> {{ article?.words }} 字 | <span class="iconbl bl-read-line"></span> {{ article?.uv }} |
             <span class="iconbl bl-like-line"></span> {{ article?.likes }}
           </div>
-          <div class="toc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 公开 {{ article?.openTime }}
+          <div class="toc-subtitle">
+            <span class="iconbl bl-a-clock3-line"></span> 公开
+            {{ article?.openTime }}
           </div>
-          <div class="toc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 修改 {{ article?.syncTime }}
+          <div class="toc-subtitle">
+            <span class="iconbl bl-a-clock3-line"></span> 修改
+            {{ article?.syncTime }}
           </div>
           <div class="toc-title">目录</div>
           <div class="toc-content">
@@ -111,16 +113,20 @@
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
-import { ref, onActivated, onUnmounted } from "vue";
+import { ref, onActivated, onUnmounted, onMounted } from 'vue'
 import { ArrowDownBold, ArrowRightBold } from '@element-plus/icons-vue'
 import { articleInfoOpenApi, docTreeApi } from '@/api/blossom'
 import { isNull, isEmpty, isNotNull } from '@/assets/utils/obj'
 import DocTitle from './DocTitle.vue'
-import IndexHeader from "../index/IndexHeader.vue"
+import IndexHeader from '../index/IndexHeader.vue'
 import 'katex/dist/katex.min.css'
 
+onMounted(() => {
+  window.onHtmlEventDispatch = onHtmlEventDispatch
+})
+
 onActivated(() => {
-  getRouteQueryParams();
+  getRouteQueryParams()
   window.addEventListener('resize', onresize)
   initStyle()
 })
@@ -133,7 +139,7 @@ onUnmounted(() => {
  * 路由中获取ID参数
  */
 const getRouteQueryParams = () => {
-  let articleId = route.query.articleId;
+  let articleId = route.query.articleId
   getDocTree()
   if (isNotNull(articleId)) {
     docTreeDefaultActive.value = articleId as string
@@ -142,7 +148,7 @@ const getRouteQueryParams = () => {
   }
 }
 
-const route = useRoute();
+const route = useRoute()
 // 文档菜单的加载动画
 const docTreeLoading = ref(true)
 // 文档菜单
@@ -170,17 +176,19 @@ const defaultOpeneds = ref<string[]>([])
  * 2. 在 workbench 中点击按钮调用, 每个按钮是单选的
  */
 const getDocTree = () => {
-  docTreeLoading.value = true;
+  docTreeLoading.value = true
   docTreeData.value = []
   defaultOpeneds.value = []
-  docTreeApi({ onlyOpen: true }).then(resp => {
-    docTreeData.value = resp.data
-    docTreeData.value.forEach((l1: DocTree) => {
-      defaultOpeneds.value.push(l1.i.toString())
+  docTreeApi({ onlyOpen: true })
+    .then((resp) => {
+      docTreeData.value = resp.data
+      docTreeData.value.forEach((l1: DocTree) => {
+        defaultOpeneds.value.push(l1.i.toString())
+      })
+    })
+    .finally(() => {
+      docTreeLoading.value = false
     })
-  }).finally(() => {
-    docTreeLoading.value = false
-  })
 }
 
 const clickCurDoc = async (tree: DocTree) => {
@@ -190,22 +198,17 @@ const clickCurDoc = async (tree: DocTree) => {
   }
 }
 
-
 /**
  * 如果点击的是文章, 则查询文章信息和正文, 并在编辑器中显示.
  */
 const getCurEditArticle = async (id: number) => {
-  // previewLoading.value = true
-  // tocList.value = []
-  await articleInfoOpenApi({ id: id, showToc: true, showMarkdown: false, showHtml: true }).then(resp => {
-    if (isNull(resp.data)) {
-      return
-    }
-    article.value = resp.data
-    tocList.value = JSON.parse(resp.data.toc)
-  }).finally(() => {
-    // setTimeout(() => { previewLoading.value = false }, 500);
-  })
+  await articleInfoOpenApi({ id: id, showToc: true, showMarkdown: false, showHtml: true })
+    .then((resp) => {
+      if (isNull(resp.data)) return
+      article.value = resp.data
+      tocList.value = JSON.parse(resp.data.toc)
+    })
+    .finally(() => {})
 }
 
 const toScroll = (level: number, content: string) => {
@@ -214,8 +217,20 @@ const toScroll = (level: number, content: string) => {
   elm?.scrollIntoView(true)
 }
 
+/**
+ * 监听 html 的内联事件
+ */
+type HtmlEvent = 'copyPreCode' | ''
+const onHtmlEventDispatch = (type: HtmlEvent, data: any) => {
+  if (type === 'copyPreCode') {
+    let code = document.getElementById(data)
+    if (code) {
+      navigator.clipboard.writeText(code.innerText)
+    }
+  }
+}
 
-//#region 样式
+//#region ----------------------------------------< 响应式样式 >--------------------------------------
 const maskStyle = ref({ display: 'none' })
 const menuShow = ref(false)
 const menuStyle = ref({ display: 'none', opacity: 0 })
@@ -227,11 +242,15 @@ const handleMenu = (show: boolean) => {
   if (show) {
     maskStyle.value = { display: 'block' }
     menuStyle.value = { display: 'block', opacity: 0 }
-    setTimeout(() => { menuStyle.value = { display: 'block', opacity: 1 } }, 1)
+    setTimeout(() => {
+      menuStyle.value = { display: 'block', opacity: 1 }
+    }, 1)
   }
   if (!show) {
     menuStyle.value = { display: 'block', opacity: 0 }
-    setTimeout(() => { menuStyle.value = { display: 'none', opacity: 0 } }, 300)
+    setTimeout(() => {
+      menuStyle.value = { display: 'none', opacity: 0 }
+    }, 300)
   }
 }
 
@@ -240,11 +259,15 @@ const handleToc = (show: boolean) => {
   if (show) {
     maskStyle.value = { display: 'block' }
     tocStyle.value = { display: 'block', opacity: 0 }
-    setTimeout(() => { tocStyle.value = { display: 'block', opacity: 1 } }, 1)
+    setTimeout(() => {
+      tocStyle.value = { display: 'block', opacity: 1 }
+    }, 1)
   }
   if (!show) {
     tocStyle.value = { display: 'block', opacity: 0 }
-    setTimeout(() => { tocStyle.value = { display: 'none', opacity: 0 } }, 300)
+    setTimeout(() => {
+      tocStyle.value = { display: 'none', opacity: 0 }
+    }, 300)
   }
 }
 
@@ -284,7 +307,6 @@ const onresize = () => {
     maskStyle.value = { display: 'none' }
     tocStyle.value = { display: 'block', opacity: 1 }
   }
-
 }
 
 //#endregion
@@ -313,7 +335,7 @@ const onresize = () => {
 
   .headmenu {
     display: none;
-    color: #BFBFBF;
+    color: #bfbfbf;
 
     .iconbl {
       font-size: 20px;
@@ -364,8 +386,8 @@ const onresize = () => {
         --el-menu-item-height: 25px;
         // item 的 字体大小
         --el-menu-item-font-size: 13px;
-        --el-color-primary-light-9: #FFFFFF00;
-        --el-menu-hover-bg-color: #FFFFFF00;
+        --el-color-primary-light-9: #ffffff00;
+        --el-menu-hover-bg-color: #ffffff00;
 
         :deep(.el-menu) {
           transition: 0.1s !important;
@@ -391,7 +413,7 @@ const onresize = () => {
         }
 
         :deep(.el-menu-item) {
-          --el-menu-hover-bg-color: #FFFFFF00 !important;
+          --el-menu-hover-bg-color: #ffffff00 !important;
           height: auto;
           min-height: 25px;
           padding-right: 0;
@@ -404,11 +426,7 @@ const onresize = () => {
 
         :deep(.el-menu-item.is-active) {
           text-shadow: 0px 4px 5px rgba(107, 104, 104, 1);
-          background: linear-gradient(90deg,
-              #3D454D00 0%,
-              #C3C3C3 40%,
-              #C3C3C3 60%,
-              #3D454D00 100%);
+          background: linear-gradient(90deg, #3d454d00 0%, #c3c3c3 40%, #c3c3c3 60%, #3d454d00 100%);
           color: #ffffff;
           font-weight: 700;
         }
@@ -417,19 +435,18 @@ const onresize = () => {
           top: 7px;
           transform: translateY(-50%) translateX(100%) scale(0.8);
         }
-
       }
     }
 
     .toc-container {
       @include box(270px, 100%, 270px, 270px);
-      border-left: 1px solid #EEEEEE;
+      border-left: 1px solid #eeeeee;
       overflow: auto;
       transition: 0.3s;
 
       .viewer-toc {
         @include box(100%, 100%);
-        color: #5E5E5E;
+        color: #5e5e5e;
         padding: 10px;
         z-index: 1000;
         transition: 0.3s;
@@ -440,14 +457,14 @@ const onresize = () => {
           line-height: 40px;
           margin-top: 10px;
           padding-top: 10px;
-          border-top: 3px solid #BCBCBC;
+          border-top: 3px solid #bcbcbc;
         }
 
         .toc-subtitle {
           width: 100%;
           @include flex(row, flex-start, center);
           @include font(12px);
-          color: #ABABAB;
+          color: #ababab;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -529,7 +546,6 @@ const onresize = () => {
         // font-size: 14px;
         line-height: 1.6;
 
-
         :deep(.katex > *) {
           font-size: 1.2em !important;
           // font-family: 'KaTeX_Size1', sans-serif !important;
@@ -586,8 +602,7 @@ const onresize = () => {
           font-size: 19px;
         }
 
-        :deep(h5,
-          h6) {
+        :deep(h5, h6) {
           font-size: 16px;
         }
 
@@ -623,7 +638,6 @@ const onresize = () => {
 
           ul {
             padding-left: 15px;
-
           }
 
           li::marker {
@@ -748,7 +762,7 @@ const onresize = () => {
 
         // 单行代码块
         :deep(code) {
-          background-color: #DEDEDE;
+          background-color: #dedede;
           padding: 0px 4px;
           border-radius: 3px;
           margin: 0 3px;
@@ -756,16 +770,56 @@ const onresize = () => {
           word-break: break-all;
         }
 
-
         // 代码块
         :deep(pre) {
-          padding: 10px 10px 10px 10px;
+          padding: 10px 10px 10px 30px;
           background-color: #2b2b2b;
           overflow: auto;
           border-radius: $borderRadius;
           box-shadow: 2px 2px 5px rgb(76, 76, 76);
           max-height: 1100px;
+          position: relative;
 
+          .pre-copy {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            text-align: right;
+            z-index: 10;
+            color: #5c5c5c;
+            padding: 1px 8px;
+            border-radius: 4px;
+            cursor: pointer;
+            user-select: none;
+          }
+
+          .pre-copy:hover {
+            background-color: #1a1a1a;
+            color: #9d9d9d;
+          }
+          .pre-copy:active {
+            color: #e2e2e2;
+          }
+
+          ol {
+            margin: 0;
+            padding-left: 0;
+            position: absolute;
+            top: 10px;
+            left: 3px;
+            user-select: none;
+            li {
+              list-style: none;
+              .line-num {
+                width: 30px;
+                display: inline-block;
+                text-align: right;
+                padding-right: 10px;
+                color: #6a6a6a;
+                user-select: none;
+              }
+            }
+          }
 
           code {
             background-color: inherit;
@@ -785,31 +839,31 @@ const onresize = () => {
 
           .hljs {
             color: #a9b7c6;
-            background: #2b2b2b
+            background: #2b2b2b;
           }
 
           .hljs ::selection,
           .hljs::selection {
             background-color: #323232;
-            color: #a9b7c6
+            color: #a9b7c6;
           }
 
           .hljs-comment {
-            color: #606366
+            color: #606366;
           }
 
           .hljs-tag {
-            color: #a4a3a3
+            color: #a4a3a3;
           }
 
           .hljs-operator,
           .hljs-punctuation,
           .hljs-subst {
-            color: #a9b7c6
+            color: #a9b7c6;
           }
 
           .hljs-operator {
-            opacity: .7
+            opacity: 0.7;
           }
 
           .hljs-bullet,
@@ -818,7 +872,7 @@ const onresize = () => {
           .hljs-selector-tag,
           .hljs-template-variable,
           .hljs-variable {
-            color: #4eade5
+            color: #4eade5;
           }
 
           .hljs-attr {
@@ -830,25 +884,25 @@ const onresize = () => {
           .hljs-number,
           .hljs-symbol,
           .hljs-variable.constant_ {
-            color: #689757
+            color: #689757;
           }
 
           .hljs-class .hljs-title,
           .hljs-title,
           .hljs-title.class_ {
-            color: #e4b568
+            color: #e4b568;
           }
 
           .hljs-strong {
             font-weight: 700;
-            color: #bbb529
+            color: #bbb529;
           }
 
           .hljs-addition,
           .hljs-code,
           .hljs-string,
           .hljs-title.class_.inherited__ {
-            color: #6a8759
+            color: #6a8759;
           }
 
           .hljs-built_in,
@@ -856,7 +910,7 @@ const onresize = () => {
           .hljs-keyword.hljs-atrule,
           .hljs-quote,
           .hljs-regexp {
-            color: #629755
+            color: #629755;
           }
 
           .hljs-attribute,
@@ -864,19 +918,19 @@ const onresize = () => {
           .hljs-section,
           .hljs-title.function_,
           .ruby .hljs-property {
-            color: #9876aa
+            color: #9876aa;
           }
 
           .diff .hljs-meta,
           .hljs-keyword,
           .hljs-template-tag,
           .hljs-type {
-            color: #cc7832
+            color: #cc7832;
           }
 
           .hljs-emphasis {
             color: #cc7832;
-            font-style: italic
+            font-style: italic;
           }
 
           .hljs-meta,
@@ -887,20 +941,19 @@ const onresize = () => {
 
           .hljs-meta .hljs-keyword,
           .hljs-meta-keyword {
-            font-weight: 700
+            font-weight: 700;
           }
         }
       }
     }
   }
 
-
   // 屏幕宽度在 1100 以内时使用以下样式
   @media screen and (max-width: 1100px) {
     .headmenu {
       @include box(100vw, 50px);
       @include flex(row, space-between, center);
-      border-bottom: 1px solid #E2E2E2;
+      border-bottom: 1px solid #e2e2e2;
     }
 
     .main {
@@ -944,6 +997,5 @@ const onresize = () => {
       z-index: 9999;
     }
   }
-
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/blossom-web/src/views/article/index.d.ts b/blossom-web/src/views/article/index.d.ts
index 4011d07..b3144e2 100644
--- a/blossom-web/src/views/article/index.d.ts
+++ b/blossom-web/src/views/article/index.d.ts
@@ -1,16 +1,16 @@
 declare interface DocTree {
   /** ID */
-  i: number,
+  i: number
   /** Name */
-  n: string,
+  n: string
   /** open: 0:否;1:是; */
-  o: number,
+  o: number
   /** Tags */
-  t: string[],
-  icon: string,
+  t: string[]
+  icon: string
   /** 文档类型: 1:文件夹|2:文章; */
-  ty: DocType,
-  star: number,
+  ty: DocType
+  star: number
   children?: DocTree[]
 }
 
@@ -18,34 +18,38 @@ declare interface DocTree {
  * 文章详情
  */
 declare interface DocInfo {
-  id: number,
-  pid: number,
-  name: string,
-  icon?: string,
-  tags: string[],
-  sort: number,
-  cover?: string,
-  describes?: string,
-  starStatus: number,
-  pv?: number,
-  uv?: number,
-  likes?: number,
-  words?: number,
-  openVersion?: number,
-  version?: number,
-  storePath?: string,
-  subjectWords?: string,
-  subjectUpdTime?: string,
-  type: DocType,
-  creTime?: string,
-  updTime?: string,
-  html?: string,
+  id: number
+  pid: number
+  name: string
+  icon?: string
+  tags: string[]
+  sort: number
+  cover?: string
+  describes?: string
+  starStatus: number
+  pv?: number
+  uv?: number
+  likes?: number
+  words?: number
+  openVersion?: number
+  version?: number
+  storePath?: string
+  subjectWords?: string
+  subjectUpdTime?: string
+  type: DocType
+  creTime?: string
+  updTime?: string
+  html?: string
   // 公开文章的信息
-  openStatus: number,
-  openTime?: string,
-  openVersion?: number,
-  syncTime?: string,
+  openStatus: number
+  openTime?: string
+  openVersion?: number
+  syncTime?: string
 }
 
 /** 文档类型: 1:文件夹|2:文章; */
-declare type DocType = 1 | 2 | 3;
\ No newline at end of file
+declare type DocType = 1 | 2 | 3
+
+declare interface Window {
+  onHtmlEventDispatch: any
+}