docs: added warning and notes

docs/community/newDiagram.md

@@ -30,7 +30,7 @@ There are some jison specific sub steps here where the parser stores the data en
 
 In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.
 
-> **Note**
+> **Note**\
 > Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
 
 For more info look in the example diagram type:

docs/config/8.6.0_docs.md

@@ -52,7 +52,7 @@ Implementors can only modify configurations using directives, and cannot change
 
 The Two types of directives: are `init` (or `initialize`) and `wrap`.
 
-> **Note**
+> **Note**\
 > All directives are enclosed in `%%{ }%%`
 
 Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible.
@@ -65,7 +65,7 @@ Older versions of mermaid will not parse directives because `%%` will comment ou
 | --------- | ----------------------- | --------- | -------- | ----------------------------------------------- |
 | init      | modifies configurations | Directive | Optional | Any parameters not included in the secure array |
 
-> **Note**
+> **Note**\
 > init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
 
 The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
@@ -111,7 +111,7 @@ When deployed within code, init is called before the graph/diagram description.
 | --------- | ----------------------------- | --------- | -------- | ---------- |
 | wrap      | a callable text-wrap function | Directive | Optional | %%{wrap}%% |
 
-> **Note**
+> **Note**\
 > Wrap is a function that is currently only deployable for sequence diagrams.
 
 Wrap respects a manually added \<br>, so if the user wants to break up their text, they have full control over line breaks by adding \<br> tags.
@@ -162,7 +162,7 @@ Example of **object.Assign**:
 | --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- |
 | `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf       | siteConfig |
 
-> **Note**
+> **Note**\
 > Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
 > the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
 > to the defaultConfig
@@ -175,7 +175,7 @@ Example of **object.Assign**:
 | --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
 | `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |
 
-> **Note**
+> **Note**\
 > Returns any values in siteConfig.
 
 ## setConfig
@@ -184,7 +184,7 @@ Example of **object.Assign**:
 | ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- |
 | `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf       | `currentConfig` merged with the sanitized conf |
 
-> **Note**
+> **Note**\
 > Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
 > values found in conf with key found in siteConfig.secure will be replaced with the corresponding
 > siteConfig value.
@@ -195,7 +195,7 @@ Example of **object.Assign**:
 | ----------- | --------------------------- | ----------- | ------------------------------- |
 | `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` |
 
-> **Note**
+> **Note**\
 > Returns any values in currentConfig.
 
 ## sanitize
@@ -204,7 +204,7 @@ Example of **object.Assign**:
 | ---------- | ---------------------------------------- | -------------- | ------ |
 | `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None   |
 
-> **Note**
+> **Note**\
 > modifies options in-place
 > Ensures options parameter does not attempt to override siteConfig secure keys.
 
@@ -220,7 +220,7 @@ Example of **object.Assign**:
 | --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- |
 | `conf`    | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array |
 
-> **Note**
+> **Note**\
 > default: current siteConfig (optional, default `getSiteConfig()`)
 > s
 

docs/config/theming.md

@@ -156,7 +156,7 @@ You can create your own themes, by changing any of the given variables below. If
 
 ## Theme Variables Reference Table
 
-> **Note**
+> **Note**\
 > Variables that are unique to some diagrams can be affected by changes in Theme Variables
 
 | Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |

docs/config/usage.md

@@ -119,7 +119,7 @@ Values:
 - **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
 - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
 
-> **Note**
+> **Note**\
 > This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
 > **sandbox** security level is still in the beta version.
 
@@ -186,7 +186,7 @@ Or with no config object, and a jQuery selection:
 mermaid.init(undefined, $('#someId .yetAnotherClass'));
 ```
 
-> **Warning**
+> **Warning**\
 > This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
 
 ## Usage with webpack
@@ -341,7 +341,7 @@ on what kind of integration you use.
 </script>
 ```
 
-> **Note**
+> **Note**\
 > This is the preferred way of configuring mermaid.
 
 ### The following methods are deprecated and are kept only for backwards compatibility.
@@ -358,7 +358,7 @@ approach are:
 mermaid.startOnLoad = true;
 ```
 
-> **Warning**
+> **Warning**\
 > This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
 
 ## Using the mermaid_config
@@ -373,7 +373,7 @@ approach are:
 mermaid_config.startOnLoad = true;
 ```
 
-> **Warning**
+> **Warning**\
 > This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
 
 ## Using the mermaid.init call
@@ -387,5 +387,5 @@ To set some configuration via the mermaid object. The two parameters that are su
 mermaid_config.startOnLoad = true;
 ```
 
-> **Warning**
+> **Warning**\
 > This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.

docs/syntax/sequenceDiagram.md

@@ -24,7 +24,7 @@ sequenceDiagram
     Alice-)John: See you later!
 ```
 
-> **Note**
+> **Note**\
 > A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
 
 If unavoidable, one must use parentheses(), quotation marks "", or brackets {},\[], to enclose the word "end". i.e : (end), \[end], {end}.

packages/mermaid/src/docs.mts

@@ -159,7 +159,7 @@ const transformAnnotation = (content: string, type: 'warning' | 'tip' | 'note')
     console.log(`found ${matches.length} of ${type}`);
 
     const formatted = matches.map((element) =>
-      element.replace(`::: ${type}`, `> **${text}**`).replace(':::', '>').replace('\n', '\n> ')
+      element.replace(`::: ${type}`, `> **${text}**  `).replace(':::', '>').replace('\n', '\n> ')
     );
     let n = 0;
     for (const match of matches) {