From a613980ea45c446958dc5fc1d00263daaf4d686d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 3 Jan 2026 22:56:23 +0200 Subject: [PATCH] docs(user): add missing jsx / HTML code blocks --- .../Themes/Icon Packs.html | 2 +- .../UI Elements/New Layout.html | 152 ++++++++---------- .../en/User Guide/User Guide/FAQ.html | 75 ++++----- .../User Guide/Note Types/File.html | 61 ++++--- .../User Guide/Note Types/File/PDFs.html | 97 +++++------ .../User Guide/Note Types/Render Note.html | 43 +++-- .../Scripting/Frontend Basics/Preact.html | 23 ++- .../Preact/Built-in components.html | 12 +- .../Scripting/Frontend Basics/Preact/CSS.html | 2 +- .../Preact/Component libraries.html | 23 +-- .../Frontend Basics/Preact/Hooks.html | 30 ++-- .../Developer Guide/Documentation.md | 2 +- docs/User Guide/User Guide/FAQ.md | 4 +- .../User Guide/Note Types/Render Note.md | 4 +- .../Preact/Component libraries.md | 10 +- .../Scripting/Frontend Basics/Preact/Hooks.md | 4 +- 16 files changed, 260 insertions(+), 284 deletions(-) diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html index 62c6d7dfa..c9a2f2230 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html @@ -3,7 +3,7 @@ scratch (see below) or imported from a ZIP file from a third-party developer.

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";
@@ -44,15 +43,13 @@ const [ myState, setMyState ] = useState("Hi");
); }

Import/export are not required

-

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

+

These imports are syntactic sugar meant to replace the usage for the api global + 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 209519800..7993c3517 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,7 +7,7 @@ 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";
+

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");
     
@@ -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 a148c29f2..6f623f07b 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	
@@ -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/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html
index 08c797737..15dc75646 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html	
@@ -6,21 +6,21 @@
 
Here's an example child hierarchy using Render Note: 

 
    
-  
  • My render note
+  
  • My render note
     
    Note type: Render Note
-    
    Link ~renderNote to the child note (Render note with subcomponents)
+    
    Link ~renderNote to the child note (Render note with subcomponents)
     
      
-      
    • 
+      
    • 
         
      Render note with subcomponents
-          
      Type: JSX
      export default function() {
+          
      Type: JSX
      export default function() {
     return (
         <MyComponent />        
     );
 }
      
         
        
-          
      • 
+          
      • 
             
        MyComponent
-              
        Type: Code / JSX
        export default function MyComponent() {
+              
        Type: Code / JSX
        export default function MyComponent() {
     return <p>Hi</p>;
 }
        
           
        • 
@@ -30,16 +30,17 @@
   
 
      
 
      Multiple components per note
      
-
      To export multiple components, use the export keyword next
-  to each of the function components.
      
-
      Here's how a sub-note called MyComponents would look like:
      export function MyFirstComponent() {
+
      To export multiple components, use the export keyword
+  next to each of the function components.
      
+
      Here's how a sub-note called MyComponents would
+  look like:
      export function MyFirstComponent() {
     return <p>First</p>;
 }
 
 export function MySecondComponent() {
     return <p>Bar</p>;
 }
      
-
      Then in its parent note:
      const { MyFirstComponent, MySecondComponent } = MyComponents;
+
      Then in its parent note:
      const { MyFirstComponent, MySecondComponent } = MyComponents;
 
 export default function() {
     return (
@@ -50,5 +51,5 @@ export default function() {
     );
 }
      
 
      Alternatively, it's also possible to use the components directly without
-  assigning them to a const first:
      <MyComponents.MyFirstComponent />
+  assigning them to a const first:
      <MyComponents.MyFirstComponent />
 <MyComponents.MySecondComponent />
      
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Hooks.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Hooks.html
index 45255b1d7..dc6357f27 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Hooks.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Hooks.html	
@@ -1,14 +1,14 @@
 
      Standard Preact hooks
      
-
      All standard Preact hooks are available as an import in trilium:api.
      
-
      For example:
      import { useState } from "trilium:preact";
+
      All standard Preact hooks are available as an import in trilium:api.
      
+
      For example:
      import { useState } from "trilium:preact";
 const [ myState, setMyState ] = useState("Hi");
      
 
      Custom hooks
      
 
      Trilium comes with a large set of custom hooks for Preact, all of which
   are also available to custom widgets and Render Note.
      
-
      useNoteContext
      
+
      useNoteContext
      
 
      As a replacement to Note context aware widget,
-  Preact exposes the current note context in the useNoteContext hook:
      import { defineWidget, useNoteContext, useNoteProperty } from "trilium:preact";
+  Preact exposes the current note context in the useNoteContext hook:
      import { defineWidget, useNoteContext, useNoteProperty } from "trilium:preact";
 
 export default defineWidget({    
     parent: "note-detail-pane",
@@ -21,13 +21,15 @@ export default defineWidget({
 });
      
 
      Note that the custom widget must be inside the content area (so note detail
   widget) for this to work properly, especially when dealing with splits.
      
-
      useActiveNoteContext
      
-
      useActiveNoteContext is an alternative to useNoteContext which
-  works even if the widget is not within the note detail section and it automatically
-  switches the note context as the user is navigating around between tabs
-  and splits.
      
-
      useNoteProperty
      
-
      This hook allows “listening” for changes to a particular property of a FNote,
-  such as the title or type of a note. The benefit
-  from using the hook is that it actually reacts to changes, for example
-  if the note title or type is changed.
      
\ No newline at end of file
+
      useActiveNoteContext
      
+
      useActiveNoteContext is an alternative
+  to useNoteContext which works even if the
+  widget is not within the note detail section and it automatically switches
+  the note context as the user is navigating around between tabs and splits.
      
+
      useNoteProperty
      
+
      This hook allows “listening” for changes to a particular property of a
+  FNote, such as the title or
+    typeof a note. The benefit from using the hook is that it actually
+      reacts to changes, for example if the note title or type is changed.
      
\ 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 ec75c8e75..ec8b903e0 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/FAQ.md b/docs/User Guide/User Guide/FAQ.md
index f98ba3815..e97cbecc6 100644
--- a/docs/User Guide/User Guide/FAQ.md	
+++ b/docs/User Guide/User Guide/FAQ.md	
@@ -32,7 +32,7 @@ Common request is to allow multiple users collaborate, share notes etc. So far I
 
 This is normally not supported - one Trilium process can open only a single instance of a [database](Advanced%20Usage/Database.md). However, you can run two Trilium processes (from one installation), each connected to a separate document. To achieve this, you need to set a location for the [data directory](Installation%20%26%20Setup/Data%20directory.md) in the `TRILIUM_DATA_DIR` environment variable and separate port on `TRILIUM_PORT` environment variable. How to do that depends on the platform, in Unix-based systems you can achieve that by running command such as this:
 
-```
+```sh
 TRILIUM_DATA_DIR=/home/me/path/to/data/dir TRILIUM_PORT=12345 trilium 
 ```
 
@@ -44,7 +44,7 @@ No.
 
 These general purpose sync apps are not suitable to sync database files which are open and being worked on by another application. The result is that they will corrupt the database file, resulting in data loss and this message in the Trilium logs:
 
-```
+```plain
 SqliteError: database disk image is malformed
 ```
 
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 01e2e1c24..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,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/Preact/Component libraries.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.md
index 150858815..65807e0fb 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.md	
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.md	
@@ -13,7 +13,7 @@ Here's an example child hierarchy using Note context aware widget, Preact exposes the current note context in the `useNoteContext` hook:
 
-```
+```jsx
 import { defineWidget, useNoteContext, useNoteProperty } from "trilium:preact";
 
 export default defineWidget({