Added missing module install infos

dist/bubble-modules.yaml

@@ -4,14 +4,24 @@
 # 
 # - To edit or add modules (global styles and templates), first copy the 
 #   "bubble-modules.yaml" file from "/www/community/Bubble-Card/" (if installed via HACS) 
-#   to "/www/bubble/" (Create the folder if it doesn't exist). 
+#   to "/www/bubble/" (you'll need to create this folder). 
 #
-# - You can share/find modules here:
-#   github.com/Clooos/Bubble-Card/discussions/categories/share-your-modules
+#   Then add these lines in your "configuration.yaml" under "homeassistant:":
+#
+#   homeassistant:
+#     allowlist_external_dirs:
+#       - /config/www/bubble
+#       # Not needed if you already have this line:
+#       - /config/www
+#
+#   Then save and restart Home Assistant.
 #
 # - After making changes, you need to refresh your page to apply the modifications.
 # 
-# - Styles and templates defined under the "default:" key are applied globally to all cards by default.
+# - Styles and templates defined under "default:" are applied globally to all cards by default.
+#
+# - You can share/find modules here:
+#   github.com/Clooos/Bubble-Card/discussions/categories/share-your-modules
 
 
 default:

src/editor/bubble-card-editor.js

@@ -963,11 +963,19 @@ class BubbleCardEditor extends LitElement {
               <ha-icon icon="mdi:open-in-new"></ha-icon>
               Community Modules
             </a>
+
             <ha-alert alert-type="warning" style="display: ${!window.bubbleYamlWarning ? 'none' : ''}">
               <b>If you want to edit or add modules here</b>, first copy
               <code>bubble-modules.yaml</code> from <code>/www/community/Bubble-Card/</code> (if installed via HACS) to
-              <code>/www/bubble/</code> (you'll need to create this folder). Make sure to refresh your page after each modification.
+              <code>/www/bubble/</code> (you'll need to create this folder). 
+              <br><br>Then add these lines in your <code>configuration.yaml</code> under <code>homeassistant:</code>:
+              <br><br><code-block><pre>
+                <i>homeassistant:</i>
+                <i>  allowlist_external_dirs:</i>
+                <i>    - /config/www/bubble</pre></code-block></i>
+              <br>Now save and restart Home Assistant, then <b>check if this warning is gone</b>. Make sure to refresh your page after each modification.
             </ha-alert>
+
             <ha-alert alert-type="info">
               Modules are the best way to apply <a href="https://github.com/Clooos/Bubble-Card#styling">custom styles</a> and/or <a href="https://github.com/Clooos/Bubble-Card#templates">custom templates</a> to your cards, as they are managed in a single external YAML file. 
               This makes it easy to change things like the styles of all your cards, and for advanced users, to add or modify features. <br><br>The best approach when starting is to first test your changes in the "Custom styles & templates" editor under "Styling options" for a live preview, and once it's working, try to add it as a module. 

src/editor/styles.css

@@ -61,11 +61,16 @@ code-block {
 }
 
 code-block pre {
-  white-space: pre;
+  white-space: pre-line;
   overflow: auto;
   margin: 8px;
 }
 
+code-block pre > i {
+    white-space: pre;
+    font-style: normal;
+}
+
 img {
   max-width: 100%;
   margin: 14px 0;

src/var/version.js

@@ -1 +1 @@
-export let version = 'v2.5.0-beta.3';
+export let version = 'v2.5.0-beta.4';