diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html index f0f720b87..9300b08cb 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html @@ -7,10 +7,13 @@ via an attribute.

Creating a render note

    -
  1. Create a Code note - with the HTML language, with what needs to be displayed (for example <p>Hello world.</p>).
    2. -
  2. Create a Render Note.
    3. -
  3. Assign the renderNote relation to +
  4. Create a Code note + with the HTML language, with what needs to be displayed (for example + <p>Hello world.</p>).
    5. +
  5. Create a Render Note.
    6. +
  6. Assign the renderNote relation to point at the previously created code note.

Legacy scripting using jQuery

@@ -19,14 +22,14 @@ change parts of the note using JavaScript.

For a simple example, we are going to create a render note that displays the current date in a field.

-

To do so, first create an HTML code note with the following content:

<h1>Current date & time</h1>
+
To do so, first create an HTML code note with the following content:
<h1>Current date & time</h1>
 The current date & time is <span class="date"></span>

 
Now we need to add the script. Create another Code, but this time of JavaScript (frontend)
   language. Make sure the newly created note is a direct child of the HTML
-  note created previously; with the following content:
const $dateEl = api.$container.find(".date");
+  note created previously; with the following content:
const $dateEl = api.$container.find(".date");
 $dateEl.text(new Date());

-
Now create a render note at any place and set its ~renderNote relation
+
Now create a render note at any place and set its ~renderNote relation
   to point to the HTML note. When the render note is accessed it will display:

 

   
Current date & time
@@ -39,37 +42,33 @@ $dateEl.text(new Date());

   need to provide a HTML anymore.

 
Here are the steps to creating a simple render note:

 
    
-  
  1. 
-    
    Create a note of type Render Note.
    
-  
    2. 
-  
  2. 
+  
  3. Create a note of type Render Note.
    4. 
+  
  4. 
     
    Create a child Code note
       with JSX as the language.
-      
    As an example, use the following content:
    export default function() {
+      
    As an example, use the following content:
    export default function() {
     return (
         <>
             <p>Hello world.</p>
         </>
     );
 }
    
-  
    5. 
-  
  5. 
-    
    In the parent render note, define a ~renderNote relation pointing
-      to the newly created child.
    
-  
    6. 
-  
  6. 
-    
    Refresh the render note and it should display a “Hello world” message.
    
-  
    7. 
+    
+    
  7. In the parent render note, define a ~renderNote relation
+      pointing to the newly created child.
    8. 
+    
  8. Refresh the render note and it should display a “Hello world” message.
    9. 
 

 
Refreshing the note

 
It's possible to refresh the note via:

 
 
Examples

 
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Render Note.md b/docs/User Guide/User Guide/Note Types/Render Note.md
index 828d7dfef..c0c4e4eea 100644
--- a/docs/User Guide/User Guide/Note Types/Render Note.md	
+++ b/docs/User Guide/User Guide/Note Types/Render Note.md	
@@ -17,14 +17,14 @@ For a simple example, we are going to create a render note that displays the cur
 
 To do so, first create an HTML code note with the following content:
 
-```
+```html
 
Current date & time

 The current date & time is 
 ```
 
 Now we need to add the script. Create another Code, but this time of JavaScript (frontend) language. Make sure the newly created note is a direct child of the HTML note created previously; with the following content:
 
-```
+```javascript
 const $dateEl = api.$container.find(".date");
 $dateEl.text(new Date());
 ```
@@ -44,7 +44,7 @@ Here are the steps to creating a simple render note:
 2.  Create a child Code note with JSX as the language.  
     As an example, use the following content:
     
-    ```
+    ```jsx
     export default function() {
         return (
             <>