jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-18 21:10:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
feat: add code block line number display
This commit is contained in:
Tim
2025-08-14 16:47:46 +08:00
committed by GitHub
parent 1f9ae8d057 e0f7299a86
commit b63ebb8fae
20 changed files with 401 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
frontend_nuxt/assets/fonts.css Normal file
View File

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

380
frontend_nuxt/assets/global.css
View File

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

104
frontend_nuxt/nuxt.config.ts
View File

@@ -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),
},
},
});

BIN
frontend_nuxt/public/fonts/maple-mono-100-italic.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-100-normal.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-200-italic.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-200-normal.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-300-italic.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-300-normal.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-400-italic.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-400-normal.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-500-italic.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-500-normal.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-600-italic.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-600-normal.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-700-italic.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-700-normal.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-800-italic.woff2 Normal file
View File

Binary file not shown.

BIN
frontend_nuxt/public/fonts/maple-mono-800-normal.woff2 Normal file
View File

Binary file not shown.

6
frontend_nuxt/utils/markdown.js
View File

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