docs: 更新代码块语言标识并优化文档显示

- 将 PowerShell 文档中的代码块标识从 'Powershell' 改为 'powershell'
- 将 Web 文档中的代码块标识从 'js' 改为 'javascript'，CSS 标识从 'CSS' 改为 'css'
- 统一代码块语法标识以提高语法高亮准确性

feat: 优化代码复制功能防止页面跳转

- 在复制文本时添加固定定位样式防止页面自动滚动
- 使用 preventScroll 选项避免焦点切换导致的页面跳动
- 添加异常处理确保临时元素正确移除

style: 改进代码块预览组件样式

- 为代码块添加边框样式增强视觉效果
- 修改按钮样式为 outline 变体提升外观
- 添加悬停显示复制按钮的 CSS 规则
- 调整代码块内边距预留按钮空间

refactor: 优化文档页面加载和语法高亮

- 移除服务端的标题提取逻辑简化数据传递
- 根据文档名称动态加载对应的语法高亮语言包
- PowerShell 文档加载 powershell 语言支持
- Web 文档加载 javascript、html、css 语言支持
- Rust 文档加载 rust 语言支持

build: 支持通过环境变量配置基础路径

- 将硬编码的基础路径改为环境变量读取
- 允许通过 BASE_PATH 环境变量自定义部署路径

Author: vhtmui

docs/PowerShell.md

@@ -14,13 +14,13 @@ vscode中默认使用UTF8编码，powershell旧版本中默认使用系统编码
 
 输入Get-Help查找帮助时
 
-```Powershell
+```powershell
 Get-Help Get-FTPChildItem
 ```
 
 输出内容信息大多为空，此时应先导入PSFTP模块
 
-```Powershell
+```powershell
 Import-Module PSFTP
 ```
 

docs/Web.md

@@ -8,7 +8,7 @@
 
 带标签的模版形式如：
 
-```js
+```javascript
   `我需要做：
   ${todos}
   当前进度为：${progress}
@@ -17,7 +17,7 @@
 
 带标签的模板字面量是一个函数调用的语法糖，上文语法表示实际如下：
 
-```js
+```javascript
   fn`我需要做：
   ${todos}
   当前进度为：${progress}
@@ -52,7 +52,7 @@
   * `valuel`即迭代产生的值
 * 可使用生成器函数快速创建一个可迭代对象。如：
 
-  ```js
+  ```javascript
   //example1 生成器函数直接生成可迭代对象
   function* generator(i) {
     yield i;
@@ -129,7 +129,7 @@
 
 JS异步函数会立刻返回一个 `promise`，`promise`拥有一个状态。可以对返回的 `promise`对象调用 `then()`方法，`then()`方法接收一个函数，`promise`会用使用**原异步函数调用`resolve`函数的参数**作为参数调用这个函数。如*Example 1*：
 
-```js
+```javascript
 //Example 1
 // 使用Promise构造函数创建一个promise对象
 // resolve函数的参数"done"将在fulfillment时返回，并作为调用then方法的参数
@@ -141,7 +141,7 @@ promise.then((result) => {
 
 使用 `asycn`关键字注释的函数可以在函数内部使用 `await`关键字调用异步函数，使异步函数直接返回 `fulfillment`，而不是先返回 `promise`对象。`asycn\await`写法也更直观，看起来和同步函数一样。如*Example 2*:
 
-```js
+```javascript
 //Example 2
 function alarm(person, delay) {
   return new Promise((resolve, reject) => {
@@ -177,7 +177,7 @@ button.addEventListener("click", async () => {//使用async关键字
 2. 请求成功时存储数据库对象 `db = openRequest.result;`
 3. 创建数据库表，新建自增列：
 
-   ```JS
+   ```javascript
     const objectStore = db.createObjectStore("notes_os", {//创建一个新表命名为notes_os
       keyPath: "id",//创建自增列
       autoIncrement: true,
@@ -186,7 +186,7 @@ button.addEventListener("click", async () => {//使用async关键字
 
 4. 创建新的列字段,创建了 `title`和 `body`字段（列）。
 
-   ```js
+   ```javascript
    objectStore.createIndex("title", "title", { unique: false });
    objectStore.createIndex("body", "body", { unique: false });
    ```
@@ -209,7 +209,7 @@ button.addEventListener("click", async () => {//使用async关键字
 
 Proxy用于拦截一些操作，替换成自定义实现。如：
 
-```js
+```javascript
 const handler = {
   get(target, property){
     return name in target ? target[name] : 42;
@@ -226,7 +226,7 @@ proxy操作不是随意的，需要保持`不可拓展对象`和`不可配置属
 
 对象的原型为其`[[Propotype]]`属性，由构造器对象的`prototype`属性定义。即：
 
-```js
+```javascript
 let s = new String('a');
 Object.getPrototypeOf(s) === String.prototype;
 ```
@@ -243,7 +243,7 @@ Object.getPrototypeOf(s) === String.prototype;
 
 #### 组合选择器
 
-```CSS
+```css
 .a{
   .b {} /* 相当于 .a .b 即属于class="a"的子元素，且自身class="b"的元素 */
   &.b {} /* 相当于 .a.b 即class="a b"或"b a" */
@@ -256,7 +256,7 @@ Object.getPrototypeOf(s) === String.prototype;
 
 #### 后附嵌套选择器
 
-```CSS
+```css
 .a{
   .b& {} /* 相当于 .b.a 即class="a b"或"b a" */
   .b & {} /* 相当于 .b .a 即属于class="b"的子元素，且自身class="a"的元素 */
@@ -268,7 +268,7 @@ Object.getPrototypeOf(s) === String.prototype;
 
 ### 优先级
 
-一条CSS声明的优先级分三层判断
+一条css声明的优先级分三层判断
 
 * 来源，用户代理、用户样式、作者样式优先级从低到高按如下排序。
   1. 用户代理普通样式
@@ -588,7 +588,7 @@ sveltekit完成一次任务需要经过如下三步
 1. 安装静态设配器 `npm i -D @sveltejs/adapter-static`
 2. 配置根目录的svelte.config.js文件:
 
-   ```js
+   ```javascript
    import adapter from '@sveltejs/adapter-static';
 
    /** @type {import('@sveltejs/kit').Config} */
@@ -617,7 +617,7 @@ sveltekit完成一次任务需要经过如下三步
 
 3. 配置src文件夹下的+layout.js文件
 
-   ```js
+   ```javascript
    export const prerender = true;
    ```
 
@@ -699,7 +699,7 @@ sveltekit完成一次任务需要经过如下三步
 
 函数如下，函数接受`event`对象，`resolve`函数。返回一个`Response`。
 
-```js
+```javascript
   export async function handle({ event, resolve }) {
     return await resolve(event);
   }

src/lib/my-utils/index.js

@@ -35,17 +35,27 @@ export async function copyToClipboard(text) {
 			console.error('Failed to copy text: ', err);
 		}
 	} else {
-		// 降级到传统方法
+		// 降级到传统方法（避免自动滚动页面）
 		const textArea = document.createElement('textarea');
 		textArea.value = text;
+		textArea.style.position = 'fixed';
+		textArea.style.left = '-9999px';
+		textArea.style.top = '0';
+		textArea.style.opacity = '0';
+		textArea.style.pointerEvents = 'none';
+
+		const previousActive = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 		document.body.appendChild(textArea);
-		textArea.focus();
+		textArea.focus({ preventScroll: true });
 		textArea.select();
+
 		try {
 			document.execCommand('copy');
 		} catch (err) {
 			console.error('Failed to copy text: ', err);
+		} finally {
+			document.body.removeChild(textArea);
+			if (previousActive) previousActive.focus({ preventScroll: true });
 		}
-		document.body.removeChild(textArea);
 	}
 }

src/routes/docs/MyMarkdown/Pre.svelte

@@ -30,13 +30,28 @@
 	<pre
 		contenteditable="false"
 		bind:this={pre}
-		class={cn('', className)}
+		class={cn('border-2', className)}
 		{...rest}>{@render children?.()}</pre>
 	<Button
 		size="icon"
-		variant="ghost"
-		class="absolute top-2 right-2"
+		variant="outline"
+		class="local-btn absolute top-2 right-2"
 		disabled={buttonState.copied}
 		onclick={handleClick}><CopyIcon /></Button
 	>
 </div>
+
+<style>
+	pre {
+		padding-right: 3rem;
+		scrollbar-width: thin;
+	}
+
+	.relative:hover :global(.local-btn) {
+		display: inline-flex
+	}
+
+	.relative :global(.local-btn) {
+		display: none;
+	}
+</style>

src/routes/docs/[...docs]/+page.server.js

@@ -2,20 +2,7 @@ import { readFile } from 'node:fs/promises';
 
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ params }) {
-    const content = await readFile(`docs/${params.docs}.md`, 'utf-8');
+	const content = await readFile(`docs/${params.docs}.md`, 'utf-8');
 
-    // 提取标题
-    const headings = [];
-    const lines = content.split(/\r?\n/);
-    lines.forEach((line) => {
-        const match = line.match(/^(#{1,6})\s+(.+)$/);
-        if (match) {
-            const level = match[1].length;
-            const text = match[2].trim();
-            const id = text.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
-            headings.push({ level, text, id });
-        }
-    });
-
-    return { content, headings };
-}
+	return { content, docName: params.docs };
+}

src/routes/docs/[...docs]/+page.svelte

@@ -13,9 +13,29 @@
 	let { data } = $props();
 	let md = $derived(data.content);
 
-	const shikiPluginPromise = createHighlighterCore({
+	const docName = $derived(data.docName);
+
+	function getLangs() {
+		switch (true) {
+			case docName.match(/powershell/i) && true:
+				return [import('shiki/langs/powershell.mjs')];
+			case docName.match(/rust/i) && true:
+				return [import('shiki/langs/rust.mjs')];
+			case docName.match(/web/i) && true:
+				return [
+					import('shiki/langs/javascript.mjs'),
+					import('shiki/langs/html.mjs'),
+					import('shiki/langs/css.mjs')
+				];
+			default:
+				return [];
+		}
+	}
+	
+
+	const shikiPluginPromise = $derived(createHighlighterCore({
 		themes: [import('shiki/themes/slack-dark.mjs'), import('shiki/themes/slack-ochin.mjs')],
-		langs: [import('shiki/langs/rust.mjs')],
+		langs: [...getLangs()],
 		engine: createOnigurumaEngine(import('shiki/wasm'))
 	}).then((highlighter) => {
 		return {
@@ -25,7 +45,7 @@
 				{ themes: { light: 'slack-ochin', dark: 'slack-dark' } }
 			]
 		};
-	});
+	}));
 
 	/** @type {import('svelte-exmarkdown').Plugin} */
 	const csPlugin = {

svelte.config.js

@@ -1,6 +1,6 @@
 import adapter from '@sveltejs/adapter-static';
 
-const base = process.argv.includes('dev') ? '' : '/vhtmui.github.io';
+const base = process.argv.includes('dev') ? '' : process.env.BASE_PATH;
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {