Fix width of pre element

packages/@zblog/toolchain/src/markdown-parser.ts

@@ -304,9 +304,10 @@ class Link extends Symbol {
   /**
    * @type {RegExp}
    */
-  static textAndLinkRegExp: RegExp = new RegExp(
-    /\[(?<text>.*)\]\((?<link>.*)\)/
-  );
+  static textAndLinkRegExp: RegExp = new RegExp
+    (
+      /\[(?<text>[^\]]+)\]\((?<link>[^)]+)\)/
+    );
   /**
    * @type {string}
    */
@@ -350,7 +351,8 @@ class Link extends Symbol {
   }
 
   render() {
-    return `<a href="${this.link}">${this.text}</a>`;
+    // TODO: This leading space should probably be somewhere else.
+    return ` <a href="${this.link}">${this.text}</a>`;
   }
 }
 
@@ -899,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>`;
 };
 
 /**

src/templates/note.html

@@ -8,7 +8,7 @@
   <style>
     html {
       font-family: monospace;
-      font-size: 17px;
+      font-size: 18px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -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 {
@@ -37,7 +41,6 @@
     }
 
     p {
-      margin: 20px;
       margin-top: 20px;
       margin-bottom: 0px;
     }
@@ -63,7 +66,7 @@
     h4,
     h5,
     h6 {
-      margin: 20px;
+      margin-top: 20px;
       margin-bottom: 0px;
       text-transform: capitalize;
       line-height: 32px;
@@ -118,6 +121,16 @@
         margin-left: 10px;
       }
     }
+
+    a {
+      color: #00FFFF;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
   </style>
 </head>