diff --git a/src/components/article/article_body/ArticleBody.astro b/src/components/article/article_body/ArticleBody.astro
new file mode 100644
index 0000000..9901f0c
--- /dev/null
+++ b/src/components/article/article_body/ArticleBody.astro
@@ -0,0 +1,37 @@
+---
+// get rendered ArticleBodyContent HTML
+const html = await Astro.slots.render("default");
+
+// If some lines are not started with ASCII character,
+// join them to their previous line.
+// This is important.
+// Because I add one newline character to wrap Chinese.
+const arr = html.split("\n");
+let articleHTMLFinal = arr[0];
+// Whether the current line belongs to the area where
+// the line break should be kept.
+let remainIntactArea = false;
+for (let i = 1; i < arr.length; i++) {
+  if (arr[i].match(/^(<pre|<code|<blockquote|<table)/) !== null) {
+    remainIntactArea = true;
+  } else {
+    remainIntactArea = false;
+  }
+  if (
+    // If the first character is not ascii character,
+    // or the final character of previous line is not character.
+    // AND
+    // Current line should not belong to area that remains intact.
+    (arr[i].charAt(0).match(/[ -~]/) === null ||
+      arr[i - 1].charAt(arr[i - 1].length - 1).match(/[ -~]/) === null) &&
+    !remainIntactArea
+  ) {
+    articleHTMLFinal += arr[i];
+  } else {
+    articleHTMLFinal += "\n";
+    articleHTMLFinal += arr[i];
+  }
+}
+---
+
+<Fragment set:html={articleHTMLFinal} />
diff --git a/src/components/article/ArticleBody.astro b/src/components/article/article_body/ArticleBodyContent.astro
similarity index 100%
rename from src/components/article/ArticleBody.astro
rename to src/components/article/article_body/ArticleBodyContent.astro
diff --git a/src/components/article/article_body/ArticleBodyWrapper.astro b/src/components/article/article_body/ArticleBodyWrapper.astro
new file mode 100644
index 0000000..ad07819
--- /dev/null
+++ b/src/components/article/article_body/ArticleBodyWrapper.astro
@@ -0,0 +1,18 @@
+---
+import type { CollectionKey } from "astro:content";
+import ArticleBody from "./ArticleBody.astro";
+import ArticleBodyContent from "./ArticleBodyContent.astro";
+
+interface Props {
+  articleSlug: string;
+  collectionName: CollectionKey;
+}
+const { articleSlug, collectionName } = Astro.props;
+---
+
+<ArticleBody>
+  <ArticleBodyContent
+    collectionName={collectionName}
+    articleSlug={articleSlug}
+  />
+</ArticleBody>
diff --git a/src/pages/article/blog/[...blog].astro b/src/pages/article/blog/[...blog].astro
index 8cfba5d..05677ce 100644
--- a/src/pages/article/blog/[...blog].astro
+++ b/src/pages/article/blog/[...blog].astro
@@ -7,7 +7,7 @@ import type {
 } from "astro:content";
 import Footer from "../../../components/Footer.astro";
 import Nav from "../../../components/Nav.astro";
-import ArticleBody from "../../../components/article/ArticleBody.astro";
+import ArticleBodyWrapper from "../../../components/article/article_body/ArticleBodyWrapper.astro";
 import DefaultLayout from "../../../layouts/DefaultLayout.astro";
 
 export async function getStaticPaths() {
@@ -29,6 +29,6 @@ const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
 
 <DefaultLayout title=`${articlePrettyName} - 李守中`>
   <Nav />
-  <ArticleBody collectionName="blog" articleSlug={entry.slug} />
+  <ArticleBodyWrapper collectionName="blog" articleSlug={entry.slug} />
   <Footer />
 </DefaultLayout>
diff --git a/src/pages/article/note/[...note].astro b/src/pages/article/note/[...note].astro
index 4e7f86c..ae1c1fa 100644
--- a/src/pages/article/note/[...note].astro
+++ b/src/pages/article/note/[...note].astro
@@ -7,7 +7,7 @@ import type {
 } from "astro:content";
 import Footer from "../../../components/Footer.astro";
 import Nav from "../../../components/Nav.astro";
-import ArticleBody from "../../../components/article/ArticleBody.astro";
+import ArticleBodyWrapper from "../../../components/article/article_body/ArticleBodyWrapper.astro";
 import DefaultLayout from "../../../layouts/DefaultLayout.astro";
 
 export async function getStaticPaths() {
@@ -29,6 +29,6 @@ const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
 
 <DefaultLayout title=`${articlePrettyName} - 李守中`>
   <Nav />
-  <ArticleBody collectionName="note" articleSlug={entry.slug} />
+  <ArticleBodyWrapper collectionName="note" articleSlug={entry.slug} />
   <Footer />
 </DefaultLayout>
diff --git a/src/pages/article/translation/[...translation].astro b/src/pages/article/translation/[...translation].astro
index 1d65b3f..1951b00 100644
--- a/src/pages/article/translation/[...translation].astro
+++ b/src/pages/article/translation/[...translation].astro
@@ -7,7 +7,7 @@ import type {
 } from "astro:content";
 import Footer from "../../../components/Footer.astro";
 import Nav from "../../../components/Nav.astro";
-import ArticleBody from "../../../components/article/ArticleBody.astro";
+import ArticleBodyWrapper from "../../../components/article/article_body/ArticleBodyWrapper.astro";
 import DefaultLayout from "../../../layouts/DefaultLayout.astro";
 
 export async function getStaticPaths() {
@@ -29,6 +29,6 @@ const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
 
 <DefaultLayout title=`${articlePrettyName} - 李守中`>
   <Nav />
-  <ArticleBody collectionName="translation" articleSlug={entry.slug} />
+  <ArticleBodyWrapper collectionName="translation" articleSlug={entry.slug} />
   <Footer />
 </DefaultLayout>