1. Upgrade to Docusaurus 3.1

2. Replace remark-grid-tables with rehype-extended-table.

blog/2010-10-25-vs2010-format-source-code-automatically-advanced/index.md

@@ -19,7 +19,7 @@ keywords:
 
 有這種東西嗎??當然有，不然寫這篇幹嘛，不過 Visual Studio 並沒有內建這個功能。
 
-很好運的，有個佛心來的外國人幫我們寫好這個功能的巨集，該巨集的網址為：<http://github.com/timabell/vs-formatter-macro>
+很好運的，有個佛心來的外國人幫我們寫好這個功能的巨集，該巨集的網址為：[http://github.com/timabell/vs-formatter-macro](http://github.com/timabell/vs-formatter-macro "http://github.com/timabell/vs-formatter-macro")
 
 只要下載 Formatting.vb 檔，並且使用 Visual Studio 的巨集編輯功能，將其匯入，就可以更輕鬆的做 Source Code 自動格式化的工作啦，操作步驟如下：
 

blog/2016-10-20-force-onedrive-to-sync-immediately/index.md

@@ -24,10 +24,7 @@ keywords:
 
 不過，[這篇文章](http://andreklein.net/how-to-force-microsoft-onedrive-to-sync/ "How To Force Microsoft OneDrive To Sync More Often")裡面有個不錯的方法，我還蠻喜歡的：
 
-> sync.bat
-> {:.filename}
-
-```shell
+```shell title="sync.bat"
 @echo off
 taskkill /f /im onedrive.exe
 start %localappdata%\Microsoft\OneDrive\OneDrive.exe /background

blog/2017-05-08-design-xamarin-forms-with-gorilla-player/index.md

@@ -64,7 +64,7 @@ Server 預設會使用的 Port 也會顯示在這邊，若有開啟防火牆的
 
 ![image-04](04-about-gorilla-player.png "About Gorilla Player 中提供的資訊")
 
-> 也可以透過電腦上的瀏覽器直接瀏覽 <http://localhost:9014> 確認 Server 是否有正常啟動。
+> 也可以透過電腦上的瀏覽器直接瀏覽 [http://localhost:9014](http://localhost:9014 "http://localhost:9014") 確認 Server 是否有正常啟動。
 
 確認 Server 正常啟動之後，再來是 Visual Studio 的部份，我們可以先任意開啟一個 Xamrain Form 專案來進行測試。
 

blog/2022-04-06-get-free-ssl-certificate/index.md

@@ -30,7 +30,7 @@ keywords:
 
 自從踩到 ZeroSSL 三次免費憑證的雷之後，我就開始尋找其它非 ACME 的解決方案，後來找到了這個網站：
 
-<https://gethttpsforfree.com/>
+[https://gethttpsforfree.com/](https://gethttpsforfree.com/ "https://gethttpsforfree.com/")
 
 基本上，它的原理也是透過 Let's Encrypt 來產生憑證，但是它把整個過程都透過同一個網頁呈現出來。
 
@@ -51,7 +51,7 @@ keywords:
 準備好上述三樣，就可以一步一步往下作囉!!
 
 :::tip 小提示
-接下來幾個步驟的指令都可以透過點擊 <https://gethttpsforfree.com/> 中每個步驟的 `(how do I generate this?)` 連結來顯示說明。
+接下來幾個步驟的指令都可以透過點擊 [https://gethttpsforfree.com/](https://gethttpsforfree.com/ "https://gethttpsforfree.com/") 中每個步驟的 `(how do I generate this?)` 連結來顯示說明。
 本文為了方便操作，把每個步驟的指令一次收錄。
 :::
 
@@ -182,7 +182,7 @@ openssl req -new -sha256 -key domain.key -subj "/" \
 
 ## 後記
 
-目前透過 <https://gethttpsforfree.com/> 所產出的憑證效期都是三個月，如果到期的話就只要回來再整個流程重新跑一次即可。
+目前透過 [https://gethttpsforfree.com/](https://gethttpsforfree.com/ "https://gethttpsforfree.com/") 所產出的憑證效期都是三個月，如果到期的話就只要回來再整個流程重新跑一次即可。
 
 雖然步驟是多了點，不過真的很無腦。
 

docs/04-docusaurus/03-customization/04-apply-kbd-style-in-markdown/index.md

@@ -106,6 +106,6 @@ kbd 標籤除了可以搭配 Unicode 符號之外，也可以搭配 Emoji 使用
 
 ## 參考資料
 
-- [<kbd\> does not work.](https://github.com/facebook/docusaurus/issues/2742 "<kbd> does not work.")
+- [\<kbd\> does not work.](https://github.com/facebook/docusaurus/issues/2742 "\<kbd> does not work.")
 
 - [Nice effect with the KBD tag](https://www.rgagnon.com/jsdetails/js-nice-effect-the-KBD-tag.html "Nice effect with the KBD tag")

docusaurus.config.js

@@ -10,10 +10,9 @@ const remarkParse = require("remark-parse");
 const stringify = require("rehype-stringify");
 const remark2rehype = require("remark-rehype");
 
-const remarkGridTables = require("remark-grid-tables");
+import { rehypeExtendedTable } from 'rehype-extended-table';
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/vsDark');
+import { themes as prismThemes } from 'prism-react-renderer';
 
 require("dotenv").config();
 
@@ -41,6 +40,16 @@ function unwrapCategory(items) {
   return newItems;
 }
 
+export default {
+  markdown: {
+    mdx1Compat: {
+      comments: true,
+      admonitions: true,
+      headingIds: true,
+    },
+  },
+};
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
   title: "OUCH1978@GITHUB",
@@ -105,9 +114,9 @@ module.exports = {
       }
     },
     prism: {
-      additionalLanguages: ["powershell", "csharp", "cshtml", "java", "php", "aspnet", "toml"],
-      theme: lightCodeTheme,
-      darkTheme: darkCodeTheme,
+      additionalLanguages: ["aspnet", "bash", "css", "csharp", "cshtml", "diff", "git", "java", "javascript", "json", "markup-templating", "powershell", "php", "python", "sql", "toml", "typescript"],
+      theme: prismThemes.github,
+      darkTheme: prismThemes.vsDark,
     },
     navbar: {
       title: "OUCH1978@GITHUB",
@@ -149,8 +158,9 @@ module.exports = {
         docs: {
           sidebarPath: require.resolve("./sidebars.js"),
           editUrl: "https://github.com/ouch1978/ouch1978.github.io/edit/main",
-          remarkPlugins: [math, remarkGridTables],
+          remarkPlugins: [math],
           rehypePlugins: [
+            [rehypeExtendedTable, {}],
             [katex, {
               strict: false
             }]
@@ -173,8 +183,9 @@ module.exports = {
           showReadingTime: true,
           // Please change this to your repo.
           editUrl: "https://github.com/ouch1978/ouch1978.github.io/edit/main",
-          remarkPlugins: [math, remarkGridTables],
+          remarkPlugins: [math],
           rehypePlugins: [
+            [rehypeExtendedTable, {}],
             [katex, {
               strict: false
             }]

package.json

@@ -20,15 +20,15 @@
   },
   "dependencies": {
     "@babel/plugin-syntax-import-assertions": "^7.20.0",
-    "@docusaurus/core": "^2.3.1",
-    "@docusaurus/plugin-google-analytics": "^2.3.1",
-    "@docusaurus/preset-classic": "^2.3.1",
+    "@docusaurus/core": "^3.0.1",
+    "@docusaurus/plugin-google-analytics": "^3.0.1",
+    "@docusaurus/preset-classic": "^3.0.1",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.0.0",
     "@fortawesome/free-regular-svg-icons": "^6.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^3.0.0",
     "@saucelabs/theme-github-codeblock": "^0.1.1",
     "@svgr/webpack": "^6.2.1",
     "bootstrap": "4.6.0",
@@ -45,20 +45,19 @@
     "klaw-sync": "^6.0.0",
     "mark.js": "^8.11.1",
     "mermaid": "^8.11.0",
-    "nodejieba": "^2.5.2",
     "parse5-htmlparser2-tree-adapter": "^6.0.1",
-    "prism-react-renderer": "^1.3.1",
+    "prism-react-renderer": "^2.1.0",
     "prism-themes": "^1.7.0",
     "prismjs": "^1.26.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-bootstrap": "^1.6.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-reveal": "^1.2.2",
-    "rehype-katex": "4",
+    "rehype-extended-table": "^0.1.1",
+    "rehype-katex": "^7.0.0",
     "rehype-stringify": "^8.0.0",
-    "remark-grid-tables": "^2.1.2",
-    "remark-math": "3",
+    "remark-math": "^6.0.0",
     "remark-parse": "^8.0.3",
     "remark-rehype": "^8.1.0",
     "reveal-md": "^5.3.2",
@@ -80,10 +79,11 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/eslint-plugin": "^2.3.1",
-    "@docusaurus/module-type-aliases": "^2.3.1",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "@types/react": "^17.0.24",
+    "@docusaurus/eslint-plugin": "^3.0.1",
+    "@docusaurus/module-type-aliases": "^3.0.1",
+    "@docusaurus/tsconfig": "3.0.0",
+    "@docusaurus/types": "3.0.0",
+    "@types/react": "^18.2.29",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.3.0",
     "@typescript-eslint/eslint-plugin": "^5.32.0",
@@ -102,9 +102,9 @@
     "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^26.0.0",
-    "typescript": "^4.7.4"
+    "typescript": "~5.2.2"
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   }
 }

src/components/Achievements/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import clsx from "clsx";
 import styles from "./Achievements.module.css";
 

src/components/Hero/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 export function Hero() {

src/components/LatestPosts/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import clsx from "clsx";
 import Link from '@docusaurus/Link';
 import styles from "./LatestPosts.module.css";

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "extends": "@docusaurus/tsconfig",
   "include": ["src/"],
   "compilerOptions": {
     "baseUrl": ".",