From e3595a43c2ab4b319ded52a17a7b8cde80272791 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Wed, 24 Dec 2025 00:41:08 +0200 Subject: [PATCH] docs(user): missing language tags for JSX code blocks --- .../User Guide/Note Types/Render Note.html | 45 ++--- .../Frontend Basics/Custom Widgets.html | 176 +++++++++--------- .../Launch Bar Widgets/Note Title Widget.html | 2 +- .../Scripting/Frontend Basics/Preact.html | 31 +-- .../Preact/Built-in components.html | 14 +- .../Scripting/Frontend Basics/Preact/CSS.html | 4 +- .../Developer Guide/Documentation.md | 2 +- docs/User Guide/User Guide.md | 2 +- .../User Guide/Note Types/Render Note.md | 4 +- .../Frontend Basics/Custom Widgets.md | 2 +- .../Launch Bar Widgets/Note Title Widget.md | 2 +- .../Scripting/Frontend Basics/Preact.md | 8 +- .../Preact/Built-in components.md | 4 +- .../Scripting/Frontend Basics/Preact/CSS.md | 2 +- 14 files changed, 146 insertions(+), 152 deletions(-) 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 9300b08cb..832156f7a 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,13 +7,10 @@ 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

@@ -22,14 +19,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
@@ -42,33 +39,37 @@ $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/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html
index 56a1c3491..7617ab9a4 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html	
@@ -4,31 +4,29 @@
 
Preact with JSX vs. vanilla jQuery

 
In older versions of Trilium, custom widgets were exclusively written
   in a combination of jQuery with Trilium's internal widget architecture
-  (e.g., BasicWidget, NoteContextAwareWidget).

+  (e.g., BasicWidget, NoteContextAwareWidget).

 
Starting with v0.101.0, custom widgets can also be written in JSX using
   the Preact framework.
   Both legacy and Preact widgets have the same capabilities, with a single
   difference:

 
    
-  
  • Preact widgets are content-sized by default whereas legacy widgets need
-    this.contentSized()applied in the constructor. For more information,
-      see the corresponding section in Troubleshooting.
    • 
+  
  • Preact widgets are content-sized by default whereas legacy widgets need this.contentSized() applied
+    in the constructor. For more information, see the corresponding section
+    in Troubleshooting.
    • 
 

 
Wherever possible, widget examples will be both in the legacy and Preact
   format.

 
Creating a custom widget

 
    
-  
  1. Create a Code note.
    2. 
-  
  2. Set the language to:
+  
  3. Create a Code note.
    4. 
+  
  4. Set the language to:
     
      
-      
    1. JavaScript (frontend) for legacy widgets using jQuery.
      2. 
-      
    2. JSX for Preact widgets. You might need to go to Options → Code to enable
+      
    3. JavaScript (frontend) for legacy widgets using jQuery.
      4. 
+      
    4. JSX for Preact widgets. You might need to go to Options → Code to enable
         the language first.
      5. 
     
    
-    
    5. 
-    
  5. Apply the #widget  label.
    6. 
+  
+  
  6. Apply the #widget  label.
    7. 
 

 
Getting started with a simple example

 
Let's start by creating a widget that shows a message near the content
@@ -62,88 +60,80 @@ export default defineWidget({
   should appear underneath the content area.

 
Widget location (parent widget)

 
A widget can be placed in one of the following sections of the applications:

-

-  
-    -      -        -          -            -    
-    
-      
-        
-        
-        
-        
-      
-    
-    
-      
-        
-        
-        
-        
-      
-      
-        
-        
-        
-        
-      
-      
-        
-        
-        
-        
-      
-      
-        
-        
-        
-        
-      
-    
+






Value for parentWidget
-        DescriptionSample widgetSpecial requirements
left-pane
-        Appears within the same pane that holds the Note Tree.Same as above, with only a different parentWidget.None.
center-pane
-        In the content area. If a split is open, the widget will span all of the
-          splits.See example above.None.
note-detail-pane
-        
-          
In the content area, inside the note detail area. If a split is open,
-            the widget will be contained inside the split.

-          
This is ideal if the widget is note-specific.

-        		Note context aware widget
-        
-          
    
-            
  • The widget must export a class and not an
-              instance of the class (e.g. no new) because
-              it needs to be multiplied for each note, so that splits work correctly.
    • 
-            
  • Since the class is exported instead of an
-              instance, the parentWidget getter must be
-              static, otherwise the widget is ignored.
    • 
-          

-        
right-pane
-        In the Right Sidebar,
-          as a dedicated section.Right pane widget
-        
-          
    
-            
  • Although not mandatory, it's best to use a RightPanelWidget instead
-              of a BasicWidget or a NoteContextAwareWidget.
    • 
-          

-        

+  +    +      +        +          +  
+  
+    
+      
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+  






Value for parentWidget
+      DescriptionSample widgetSpecial requirements
left-pane
+      Appears within the same pane that holds the Note Tree.Same as above, with only a different parentWidget.None.
center-pane
+      In the content area. If a split is open, the widget will span all of the
+        splits.See example above.None.
note-detail-pane
+      
+        
In the content area, inside the note detail area. If a split is open,
+          the widget will be contained inside the split.

+        
This is ideal if the widget is note-specific.

+      		Note context aware widget
+      
+        
    
+          
  • The widget must export a class and not an instance of the class
+            (e.g. no new) because it needs to be multiplied for each note,
+            so that splits work correctly.
    • 
+          
  • Since the class is exported instead of an instance, the parentWidget getter
+            must be static, otherwise the widget is ignored.
    • 
+        

+      
right-pane
+      In the Right Sidebar,
+        as a dedicated section.Right pane widget
+      
+        
    
+          
  • Although not mandatory, it's best to use a RightPanelWidget instead
+            of a BasicWidget or a NoteContextAwareWidget.
    • 
+        

+      

   

-  

-  
To position the widget somewhere else, just change the value passed to
-    get parentWidget()for legacy widgets or the parent field
-      for Preact. Do note that some positions such as note-detail-pane and
-      right-panehave special requirements that need to be accounted for
-        (see the table above).

+  
To position the widget somewhere else, just change the value passed to get parentWidget() for
+    legacy widgets or the parent field for Preact. Do note that
+    some positions such as note-detail-pane and right-pane have
+    special requirements that need to be accounted for (see the table above).

   
Launch bar widgets

   
Launch bar widgets are similar to Custom widgets but are specific
     to the Launch Bar.
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html
index 70ab3f1ac..5386d0052 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html	
@@ -30,7 +30,7 @@ class NoteTitleWidget extends api.NoteContextAwareWidget {
 }
 
 module.exports = new NoteTitleWidget();
-

Preact widget (v0.101.0+)

import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
+
Preact widget (v0.101.0+)
import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
 
 export default defineLauncherWidget({
     render: () => {
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html
index 82c823548..1a2ce8779 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html	
@@ -2,9 +2,9 @@
   support for JSX.

 
Preact can be used for:

 
 
To get started, the first step is to enable JSX in the list of Code languages.
@@ -20,22 +20,23 @@
 
 
Import/exports

 
When using Preact with JSX, there is a special syntax which provides ES-like
-  imports. This import syntax makes way for a more intuitive that
-  doesn't make use of global objects and paves the way for better auto-completion
-  support that might be introduced in the future. 

+  imports. This import syntax makes way for
+  a more intuitive that doesn't make use of global objects and paves the
+  way for better auto-completion support that might be introduced in the
+  future. 

 
API imports

-
Instead of:
api.showMessage("Hello");

-
the JSX version looks like this:
import { showMessage } from "trilium:api";
+
Instead of:
api.showMessage("Hello");

+
the JSX version looks like this:
import { showMessage } from "trilium:api";
 showMessage("hello");

 
Preact API imports (hooks, components)

 
There's a new Script API dedicated
   to Preact, which provides shared components that are also used by Trilium
-  internally as well as hooks, for example.
import { useState } from "trilium:preact";
+  internally as well as hooks, for example.
import { useState } from "trilium:preact";
 const [ myState, setMyState ] = useState("Hi");

 
Exporting

 
JSX notes can export a component for use in Render Note or for Component libraries: 
export default function() {
+  href="#root/_help_Bqde6BvPo05g">Component libraries: 
export default function() {
     return (
         <>
             <p>Hello world.</p>
@@ -43,13 +44,15 @@ const [ myState, setMyState ] = useState("Hi");

     );
 }

 
Import/export are not required

-
These imports are syntactic sugar meant to replace the usage for the api global
-  object (see Script API). 

+
These imports are syntactic sugar meant to replace the usage for the
+  apiglobal object (see Script API). 

 
   
Under the hood

   
Unlike JavaScript, JSX requires pre-processing to turn it into JavaScript
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html
index 27aa57582..209519800 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html	
@@ -7,8 +7,8 @@
   also available to Custom Widgets and 
   Render Note.

-
To use these components, simply import them from trilium:preact:
import { ActionButton, Button, LinkButton } from "trilium:preact";

-
and then use them:
export default function MyRenderNote() {
+
To use these components, simply import them from trilium:preact:
import { ActionButton, Button, LinkButton } from "trilium:preact";

+
and then use them:
export default function MyRenderNote() {
     const onClick = () => showMessage("A button was pressed");
     
     return (
@@ -33,12 +33,12 @@
   to custom widgets and JSX render notes.

 
To use it, simply:

 
    
-  
  1. Create a render note.
    2. 
-  
  2. Create a child code note of JSX type with the content of this file: 
+  
  3. Create a render note.
    4. 
+  
  4. Create a child code note of JSX type with the content of this file: 
     Widget showcase
   
    5. 
-  
  5. Set the ~renderNote relation of the parent note to the child
-    note.
    6. 
-  
  6. Refresh the render note to see the results.
    7. 
+  
  7. Set the ~renderNote relation of the parent
+    note to the child note.
    8. 
+  
  8. Refresh the render note to see the results.
    9. 
 

\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html
index 2cdec3295..a148c29f2 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html	
@@ -1,4 +1,4 @@
-
Inline styles
<div style={{
+
Inline styles
<div style={{
     display: "flex",
     height: "53px",
     width: "fit-content",
@@ -9,4 +9,4 @@
 
Custom CSS file

 
Simply create a Custom app-wide CSS.
   Make sure the class names are unique enough to not intersect with other
-  UI elements, consider adding a prefix (e.g. x-mywidget-).

\ No newline at end of file
+  UI elements, consider adding a prefix (e.g. x-mywidget-).

\ No newline at end of file
diff --git a/docs/Developer Guide/Developer Guide/Documentation.md b/docs/Developer Guide/Developer Guide/Documentation.md
index 6e8ff9fe3..a7dbaff23 100644
--- a/docs/Developer Guide/Developer Guide/Documentation.md	
+++ b/docs/Developer Guide/Developer Guide/Documentation.md	
@@ -1,5 +1,5 @@
 # Documentation
-There are multiple types of documentation for Trilium:
+There are multiple types of documentation for Trilium:
 
 *   The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing F1.
 *   The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
diff --git a/docs/User Guide/User Guide.md b/docs/User Guide/User Guide.md
index d264728b9..3e5537135 100644
--- a/docs/User Guide/User Guide.md	
+++ b/docs/User Guide/User Guide.md	
@@ -1,5 +1,5 @@
 # User Guide
-cTrilium is an open-source solution for note-taking and organizing a personal knowledge base. Use it locally on your desktop, or sync it with your self-hosted server to keep your notes everywhere you go.
+Trilium is an open-source solution for note-taking and organizing a personal knowledge base. Use it locally on your desktop, or sync it with your self-hosted server to keep your notes everywhere you go.
 
 > [!TIP]
 > The same documentation can be accessed locally from within the Trilium Notes application by pressing F1.
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 c0c4e4eea..01e2e1c24 100644
--- a/docs/User Guide/User Guide/Note Types/Render Note.md	
+++ b/docs/User Guide/User Guide/Note Types/Render Note.md	
@@ -17,7 +17,7 @@ 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 
 ```
@@ -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 (
             <>
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md
index 392f5a734..dec4cfd3f 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md	
@@ -63,7 +63,7 @@ export default defineWidget({
 
 A widget can be placed in one of the following sections of the applications:
 
-
Value for parentWidgetDescriptionSample widgetSpecial requirements
left-paneAppears within the same pane that holds the Note Tree.Same as above, with only a different parentWidget.None.
center-paneIn the content area. If a split is open, the widget will span all of the splits.See example above.None.
note-detail-pane
In the content area, inside the note detail area. If a split is open, the widget will be contained inside the split.
This is ideal if the widget is note-specific.
Note context aware widget
  • The widget must export a class and not an instance of the class (e.g. no new) because it needs to be multiplied for each note, so that splits work correctly.
  • Since the class is exported instead of an instance, the parentWidget getter must be static, otherwise the widget is ignored.
right-paneIn the Right Sidebar, as a dedicated section.Right pane widget
  • Although not mandatory, it's best to use a RightPanelWidget instead of a BasicWidget or a NoteContextAwareWidget.

+
Value for parentWidgetDescriptionSample widgetSpecial requirements
left-paneAppears within the same pane that holds the Note Tree.Same as above, with only a different parentWidget.None.
center-paneIn the content area. If a split is open, the widget will span all of the splits.See example above.None.
note-detail-pane
In the content area, inside the note detail area. If a split is open, the widget will be contained inside the split.
This is ideal if the widget is note-specific.
Note context aware widget
  • The widget must export a class and not an instance of the class (e.g. no new) because it needs to be multiplied for each note, so that splits work correctly.
  • Since the class is exported instead of an instance, the parentWidget getter must be static, otherwise the widget is ignored.
right-paneIn the Right Sidebar, as a dedicated section.Right pane widget
  • Although not mandatory, it's best to use a RightPanelWidget instead of a BasicWidget or a NoteContextAwareWidget.

 
 To position the widget somewhere else, just change the value passed to `get parentWidget()` for legacy widgets or the `parent` field for Preact. Do note that some positions such as `note-detail-pane` and `right-pane` have special requirements that need to be accounted for (see the table above).
 
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md
index 78a69eb8a..c892e3365 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md	
@@ -35,7 +35,7 @@ module.exports = new NoteTitleWidget();
 
 ## Preact widget (v0.101.0+)
 
-```
+```jsx
 import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
 
 export default defineLauncherWidget({
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md
index db3811479..6f05765fc 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md	
@@ -19,13 +19,13 @@ When using Preact with JSX, there is a special syntax which provides ES-like imp
 
 Instead of:
 
-```
+```jsx
 api.showMessage("Hello");
 ```
 
 the JSX version looks like this:
 
-```
+```jsx
 import { showMessage } from "trilium:api";
 showMessage("hello");
 ```
@@ -34,7 +34,7 @@ showMessage("hello");
 
 There's a new Script API dedicated to Preact, which provides shared components that are also used by Trilium internally as well as hooks, for example.
 
-```
+```jsx
 import { useState } from "trilium:preact";
 const [ myState, setMyState ] = useState("Hi");
 ```
@@ -43,7 +43,7 @@ const [ myState, setMyState ] = useState("Hi");
 
 JSX notes can export a component for use in Render Note or for Component libraries: 
 
-```
+```jsx
 export default function() {
     return (
         <>
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md
index 8d3c86e4f..db05c9255 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md	
@@ -5,13 +5,13 @@ Trilium comes with its own set of Preact components, some of which are also avai
 
 To use these components, simply import them from `trilium:preact`:
 
-```
+```jsx
 import { ActionButton, Button, LinkButton } from "trilium:preact";
 ```
 
 and then use them:
 
-```
+```jsx
 export default function MyRenderNote() {
     const onClick = () => showMessage("A button was pressed");
     
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md
index bda9f195a..3b959261f 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md	
@@ -1,7 +1,7 @@
 # CSS
 ## Inline styles
 
-```
+```jsx