diff --git a/packages/@zblog/toolchain/src/markdown-parser.ts b/packages/@zblog/toolchain/src/markdown-parser.ts
index ae5ab8b..9a7e36c 100644
--- a/packages/@zblog/toolchain/src/markdown-parser.ts
+++ b/packages/@zblog/toolchain/src/markdown-parser.ts
@@ -901,7 +901,7 @@ export const toHtml = (markdown: string, assetDirectory: string): string => {
     // .filter((s) => !(s instanceof JustALineBreak))
     .map((s) => s.render())
     .join("");
-  return `<div>${html}</div>`;
+  return `<div class="content">${html}</div>`;
 };
 
 /**
diff --git a/src/templates/note.html b/src/templates/note.html
index 57bb009..0003d97 100644
--- a/src/templates/note.html
+++ b/src/templates/note.html
@@ -23,12 +23,16 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      flex: 1;
     }
 
     pre {
       box-sizing: border-box;
       border: 1px solid #00FFFF;
       padding: 1rem;
+      width: fit-content;
+      max-width: 100%;
+      white-space: normal;
     }
 
     img {
@@ -121,6 +125,12 @@
     a {
       color: #00FFFF;
     }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
   </style>
 </head>