diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index cbfd695..8272408 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -31,4 +31,4 @@ jobs:
           gh release create "$tag" \
             --title="$tag" \
             --draft \
-            main.js manifest.json
+            main.js manifest.json styles.css
diff --git a/main.js b/main.js
index 97f47bc..40e0287 100644
--- a/main.js
+++ b/main.js
@@ -6,11 +6,14 @@ module.exports = class MyPlugin extends Plugin {
     this.registerMarkdownPostProcessor((element, context) => {
       this.processNotes(element);
     });
+
+    // Charger les styles CSS depuis styles.css
+    this.addStylesheet("styles.css");
   }
 
   // Fonction pour détecter et transformer les blocs de type ":::type[Titre]" dans le markdown
   processNotes(element) {
-    if (!element || !element.innerHTML) return;
+    if (!element) return;
 
     const types = [
       "note",
@@ -30,161 +33,56 @@ module.exports = class MyPlugin extends Plugin {
     ];
 
     types.forEach((type) => {
-      // Recherche des blocs personnalisés :::type[Titre]
+      // Parcourir les enfants de l'élément pour trouver les blocs correspondants
       const regex = new RegExp(`:::${type}\\[([^\\]]+)\\]([\\s\\S]*?):::`, "g");
-      element.innerHTML = element.innerHTML.replace(
-        regex,
-        (match, title, content) => {
-          return this.createBox(type, title, content);
+
+      Array.from(element.childNodes).forEach((child) => {
+        if (child.nodeType === Node.TEXT_NODE) {
+          const matches = [...child.textContent.matchAll(regex)];
+          if (matches.length > 0) {
+            const fragment = document.createDocumentFragment();
+
+            matches.forEach((match) => {
+              const [fullMatch, title, content] = match;
+
+              // Créer un élément DOM pour la boîte
+              const boxElement = this.createBoxElement(type, title, content);
+
+              // Ajouter la boîte au fragment
+              fragment.appendChild(boxElement);
+
+              // Supprimer le texte correspondant au match
+              child.textContent = child.textContent.replace(fullMatch, "");
+            });
+
+            // Insérer les nouvelles boîtes avant le nœud textuel actuel
+            element.insertBefore(fragment, child);
+          }
         }
-      );
+      });
     });
   }
 
-  // Fonction pour générer le HTML des boîtes stylisées
-  createBox(type, title, content) {
-    // Remplacer les sauts de ligne par des balises <br> pour préserver le formatage
-    const formattedContent = content.trim().replace(/\n/g, "<br>");
-    return `
-      <section class="custom-box ${type}">
-        <div class="box-title">${title}</div>
-        <div class="box-content">${formattedContent}</div>
-      </section>
-    `;
+  // Fonction pour créer dynamiquement un élément DOM pour la boîte stylisée
+  createBoxElement(type, title, content) {
+    const section = document.createElement("section");
+    section.classList.add("custom-box", type);
+
+    const titleDiv = document.createElement("div");
+    titleDiv.classList.add("box-title");
+    titleDiv.textContent = title;
+
+    const contentDiv = document.createElement("div");
+    contentDiv.classList.add("box-content");
+    content.split("\n").forEach((line) => {
+      const lineElement = document.createElement("p");
+      lineElement.textContent = line;
+      contentDiv.appendChild(lineElement);
+    });
+
+    section.appendChild(titleDiv);
+    section.appendChild(contentDiv);
+
+    return section;
   }
 };
-
-// CSS à ajouter pour styliser les boîtes
-const customBoxCSS = `
-  .custom-box {
-    border-radius: 5px;
-    padding: 15px;
-    margin: 15px 0;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-
-  .custom-box.note {
-    color: #000;
-    background-color: #fff;
-    border-left: 4px solid #d1d3c0;
-    border-top: 4px solid #d1d3c0;
-  }
-
-  .custom-box.tip {
-    color: #000;
-    background-color: #e8f5e9;
-    border-left: 4px solid #66bb6a;
-    border-top: 4px solid #66bb6a;
-  }
-
-  .custom-box.info {
-    color: #000;
-    background-color: #e3f2fd;
-    border-left: 4px solid #29b6f6;
-    border-top: 4px solid #29b6f6;
-  }
-
-  .custom-box.warning {
-    color: #000;
-    background-color: #fff8e1;
-    border-left: 4px solid #ffa726;
-    border-top: 4px solid #ffa726;
-  }
-
-  .custom-box.danger {
-    color: #000;
-    background-color: #ffebee;
-    border-left: 4px solid #ef5350;
-    border-top: 4px solid #ef5350;
-  }
-
-  .custom-box.success {
-    color: #000;
-    background-color: #36ff00;
-    border-left: 4px solid #28a745;
-    border-top: 4px solid #28a745;
-  }
-
-  .custom-box.error {
-    color: #fff;
-    background-color: #911a24;
-    border-left: 4px solid #e74c3c;
-    border-top: 4px solid #e74c3c;
-  }
-
-  .custom-box.critical {
-    color: #fff;
-    background-color: #ff2300;
-    border-left: 4px solid #7b0f1c;
-    border-top: 4px solid #7b0f1c;
-  }
-
-  .custom-box.debug {
-    color: #fff;
-    background-color: #486bbb;
-    border-left: 4px solid #b0bec5;
-    border-top: 4px solid #b0bec5;
-  }
-
-  .custom-box.update {
-    color: #000;
-    background-color: #6eec66;
-    border-left: 4px solid #5ebf58;
-    border-top: 4px solid #5ebf58;
-  }
-
-  .custom-box.question {
-    color: #000;
-    background-color: #f3ff00;
-    border-left: 4px solid #ffdc00;
-    border-top: 4px solid #ffdc00;
-  }
-
-  .custom-box.announcement {
-    color: #000;
-    background-color: #ec00ff;
-    border-left: 4px solid #ec407a;
-    border-top: 4px solid #ec407a;
-  }
-
-  .custom-box.progress {
-    color: #000;
-    background-color: #ede7f6;
-    border-left: 4px solid #7e57c2;
-    border-top: 4px solid #7e57c2;
-  }
-
-  .custom-box.highlight {
-    color: #000;
-  background: linear-gradient(0deg, #f6ef5c 0%, #98ceff 100%);
-    border-left: 4px solid #ff9800;
-    border-top: 4px solid #ff9800;
-  }
-
-
-
-  .box-title {
-    font-weight: bold;
-    margin-bottom: 10px;
-    position: relative;
-    padding-bottom: 5px;
-  }
-
-  .box-title::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(to right, #676860, transparent);
-  }
-
-  .box-content {
-    margin-top: -30px;
-    line-height: 1.5;
-  }
-`;
-
-// Insérer le style dans le document
-document.head.insertAdjacentHTML("beforeend", `<style>${customBoxCSS}</style>`);
diff --git a/manifest.json b/manifest.json
index dd360be..737ef33 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "id": "wonderbox",
   "name": "WonderBox",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "minAppVersion": "0.12.0",
   "description": "Create more relevant text sections your tips, top notes, warnings and more.",
   "author": "Christian Humbert",
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..b20c32f
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,126 @@
+.custom-box {
+  border-radius: 5px;
+  padding: 15px;
+  margin: 15px 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.custom-box.note {
+  color: #000;
+  background-color: #fff;
+  border-left: 4px solid #d1d3c0;
+  border-top: 4px solid #d1d3c0;
+}
+
+.custom-box.tip {
+  color: #000;
+  background-color: #e8f5e9;
+  border-left: 4px solid #66bb6a;
+  border-top: 4px solid #66bb6a;
+}
+
+.custom-box.info {
+  color: #000;
+  background-color: #e3f2fd;
+  border-left: 4px solid #29b6f6;
+  border-top: 4px solid #29b6f6;
+}
+
+.custom-box.warning {
+  color: #000;
+  background-color: #fff8e1;
+  border-left: 4px solid #ffa726;
+  border-top: 4px solid #ffa726;
+}
+
+.custom-box.danger {
+  color: #000;
+  background-color: #ffebee;
+  border-left: 4px solid #ef5350;
+  border-top: 4px solid #ef5350;
+}
+
+.custom-box.success {
+  color: #000;
+  background-color: #36ff00;
+  border-left: 4px solid #28a745;
+  border-top: 4px solid #28a745;
+}
+
+.custom-box.error {
+  color: #fff;
+  background-color: #911a24;
+  border-left: 4px solid #e74c3c;
+  border-top: 4px solid #e74c3c;
+}
+
+.custom-box.critical {
+  color: #fff;
+  background-color: #ff2300;
+  border-left: 4px solid #7b0f1c;
+  border-top: 4px solid #7b0f1c;
+}
+
+.custom-box.debug {
+  color: #fff;
+  background-color: #486bbb;
+  border-left: 4px solid #b0bec5;
+  border-top: 4px solid #b0bec5;
+}
+
+.custom-box.update {
+  color: #000;
+  background-color: #6eec66;
+  border-left: 4px solid #5ebf58;
+  border-top: 4px solid #5ebf58;
+}
+
+.custom-box.question {
+  color: #000;
+  background-color: #f3ff00;
+  border-left: 4px solid #ffdc00;
+  border-top: 4px solid #ffdc00;
+}
+
+.custom-box.announcement {
+  color: #000;
+  background-color: #ec00ff;
+  border-left: 4px solid #ec407a;
+  border-top: 4px solid #ec407a;
+}
+
+.custom-box.progress {
+  color: #000;
+  background-color: #ede7f6;
+  border-left: 4px solid #7e57c2;
+  border-top: 4px solid #7e57c2;
+}
+
+.custom-box.highlight {
+  color: #000;
+  background: linear-gradient(0deg, #f6ef5c 0%, #98ceff 100%);
+  border-left: 4px solid #ff9800;
+  border-top: 4px solid #ff9800;
+}
+
+.box-title {
+  font-weight: bold;
+  margin-bottom: 10px;
+  position: relative;
+  padding-bottom: 5px;
+}
+
+.box-title::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(to right, #676860, transparent);
+}
+
+.box-content {
+  margin-top: -30px;
+  line-height: 1.5;
+}