Merge pull request #552 from immortal521/feat/code-block-line-number

feat: add code block line number display

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;
+}

frontend_nuxt/assets/global.css

@@ -28,7 +28,7 @@
 	--activity-card-background-color: #fafafa;
 }
 
-[data-theme='dark'] {
+[data-theme="dark"] {
 	--header-background-color: #2b2b2b;
 	--header-border-color: #555;
 	--primary-color: rgb(17, 182, 197);
@@ -55,7 +55,7 @@
 body {
 	margin: 0;
 	padding: 0;
-  font-family: 'Roboto', sans-serif;
+	font-family: "Roboto", sans-serif;
 	background-color: var(--normal-background-color);
 	color: var(--text-color);
 	/* 禁止滚动 */
@@ -131,6 +131,7 @@ body {
 }
 
 .info-content-text pre {
+	display: flex;
 	background-color: var(--normal-background-color);
 	padding: 8px 12px;
 	border-radius: 4px;
@@ -138,6 +139,36 @@ body {
 	position: relative;
 }
 
+.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;
+}
+
+.info-content-text pre .line-numbers .line-number::before {
+	content: counter(line-number);
+	counter-increment: line-number;
+}
+
+.info-content-text code {
+	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;
@@ -156,15 +187,6 @@ body {
 	opacity: 1;
 }
 
-.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);
-}
-
 .info-content-text a {
 	color: var(--primary-color);
 	text-decoration: none;
@@ -197,7 +219,7 @@ body {
 	font-weight: 600;
 }
 
-[data-theme='dark'] .info-content-text thead th {
+[data-theme="dark"] .info-content-text thead th {
 	background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
 }
 
@@ -205,7 +227,7 @@ body {
 	background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
 }
 
-[data-theme='dark'] .info-content-text tbody tr:nth-child(even) {
+[data-theme="dark"] .info-content-text tbody tr:nth-child(even) {
 	background-color: rgba(255, 255, 255, 0.05);
 }
 
@@ -267,7 +289,7 @@ body {
 	}
 
 	.info-content-text pre {
-    line-height: 1.1;
+		line-height: 1.5;
 	}
 
 	.vditor-panel {

frontend_nuxt/nuxt.config.ts

@@ -1,24 +1,24 @@
-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 || '',
+			apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || "",
-      websiteBaseUrl: process.env.NUXT_PUBLIC_WEBSITE_BASE_URL || '',
+			websiteBaseUrl: process.env.NUXT_PUBLIC_WEBSITE_BASE_URL || "",
-      googleClientId: process.env.NUXT_PUBLIC_GOOGLE_CLIENT_ID || '',
+			googleClientId: process.env.NUXT_PUBLIC_GOOGLE_CLIENT_ID || "",
-      githubClientId: process.env.NUXT_PUBLIC_GITHUB_CLIENT_ID || '',
+			githubClientId: process.env.NUXT_PUBLIC_GITHUB_CLIENT_ID || "",
-      discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || '',
+			discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || "",
-      twitterClientId: process.env.NUXT_PUBLIC_TWITTER_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'],
+	css: ["vditor/dist/index.css", "~/assets/global.css", "~/assets/fonts.css"],
 	app: {
 		head: {
 			script: [
 				{
-          tagPriority: 'high',
+					tagPriority: "high",
 					innerHTML: `
             (function () {
               try {
@@ -33,31 +33,31 @@ export default defineNuxtConfig({
 			],
 			link: [
 				{
-          rel: 'icon',
+					rel: "icon",
-          type: 'image/x-icon',
+					type: "image/x-icon",
-          href: '/favicon.ico',
+					href: "/favicon.ico",
 				},
 				{
-          rel: 'apple-touch-icon',
+					rel: "apple-touch-icon",
-          href: '/apple-touch-icon.png',
+					href: "/apple-touch-icon.png",
 				},
 				{
-          rel: 'manifest',
+					rel: "manifest",
-          href: '/manifest.webmanifest',
+					href: "/manifest.webmanifest",
 				},
 				{
-          rel: 'stylesheet',
+					rel: "stylesheet",
-          href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
+					href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css",
-          referrerpolicy: 'no-referrer',
+					referrerpolicy: "no-referrer",
 				},
 			],
 		},
-    baseURL: '/',
+		baseURL: "/",
-    buildAssetsDir: '/_nuxt/',
+		buildAssetsDir: "/_nuxt/",
 	},
 	vue: {
 		compilerOptions: {
-      isCustomElement: (tag) => ['l-hatch', 'l-hatch-spinner'].includes(tag),
+			isCustomElement: (tag) => ["l-hatch", "l-hatch-spinner"].includes(tag),
 		},
 	},
-})
+});

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>`
   },
 })