diff --git a/src/locales/en.js b/src/locales/en.js
index 1ff0453..b505805 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -393,35 +393,35 @@ const en = {
     
     Of course, this learning path is intended for those with some foundation. If you don't have a foundation yet, you can refer to related articles. I will also write a comprehensive routine article in the future.`,
     dp_item1: "Single string type",
-    dp_item1_keys1: `
-    State: 1. dp[i] represents the xxxx ending with s[i]
-           2. dp[i] represents the xxxx up to s[i]`,
+    dp_item1_keys1: `State:
+    1. dp[i] represents the xxxx ending with s[i]
+    2. dp[i] represents the xxxx up to s[i]`,
     dp_item1_keys2:
       "Enumeration: It usually involves two nested loops, where one loop fixes the left endpoint and the other loop fixes the right endpoint for enumeration.",
     dp_item1_keys3:
       "Transition equation: Based on the problem, choose whether to combine with s[j], then take the maximum, minimum, or count as required.",
 
     dp_item2: "Double string type",
-    dp_item2_keys1: `
-    State: 1. dp[i][j] represents the xxxx ending with s1[i], s2[j]
-           2. dp[i][j] represents the xxxx up to s1[i], s2[j]`,
+    dp_item2_keys1: `State: 
+    1. dp[i][j] represents the xxxx ending with s1[i], s2[j]
+    2. dp[i][j] represents the xxxx up to s1[i], s2[j]`,
     dp_item2_keys2:
       "Enumeration: Typically, it involves two nested loops, where one loop fixes the right endpoint of s1, and the other loop fixes the right endpoint of s2 for enumeration.",
     dp_item2_keys3:
       "State transition: Based on the problem and the relationship between s[i] and s[j], take the maximum, minimum, or count as required.",
 
     dp_item3: "Sequence type",
-    dp_item3_keys1: `
-    State: 1. In one-dimensional arrays, dp[i] usually represents the xxxx ending with nums[i]
-           2. In two-dimensional arrays, dp[i][j] usually represents the xxxx ending with grid[i][j]`,
+    dp_item3_keys1: `State: 
+    1. In one-dimensional arrays, dp[i] usually represents the xxxx ending with nums[i]
+    2. In two-dimensional arrays, dp[i][j] usually represents the xxxx ending with grid[i][j]`,
     dp_item3_keys2:
       "Enumeration: One-dimensional involves a single loop to enumerate all nums, while two-dimensional involves two loops to enumerate all grid.",
-    dp_item3_keys3: `
-    State transition: 1. In one dimension, it usually involves the relationship between the current cell and the preceding two cells, possibly involving maximum, minimum, or counting.
-                      dp[i] = dp[i - 1] + dp[i - 2]" This is also called a recurrence relation because it does not involve decision-making.
-                      2. In two dimensions, it usually involves the relationship between the current cell and its upper and left adjacent cells, possibly involving maximum, minimum, or counting.
-                      dp[i][j] = dp[i - 1][j] + dp[i][j-1]" This is also called a recurrence relation because it does not involve decision-making.
-                      3. From the transition equation, it's not difficult to see that this type of problem can usually be optimized using rolling arrays.
+    dp_item3_keys3: `State transition:
+    1. In one dimension, it usually involves the relationship between the current cell and the preceding two cells, possibly involving maximum, minimum, or counting.
+      dp[i] = dp[i - 1] + dp[i - 2]" This is also called a recurrence relation because it does not involve decision-making.
+    2. In two dimensions, it usually involves the relationship between the current cell and its upper and left adjacent cells, possibly involving maximum, minimum, or counting.
+      dp[i][j] = dp[i - 1][j] + dp[i][j-1]" This is also called a recurrence relation because it does not involve decision-making.
+    3. From the transition equation, it's not difficult to see that this type of problem can usually be optimized using rolling arrays.
     `,
 
     dp_item4: "Backpack type(List only the problems)",
diff --git a/src/locales/index.js b/src/locales/index.js
index a5d0da2..3903f05 100644
--- a/src/locales/index.js
+++ b/src/locales/index.js
@@ -32,8 +32,8 @@ export const setLang = (_lang) => {
 export const initLang = async (currentUrl) => {
   if (isInit) return;
 
-  const isCnHref = currentUrl.includes(LEETCODE_CN_URL);
-  setLang(isCnHref ? "zh" : "en");
+  const isEnHref = currentUrl.includes(LEETCODE_URL);
+  setLang(isEnHref ? "en":"zh");
   isInit = true;
 };
 
diff --git a/src/locales/zh.js b/src/locales/zh.js
index 4fb8f84..3b7f2c4 100644
--- a/src/locales/zh.js
+++ b/src/locales/zh.js
@@ -385,9 +385,9 @@ const zh = {
     当然这个学习路线是给有一些基础的人看的，如果你还没有基础，可以看下相关文章，之后我也会写一篇硬核套路文。
     `,
     dp_item1: "单字符串型",
-    dp_item1_keys1: `
-    状态：1. dp[i] 表示以 s[i] 结尾的 xxxx
-         2. dp[i] 表示到 s[i] 为止的 xxxx
+    dp_item1_keys1: `状态：
+    1. dp[i] 表示以 s[i] 结尾的 xxxx
+    2. dp[i] 表示到 s[i] 为止的 xxxx
     `,
 
     dp_item1_keys2:
@@ -396,9 +396,9 @@ const zh = {
       "转移方程：根据题目选择是否和 s[j] 结合，取最大，最小或计数即可",
 
     dp_item2: "双字符串型",
-    dp_item2_keys1: `
-    状态：1. dp[i][j] 表示以 s1[i],s2[j] 结尾的 xxxx
-         2. dp[i][j] 表示到 s1[i],s2[j] 为止的 xxxx
+    dp_item2_keys1: `状态：
+    1. dp[i][j] 表示以 s1[i],s2[j] 结尾的 xxxx
+    2. dp[i][j] 表示到 s1[i],s2[j] 为止的 xxxx
     `,
     dp_item2_keys2:
       "枚举：通常都是两层循环，一层循环固定 s1 的右端点，另一层循环固定 s2 的右端点进行枚举",
@@ -406,18 +406,18 @@ const zh = {
       "状态转移：根据题目以及 s[i]， s[j] 的关系，取最大，最小或计数即可",
 
     dp_item3: "爬楼梯型",
-    dp_item3_keys1: `
-    状态：1. 一维通常是 dp[i] 表示以 nums[i] 结尾的 xxxx
-         2. 二维通常是 dp[i][j] 表示以 grid[i][j] 结尾的 xxxx
+    dp_item3_keys1: `状态：
+    1. 一维通常是 dp[i] 表示以 nums[i] 结尾的 xxxx
+    2. 二维通常是 dp[i][j] 表示以 grid[i][j] 结尾的 xxxx
     `,
     dp_item3_keys2:
       "枚举：一维就是一层循环枚举所有的 nums，二维就是两层循环枚举所有的 grid",
-    dp_item3_keys3: `
-    状态转移：1. 一维通常是当前格子和前面的两个格子的关系，可能是最大最小或计数。 
-            dp[i] = dp[i - 1] + dp[i - 2]，这也叫递推式，因为不涉及决策。
-            2. 二维通常是当前格子和上方以及左方的两个格子的关系，可能是最大最小或计数。
-            dp[i][j] = dp[i - 1][j] + dp[i][j-1]，这也叫递推式，因为不涉及决策。
-            3. 根转移方程不难看出， 这种题目通常都可以滚动数组优化
+    dp_item3_keys3: `状态转移：
+    1. 一维通常是当前格子和前面的两个格子的关系，可能是最大最小或计数。 
+      dp[i] = dp[i - 1] + dp[i - 2]，这也叫递推式，因为不涉及决策。
+    2. 二维通常是当前格子和上方以及左方的两个格子的关系，可能是最大最小或计数。
+      dp[i][j] = dp[i - 1][j] + dp[i][j-1]，这也叫递推式，因为不涉及决策。
+    3. 根转移方程不难看出， 这种题目通常都可以滚动数组优化
             `,
 
     dp_item4: "背包型（仅列举题目）",
diff --git a/src/roadmap/roadmap.jsx b/src/roadmap/roadmap.jsx
index d091291..8aa9cc2 100644
--- a/src/roadmap/roadmap.jsx
+++ b/src/roadmap/roadmap.jsx
@@ -567,14 +567,14 @@ export default function RoadMap() {
         </Radio.Button>
       </Radio.Group>
       <div>
-        <pre>{roadmaps[topic].desc}</pre>
+        <pre style={{whiteSpace: "pre-wrap"}}>{roadmaps[topic].desc}</pre>
         {roadmaps[topic].items.map((item) => {
           return (
             <div key={item.title}>
               <h1>{item.title}</h1>
               <div>
                 {item.keys.map((key) => (
-                  <pre key={key}>{key}</pre>
+                  <pre style={{whiteSpace: "pre-wrap"}} key={key}>{key}</pre>
                 ))}
               </div>
               {item.pic && (
@@ -583,9 +583,9 @@ export default function RoadMap() {
                   ({t("Locale.learningRoute.clickToEnlarge")})
                 </>
               )}
-              {item.code && <Codes codes={[item.code]}></Codes>}
+              {item.code && <Codes codes={[item.code]} ></Codes>}
               { t("Locale.learningRoute.recommendedProblems")}：
-              <ul>
+              <ul >
                 {item.problems.map(({ link, text, desc }) => {
                   return (
                     <li key={text}>