diff --git a/astro.config.mjs b/astro.config.mjs
index eca5863..f3a1fb9 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -4,10 +4,17 @@ import react from "@astrojs/react";
 import starlight from "@astrojs/starlight";
 import sitemap from "@astrojs/sitemap";
 
+import remarkBreaks from "remark-breaks";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://ayc0.github.io",
   base: "/", // We need the trailing / here otherwise links in the site will be broken
+
+  markdown: {
+    remarkPlugins: [remarkBreaks],
+  },
+
   integrations: [
     react({
       exclude: ["**/page-react-timings/*"],
diff --git a/package.json b/package.json
index ef98fce..8b7353a 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
     "reading-time": "^1.5.0",
+    "remark-breaks": "^4.0.0",
     "typescript": "^5.7.2"
   }
 }
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
index e50985d..851d83d 100644
--- a/src/content/docs/index.mdx
+++ b/src/content/docs/index.mdx
@@ -24,8 +24,9 @@ import { CardGrid, Card, LinkCard } from "@astrojs/starlight/components";
     style="text-decoration: none; color: initial; display: grid"
   >
     <Card title="CSS length units">
-      Listing of all CSS length units available, with their definitions, links
-      to doc, and live visualization of their sizes
+      {
+        "Listing of all CSS length units available, with their definitions, links to doc, and live visualization of their sizes"
+      }
     </Card>
   </a>
   <a
@@ -46,8 +47,9 @@ import { CardGrid, Card, LinkCard } from "@astrojs/starlight/components";
     style="text-decoration: none; color: initial; display: grid"
   >
     <Card title="React timings">
-      Experiment around React, life cycles, timings, and different rendering
-      modes
+      {
+        "Experiment around React, life cycles, timings, and different rendering modes"
+      }
     </Card>
   </a>
   <a
diff --git a/src/content/docs/posts/CSS/css-before-vs-before.mdx b/src/content/docs/posts/CSS/css-before-vs-before.mdx
index 58578c5..891a32e 100644
--- a/src/content/docs/posts/CSS/css-before-vs-before.mdx
+++ b/src/content/docs/posts/CSS/css-before-vs-before.mdx
@@ -25,8 +25,7 @@ The `:` notation isn’t deprecated as a whole, instead the old syntax was split
 
 ## `:pseudo-class`
 
-Pseudo-classes represent variations of a state of an element.
-When the condition is satisfied, the **whole** element is selected.
+Pseudo-classes represent variations of a state of an element. When the condition is satisfied, the **whole** element is selected.
 
 > A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
 
diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx
index dd6a183..e8608ce 100644
--- a/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx	
+++ b/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx	
@@ -25,8 +25,7 @@ Here is an example of this magnified:
 
 The way the browsers work is that if there is a `<script>` tag in your head or at the very beginning of your body, this script will block the rendering of the page until it hasn't completed.
 
-In general you want to avoid this, as you add unnecessary burden on the rendering of the page, and it will delay everything else.
-But for critical rendering like this one, this is okay.
+In general you want to avoid this, as you add unnecessary burden on the rendering of the page, and it will delay everything else. But for critical rendering like this one, this is okay.
 
 All you have to do is add something like the following in your HTML:
 
diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx
index e3f82d0..207a7f3 100644
--- a/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx	
+++ b/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx	
@@ -197,8 +197,7 @@ React.useEffect(() => {
 
 #### Initialization of the mode
 
-Now that we have a way to get, save, and update the mode, we need a way to translate it to a visual theme.
-For this we will use another state (because theme change should trigger an update).
+Now that we have a way to get, save, and update the mode, we need a way to translate it to a visual theme. For this we will use another state (because theme change should trigger an update).
 
 We'll use another lazy initial state to synchronize the `system` mode with the theme users picked for their devices:
 
diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx
index 572f719..4a3a32e 100644
--- a/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx	
+++ b/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx	
@@ -159,12 +159,16 @@ themeToggler.onclick = () => {
 
 ---
 
-**Note:**
-If you don't want any blink when users will load the page (seeing an empty white page when reloading the page for instance while they picked a dark mode for your website), it's important that this JS is executed in a blocking way, so that browsers won't render the html/css without having first computed this JS and applied the data attribute on the html. See:
+:::note
+If you don't want any blink when users will load the page (seeing an empty white page when reloading the page for instance while they picked a dark mode for your website), it's important that this JS is executed in a blocking way, so that browsers won't render the html/css without having first computed this JS and applied the data attribute on the html.
+
+See:
 
 <LinkToPost slug="dark-mode/light-dark-mode-avoid-flickering-on-reload" />
+:::
 
 ---
 
-**Note 2:**
+:::note[Note 2]
 The system mode we built here only resolves the theme when `system` is picked. But it won’t follow the system’s value in real time.
+:::
diff --git a/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx b/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx
index 2ecd2cf..f84f79c 100644
--- a/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx
+++ b/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx
@@ -107,8 +107,7 @@ And it does work indeed…
 
 ### Unicode composition
 
-Another specificity of Unicode is that it can combines multiple code points to form a grapheme. This is called canonical equivalence
-(see https://unicode.org/reports/tr15/#Canon_Compat_Equivalence).
+Another specificity of Unicode is that it can combines multiple code points to form a grapheme. This is called canonical equivalence (see https://unicode.org/reports/tr15/#Canon_Compat_Equivalence).
 
 For instance the letter "Ç" can either be the code point for this character, or the code point for "C" followed by the diacritic mark "◌̧"
 
diff --git a/src/content/docs/posts/Others/monitoring-websockets.mdx b/src/content/docs/posts/Others/monitoring-websockets.mdx
index 1c4f24e..2b20175 100644
--- a/src/content/docs/posts/Others/monitoring-websockets.mdx
+++ b/src/content/docs/posts/Others/monitoring-websockets.mdx
@@ -11,7 +11,7 @@ description: "Tools like Sentry or Datadog provide amazing monitoring tools for
 
 While tools like [Sentry](https://github.com/getsentry/sentry-javascript) or [Datadog](https://github.com/DataDog/browser-sdk) are amazing to track performance issues of HTML, CSS, JavaScript, and XHR requests, they often don’t provide the best tools when it comes to [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket). WebSocket connections themselves may be logged, but the messages/errors sent over them are not captured by these tools.
 
-Why? Because they all are built on top of the native [PerformanceObserver](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver), which doesn’t include any events for WebSockets.<br/>
+Why? Because they all are built on top of the native [PerformanceObserver](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver), which doesn’t include any events for WebSockets.
 You can check https://dyte.io/blog/web-api-performance-monitoring/ for how to set it up manually.
 
 ## Solution
diff --git a/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx b/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx
index b95792c..974df1b 100644
--- a/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx
+++ b/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx
@@ -139,8 +139,7 @@ import { foo } from "./foo.js";
 export const bar = `${foo} sets a new bar`;
 ```
 
-This indeed works!
-Hoorah! We have some working code with TypeScript & ESM 🎉
+This indeed works! Hoorah! We have some working code with TypeScript & ESM 🎉
 This is the official way of supporting ESM in TS files: https://www.typescriptlang.org/docs/handbook/esm-node.html.
 
 The only issue is that we have to write down `foo.js` in the source TS file, which is weird 😕 (as the file doesn’t exist during dev time).
diff --git a/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx b/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx
index f952aff..a6f9503 100644
--- a/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx
+++ b/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx
@@ -24,8 +24,7 @@ wrappy@1:
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 ```
 
-Here we can see that the package `wrappy` is the dependency and requested at the version `1` (`wrappy@1`).
-But the resolved, imported version is the version `1.0.2` (with its hash and the URL for the download).
+Here we can see that the package `wrappy` is the dependency and requested at the version `1` (`wrappy@1`). But the resolved, imported version is the version `1.0.2` (with its hash and the URL for the download).
 
 ## Multiple resolutions
 
diff --git a/yarn.lock b/yarn.lock
index 5f59105..b74e482 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4413,6 +4413,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-newline-to-break@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-newline-to-break@npm:2.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-find-and-replace: "npm:^3.0.0"
+  checksum: 10c0/756a5660b0a821e0d6d6a0b2d9b13ac32e41cc028c485a91bccf6300977e2557236c6cc93dbd55c68b785f1ed6eae69209a4ffe182533cd1cdfda369021bebd2
+  languageName: node
+  linkType: hard
+
 "mdast-util-phrasing@npm:^4.0.0":
   version: 4.1.0
   resolution: "mdast-util-phrasing@npm:4.1.0"
@@ -5582,6 +5592,7 @@ __metadata:
     react-dom: "npm:^19.0.0"
     react-konva: "npm:^19.0.1"
     reading-time: "npm:^1.5.0"
+    remark-breaks: "npm:^4.0.0"
     reveal.js: "npm:^5.1.0"
     typescript: "npm:^5.7.2"
   languageName: unknown
@@ -5858,6 +5869,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-breaks@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "remark-breaks@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-newline-to-break: "npm:^2.0.0"
+    unified: "npm:^11.0.0"
+  checksum: 10c0/d7b319a7993b54c5d574e9255080c5de68cfa24f993873b0ee296af13f478521c41d4b7ae0fc14b4607ea70c8f6967e998ab7a467de13139141e66a1a34cb6be
+  languageName: node
+  linkType: hard
+
 "remark-directive@npm:^3.0.0":
   version: 3.0.0
   resolution: "remark-directive@npm:3.0.0"