diff --git a/frontend_nuxt/assets/fonts.css b/frontend_nuxt/assets/fonts.css
new file mode 100644
index 000000000..9141e95aa
--- /dev/null
+++ b/frontend_nuxt/assets/fonts.css
@@ -0,0 +1,143 @@
+/* Maple Mono - Thin 100 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-100-normal.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Maple Mono - Thin Italic 100 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-100-italic.woff2") format("woff2");
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Maple Mono - ExtraLight 200 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-200-normal.woff2") format("woff2");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Maple Mono - ExtraLight Italic 200 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-200-italic.woff2") format("woff2");
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Maple Mono - Light 300 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-300-normal.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Maple Mono - Light Italic 300 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-300-italic.woff2") format("woff2");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Maple Mono - Regular 400 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-400-normal.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Maple Mono - Italic 400 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-400-italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Maple Mono - Medium 500 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-500-normal.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Maple Mono - Medium Italic 500 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-500-italic.woff2") format("woff2");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Maple Mono - SemiBold 600 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-600-normal.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Maple Mono - SemiBold Italic 600 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-600-italic.woff2") format("woff2");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Maple Mono - Bold 700 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-700-normal.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Maple Mono - Bold Italic 700 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-700-italic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Maple Mono - ExtraBold 800 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-800-normal.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Maple Mono - ExtraBold Italic 800 */
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/maple-mono-800-italic.woff2") format("woff2");
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}
diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css
index 40558002c..68235b999 100644
--- a/frontend_nuxt/assets/global.css
+++ b/frontend_nuxt/assets/global.css
@@ -1,86 +1,86 @@
 :root {
-  --primary-color-hover: rgb(9, 95, 105);
-  --primary-color: rgb(10, 110, 120);
-  --primary-color-disabled: rgba(93, 152, 156, 0.5);
-  --header-height: 60px;
-  --header-background-color: white;
-  --header-border-color: lightgray;
-  --header-text-color: black;
-  --menu-background-color: white;
-  --background-color: white;
-  /* --background-color-blur: rgba(255, 255, 255, 0.57); */
-  --background-color-blur: var(--background-color);
-  --menu-border-color: lightgray;
-  --normal-border-color: lightgray;
-  --menu-selected-background-color: rgba(208, 250, 255, 0.659);
-  --menu-text-color: black;
-  --scroller-background-color: rgba(130, 175, 180, 0.5);
-  --normal-background-color: rgb(241, 241, 241);
-  --lottery-background-color: rgb(241, 241, 241);
-  --login-background-color: rgb(248, 248, 248);
-  --login-background-color-hover: #e0e0e0;
-  --text-color: black;
-  --blockquote-text-color: #6a737d;
-  --menu-width: 200px;
-  --page-max-width: 1200px;
-  --page-max-width-mobile: 900px;
-  --article-info-background-color: #f0f0f0;
-  --activity-card-background-color: #fafafa;
+	--primary-color-hover: rgb(9, 95, 105);
+	--primary-color: rgb(10, 110, 120);
+	--primary-color-disabled: rgba(93, 152, 156, 0.5);
+	--header-height: 60px;
+	--header-background-color: white;
+	--header-border-color: lightgray;
+	--header-text-color: black;
+	--menu-background-color: white;
+	--background-color: white;
+	/* --background-color-blur: rgba(255, 255, 255, 0.57); */
+	--background-color-blur: var(--background-color);
+	--menu-border-color: lightgray;
+	--normal-border-color: lightgray;
+	--menu-selected-background-color: rgba(208, 250, 255, 0.659);
+	--menu-text-color: black;
+	--scroller-background-color: rgba(130, 175, 180, 0.5);
+	--normal-background-color: rgb(241, 241, 241);
+	--lottery-background-color: rgb(241, 241, 241);
+	--login-background-color: rgb(248, 248, 248);
+	--login-background-color-hover: #e0e0e0;
+	--text-color: black;
+	--blockquote-text-color: #6a737d;
+	--menu-width: 200px;
+	--page-max-width: 1200px;
+	--page-max-width-mobile: 900px;
+	--article-info-background-color: #f0f0f0;
+	--activity-card-background-color: #fafafa;
 }
 
-[data-theme='dark'] {
-  --header-background-color: #2b2b2b;
-  --header-border-color: #555;
-  --primary-color: rgb(17, 182, 197);
-  --primary-color-hover: rgb(13, 137, 151);
-  --header-text-color: white;
-  --menu-background-color: #333;
-  --background-color: #333;
-  /* --background-color-blur: #333333a4; */
-  --background-color-blur: var(--background-color);
-  --menu-border-color: #555;
-  --normal-border-color: #555;
-  --menu-selected-background-color: rgba(255, 255, 255, 0.1);
-  --menu-text-color: white;
-  --normal-background-color: #000000;
-  --lottery-background-color: #4e4e4e;
-  --login-background-color: #575757;
-  --login-background-color-hover: #717171;
-  --text-color: #eee;
-  --blockquote-text-color: #999;
-  --article-info-background-color: #747373;
-  --activity-card-background-color: #585858;
+[data-theme="dark"] {
+	--header-background-color: #2b2b2b;
+	--header-border-color: #555;
+	--primary-color: rgb(17, 182, 197);
+	--primary-color-hover: rgb(13, 137, 151);
+	--header-text-color: white;
+	--menu-background-color: #333;
+	--background-color: #333;
+	/* --background-color-blur: #333333a4; */
+	--background-color-blur: var(--background-color);
+	--menu-border-color: #555;
+	--normal-border-color: #555;
+	--menu-selected-background-color: rgba(255, 255, 255, 0.1);
+	--menu-text-color: white;
+	--normal-background-color: #000000;
+	--lottery-background-color: #4e4e4e;
+	--login-background-color: #575757;
+	--login-background-color-hover: #717171;
+	--text-color: #eee;
+	--blockquote-text-color: #999;
+	--article-info-background-color: #747373;
+	--activity-card-background-color: #585858;
 }
 
 body {
-  margin: 0;
-  padding: 0;
-  font-family: 'Roboto', sans-serif;
-  background-color: var(--normal-background-color);
-  color: var(--text-color);
-  /* 禁止滚动 */
-  /* overflow: hidden;  */
+	margin: 0;
+	padding: 0;
+	font-family: "Roboto", sans-serif;
+	background-color: var(--normal-background-color);
+	color: var(--text-color);
+	/* 禁止滚动 */
+	/* overflow: hidden;  */
 }
 
 /*************************
  * Vditor 自定义皮肤覆写
  *************************/
 .vditor {
-  min-height: 200px;
+	min-height: 200px;
 }
 
 .vditor-toolbar--pin {
-  top: var(--header-height) !important;
+	top: var(--header-height) !important;
 }
 
 .vditor-panel {
-  min-width: 400px;
+	min-width: 400px;
 }
 
 .emoji {
-  width: 20px;
-  height: 20px;
-  vertical-align: middle;
+	width: 20px;
+	height: 20px;
+	vertical-align: middle;
 }
 
 /* .vditor {
@@ -108,202 +108,224 @@ body {
  *************************/
 .info-content-text ul,
 .info-content-text ol {
-  padding-left: 1.5em;
+	padding-left: 1.5em;
 }
 
 .info-content-text h1,
 .info-content-text h2 {
-  border-bottom: 1px solid var(--normal-border-color);
-  padding-bottom: 0.3em;
-  margin-bottom: 0.8em;
+	border-bottom: 1px solid var(--normal-border-color);
+	padding-bottom: 0.3em;
+	margin-bottom: 0.8em;
 }
 
 .info-content-text {
-  word-break: break-word;
-  max-width: 100%;
+	word-break: break-word;
+	max-width: 100%;
 }
 
 .info-content-text blockquote {
-  margin: 1em 0;
-  padding-left: 1em;
-  border-left: 4px solid #d0d7de;
-  color: var(--blockquote-text-color);
+	margin: 1em 0;
+	padding-left: 1em;
+	border-left: 4px solid #d0d7de;
+	color: var(--blockquote-text-color);
 }
 
 .info-content-text pre {
-  background-color: var(--normal-background-color);
-  padding: 8px 12px;
-  border-radius: 4px;
-  line-height: 1.5;
-  position: relative;
+	display: flex;
+	background-color: var(--normal-background-color);
+	padding: 8px 12px;
+	border-radius: 4px;
+	line-height: 1.5;
+	position: relative;
 }
 
-.copy-code-btn {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  font-size: 12px;
-  padding: 2px 6px;
-  border: none;
-  border-radius: 4px;
-  background-color: white;
-  opacity: 0.8;
-  color: black;
-  cursor: pointer;
+.info-content-text pre .line-numbers {
+	counter-reset: line-number 0;
+	width: 2em;
+	font-size: 13px;
+	position: sticky;
+	flex-shrink: 0;
+	font-family: "Maple Mono", monospace;
+	margin: 1em 0;
+	color: #888;
+	background-color: var(--normal-background-color);
+	border-right: 1px solid #888;
+	box-sizing: border-box;
+	padding-right: 0.5em;
+	text-align: end;
 }
 
-.copy-code-btn:hover {
-  opacity: 1;
+.info-content-text pre .line-numbers .line-number::before {
+	content: counter(line-number);
+	counter-increment: line-number;
 }
 
 .info-content-text code {
-  font-family: 'Roboto Mono', monospace;
-  font-size: 13px;
-  border-radius: 4px;
-  white-space: pre-wrap;
-  background-color: var(--normal-background-color);
-  color: var(--text-color);
+	font-family: "Maple Mono", monospace;
+	font-size: 13px;
+	border-radius: 4px;
+	white-space: no-wrap;
+	background-color: var(--normal-background-color);
+	color: var(--text-color);
+}
+
+.copy-code-btn {
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	font-size: 12px;
+	padding: 2px 6px;
+	border: none;
+	border-radius: 4px;
+	background-color: white;
+	opacity: 0.8;
+	color: black;
+	cursor: pointer;
+}
+
+.copy-code-btn:hover {
+	opacity: 1;
 }
 
 .info-content-text a {
-  color: var(--primary-color);
-  text-decoration: none;
+	color: var(--primary-color);
+	text-decoration: none;
 }
 
 .info-content-text a:hover {
-  text-decoration: underline;
+	text-decoration: underline;
 }
 
 .info-content-text img {
-  max-width: 100%;
-  height: auto;
+	max-width: 100%;
+	height: auto;
 }
 
 .info-content-text table {
-  width: 100%;
-  max-width: 100%;
-  border-collapse: collapse;
-  margin: 1.2em 0;
-  font-size: 14px;
-  line-height: 1.45;
-  overflow-x: auto; /* 小屏可横向滚动 */
+	width: 100%;
+	max-width: 100%;
+	border-collapse: collapse;
+	margin: 1.2em 0;
+	font-size: 14px;
+	line-height: 1.45;
+	overflow-x: auto; /* 小屏可横向滚动 */
 }
 
 .info-content-text thead th {
-  background-color: var(--primary-color);
-  color: #fff;
-  padding: 10px 14px;
-  text-align: left;
-  font-weight: 600;
+	background-color: var(--primary-color);
+	color: #fff;
+	padding: 10px 14px;
+	text-align: left;
+	font-weight: 600;
 }
 
-[data-theme='dark'] .info-content-text thead th {
-  background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
+[data-theme="dark"] .info-content-text thead th {
+	background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
 }
 
 .info-content-text tbody tr:nth-child(even) {
-  background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
+	background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
 }
 
-[data-theme='dark'] .info-content-text tbody tr:nth-child(even) {
-  background-color: rgba(255, 255, 255, 0.05);
+[data-theme="dark"] .info-content-text tbody tr:nth-child(even) {
+	background-color: rgba(255, 255, 255, 0.05);
 }
 
 .info-content-text th,
 .info-content-text td {
-  border: 1px solid var(--menu-border-color);
-  padding: 8px 14px;
-  vertical-align: top;
+	border: 1px solid var(--menu-border-color);
+	padding: 8px 14px;
+	vertical-align: top;
 }
 
 .info-content-text tbody td {
-  color: var(--text-color);
+	color: var(--text-color);
 }
 
 /* 首列加粗，便于阅读 */
 .info-content-text tbody td:first-child {
-  font-weight: 500;
+	font-weight: 500;
 }
 
 /* 鼠标悬停行高亮 */
 .info-content-text tbody tr:hover {
-  background-color: var(--menu-selected-background-color);
-  transition: background-color 0.2s ease;
+	background-color: var(--menu-selected-background-color);
+	transition: background-color 0.2s ease;
 }
 
 @media (max-width: 768px) {
-  .vditor {
-    min-height: 100px;
-  }
+	.vditor {
+		min-height: 100px;
+	}
 
-  .vditor-toolbar {
-    overflow-x: auto;
-  }
+	.vditor-toolbar {
+		overflow-x: auto;
+	}
 
-  .about-content h1,
-  .info-content-text h1 {
-    font-size: 20px;
-  }
+	.about-content h1,
+	.info-content-text h1 {
+		font-size: 20px;
+	}
 
-  .about-content h2,
-  .info-content-text h2 {
-    font-size: 18px;
-  }
+	.about-content h2,
+	.info-content-text h2 {
+		font-size: 18px;
+	}
 
-  .about-content p,
-  .info-content-text p {
-    font-size: 14px;
-    margin-top: 3px;
-    margin-bottom: 3px;
-  }
+	.about-content p,
+	.info-content-text p {
+		font-size: 14px;
+		margin-top: 3px;
+		margin-bottom: 3px;
+	}
 
-  .vditor-toolbar--pin {
-    top: 0 !important;
-  }
+	.vditor-toolbar--pin {
+		top: 0 !important;
+	}
 
-  .about-content li,
-  .info-content-text li {
-    font-size: 14px;
-  }
+	.about-content li,
+	.info-content-text li {
+		font-size: 14px;
+	}
 
-  .info-content-text pre {
-    line-height: 1.1;
-  }
+	.info-content-text pre {
+		line-height: 1.5;
+	}
 
-  .vditor-panel {
-    position: relative;
-    min-width: 0;
-  }
+	.vditor-panel {
+		position: relative;
+		min-width: 0;
+	}
 }
 
 /* NProgress styles */
 #nprogress {
-  pointer-events: none;
+	pointer-events: none;
 }
 
 #nprogress .bar {
-  background: var(--primary-color);
-  position: fixed;
-  z-index: 1031;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 3px;
+	background: var(--primary-color);
+	position: fixed;
+	z-index: 1031;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 3px;
 }
 
 #nprogress .peg {
-  display: block;
-  position: absolute;
-  right: 0;
-  width: 100px;
-  height: 100%;
-  box-shadow:
-    0 0 10px var(--primary-color),
-    0 0 5px var(--primary-color);
-  opacity: 1;
-  transform: rotate(3deg) translate(0px, -4px);
+	display: block;
+	position: absolute;
+	right: 0;
+	width: 100px;
+	height: 100%;
+	box-shadow:
+		0 0 10px var(--primary-color),
+		0 0 5px var(--primary-color);
+	opacity: 1;
+	transform: rotate(3deg) translate(0px, -4px);
 }
 
 #nprogress .spinner {
-  display: none;
+	display: none;
 }
diff --git a/frontend_nuxt/nuxt.config.ts b/frontend_nuxt/nuxt.config.ts
index 4d23eec37..1772ff678 100644
--- a/frontend_nuxt/nuxt.config.ts
+++ b/frontend_nuxt/nuxt.config.ts
@@ -1,25 +1,25 @@
-import { defineNuxtConfig } from 'nuxt/config'
+import { defineNuxtConfig } from "nuxt/config";
 
 export default defineNuxtConfig({
-  ssr: true,
-  runtimeConfig: {
-    public: {
-      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || '',
-      websiteBaseUrl: process.env.NUXT_PUBLIC_WEBSITE_BASE_URL || '',
-      googleClientId: process.env.NUXT_PUBLIC_GOOGLE_CLIENT_ID || '',
-      githubClientId: process.env.NUXT_PUBLIC_GITHUB_CLIENT_ID || '',
-      discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || '',
-      twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '',
-    },
-  },
-  // Ensure Vditor styles load before our overrides in global.css
-  css: ['vditor/dist/index.css', '~/assets/global.css'],
-  app: {
-    head: {
-      script: [
-        {
-          tagPriority: 'high',
-          innerHTML: `
+	ssr: true,
+	runtimeConfig: {
+		public: {
+			apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || "",
+			websiteBaseUrl: process.env.NUXT_PUBLIC_WEBSITE_BASE_URL || "",
+			googleClientId: process.env.NUXT_PUBLIC_GOOGLE_CLIENT_ID || "",
+			githubClientId: process.env.NUXT_PUBLIC_GITHUB_CLIENT_ID || "",
+			discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || "",
+			twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || "",
+		},
+	},
+	// Ensure Vditor styles load before our overrides in global.css
+	css: ["vditor/dist/index.css", "~/assets/global.css", "~/assets/fonts.css"],
+	app: {
+		head: {
+			script: [
+				{
+					tagPriority: "high",
+					innerHTML: `
             (function () {
               try {
                 const mode = localStorage.getItem('theme-mode');
@@ -29,35 +29,35 @@ export default defineNuxtConfig({
               } catch (e) {}
             })();
           `,
-        },
-      ],
-      link: [
-        {
-          rel: 'icon',
-          type: 'image/x-icon',
-          href: '/favicon.ico',
-        },
-        {
-          rel: 'apple-touch-icon',
-          href: '/apple-touch-icon.png',
-        },
-        {
-          rel: 'manifest',
-          href: '/manifest.webmanifest',
-        },
-        {
-          rel: 'stylesheet',
-          href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
-          referrerpolicy: 'no-referrer',
-        },
-      ],
-    },
-    baseURL: '/',
-    buildAssetsDir: '/_nuxt/',
-  },
-  vue: {
-    compilerOptions: {
-      isCustomElement: (tag) => ['l-hatch', 'l-hatch-spinner'].includes(tag),
-    },
-  },
-})
+				},
+			],
+			link: [
+				{
+					rel: "icon",
+					type: "image/x-icon",
+					href: "/favicon.ico",
+				},
+				{
+					rel: "apple-touch-icon",
+					href: "/apple-touch-icon.png",
+				},
+				{
+					rel: "manifest",
+					href: "/manifest.webmanifest",
+				},
+				{
+					rel: "stylesheet",
+					href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css",
+					referrerpolicy: "no-referrer",
+				},
+			],
+		},
+		baseURL: "/",
+		buildAssetsDir: "/_nuxt/",
+	},
+	vue: {
+		compilerOptions: {
+			isCustomElement: (tag) => ["l-hatch", "l-hatch-spinner"].includes(tag),
+		},
+	},
+});
diff --git a/frontend_nuxt/public/fonts/maple-mono-100-italic.woff2 b/frontend_nuxt/public/fonts/maple-mono-100-italic.woff2
new file mode 100644
index 000000000..8a10edb77
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-100-italic.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-100-normal.woff2 b/frontend_nuxt/public/fonts/maple-mono-100-normal.woff2
new file mode 100644
index 000000000..5726e5ce6
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-100-normal.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-200-italic.woff2 b/frontend_nuxt/public/fonts/maple-mono-200-italic.woff2
new file mode 100644
index 000000000..69fc0d84e
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-200-italic.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-200-normal.woff2 b/frontend_nuxt/public/fonts/maple-mono-200-normal.woff2
new file mode 100644
index 000000000..12eff4997
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-200-normal.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-300-italic.woff2 b/frontend_nuxt/public/fonts/maple-mono-300-italic.woff2
new file mode 100644
index 000000000..fe1126f2e
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-300-italic.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-300-normal.woff2 b/frontend_nuxt/public/fonts/maple-mono-300-normal.woff2
new file mode 100644
index 000000000..0bf3aa54a
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-300-normal.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-400-italic.woff2 b/frontend_nuxt/public/fonts/maple-mono-400-italic.woff2
new file mode 100644
index 000000000..d586de1a6
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-400-italic.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-400-normal.woff2 b/frontend_nuxt/public/fonts/maple-mono-400-normal.woff2
new file mode 100644
index 000000000..5419e6275
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-400-normal.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-500-italic.woff2 b/frontend_nuxt/public/fonts/maple-mono-500-italic.woff2
new file mode 100644
index 000000000..51aa84e97
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-500-italic.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-500-normal.woff2 b/frontend_nuxt/public/fonts/maple-mono-500-normal.woff2
new file mode 100644
index 000000000..efd0e8579
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-500-normal.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-600-italic.woff2 b/frontend_nuxt/public/fonts/maple-mono-600-italic.woff2
new file mode 100644
index 000000000..4e95413f9
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-600-italic.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-600-normal.woff2 b/frontend_nuxt/public/fonts/maple-mono-600-normal.woff2
new file mode 100644
index 000000000..76d24b5ef
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-600-normal.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-700-italic.woff2 b/frontend_nuxt/public/fonts/maple-mono-700-italic.woff2
new file mode 100644
index 000000000..215c34f36
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-700-italic.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-700-normal.woff2 b/frontend_nuxt/public/fonts/maple-mono-700-normal.woff2
new file mode 100644
index 000000000..1beb581b8
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-700-normal.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-800-italic.woff2 b/frontend_nuxt/public/fonts/maple-mono-800-italic.woff2
new file mode 100644
index 000000000..a5da5a4a6
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-800-italic.woff2 differ
diff --git a/frontend_nuxt/public/fonts/maple-mono-800-normal.woff2 b/frontend_nuxt/public/fonts/maple-mono-800-normal.woff2
new file mode 100644
index 000000000..70e29b774
Binary files /dev/null and b/frontend_nuxt/public/fonts/maple-mono-800-normal.woff2 differ
diff --git a/frontend_nuxt/utils/markdown.js b/frontend_nuxt/utils/markdown.js
index 27a1f8831..3708853a6 100644
--- a/frontend_nuxt/utils/markdown.js
+++ b/frontend_nuxt/utils/markdown.js
@@ -86,7 +86,11 @@ const md = new MarkdownIt({
     } else {
       code = hljs.highlightAuto(str).value
     }
-    return `<pre class="code-block"><button class="copy-code-btn">Copy</button><code class="hljs language-${lang || ''}">${code}</code></pre>`
+    const lineNumbers = code
+      .trim()
+      .split('\n')
+      .map(() => `<div class="line-number"></div>`)
+    return `<pre class="code-block"><button class="copy-code-btn">Copy</button><div class="line-numbers">${lineNumbers.join('')}</div><code class="hljs language-${lang || ''}">${code.trim()}</code></pre>`
   },
 })