### Example: Manually Installing 'mine' npm Package Version 2.5.2 (Shell)

Source: https://github.com/purocean/yn/blob/develop/help/DEVELOP.md

Provides a concrete example of manually installing a package (`mine`) at a specific version (`2.5.2`) using npm. This clarifies the syntax shown in the previous general command.

```shell
npm install mine@2.5.2
```

--------------------------------

### Installing Project Dependencies with Yarn (Shell)

Source: https://github.com/purocean/yn/blob/develop/help/DEVELOP.md

Installs all project dependencies listed in the `package.json` file using the Yarn package manager. This is the standard step after cloning the repository to get all required libraries for the project to run.

```shell
yarn install
```

--------------------------------

### Manually Installing Specific npm Package Version (Shell)

Source: https://github.com/purocean/yn/blob/develop/help/DEVELOP.md

Demonstrates the command used to install a particular package at a specific version manually using npm. This is a workaround suggested when the bulk `yarn install` command fails for certain dependencies, allowing them to be installed one by one.

```shell
npm install package@version
```

--------------------------------

### Starting Development Server with npm (Shell)

Source: https://github.com/purocean/yn/blob/develop/help/DEVELOP.md

Executes the npm script named `dev` defined in the project's `package.json`. This command typically starts the project in development mode, often with features like hot-reloading or debugging capabilities.

```shell
npm run dev
```

--------------------------------

### Installing Latest Stable/Latest Node Version with 'n' (Shell)

Source: https://github.com/purocean/yn/blob/develop/help/DEVELOP.md

Uses the 'n' tool to install and switch to either the latest stable release (`n stable`) or the absolute latest release (`n latest`) of Node.js. This provides options for developers who need the most recent features or the latest stable version.

```shell
n stable | n latest
```

--------------------------------

### Installing Node Version Manager 'n' (Shell)

Source: https://github.com/purocean/yn/blob/develop/help/DEVELOP.md

Installs the 'n' Node.js version management tool globally using npm. This tool allows developers to easily install and switch between different Node.js versions, which is important for projects like 'yn' that have specific version requirements.

```shell
npm install -g n
```

--------------------------------

### Installing/Switching to Specific Node Version with 'n' (Shell)

Source: https://github.com/purocean/yn/blob/develop/help/DEVELOP.md

Installs Node.js version 16.0.0 if it's not already present and then sets it as the active Node.js version using the 'n' tool. This command is used to ensure the development environment meets the project's minimum or required Node.js version.

```shell
n v16.0.0
```

--------------------------------

### Checking Node.js Version (Shell)

Source: https://github.com/purocean/yn/blob/develop/help/DEVELOP.md

Displays the currently installed version of Node.js in the terminal. Useful for verifying a successful Node.js installation or checking which version is active when using a version manager.

```shell
node –v
```

--------------------------------

### Installing electron-rebuild Dev Dependency with npm (Shell)

Source: https://github.com/purocean/yn/blob/develop/help/DEVELOP.md

Installs the `electron-rebuild` package as a development dependency. This tool is essential for rebuilding native Node.js modules (like `node-pty`) against the specific version of Electron used by the project, ensuring compatibility.

```shell
npm install --save-dev electron-rebuild
```

--------------------------------

### Running C Code

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Demonstrates compiling and running C code. Requires GCC and a C environment installed. The first line must be `// --run--` followed by the compilation and execution command.

```c
// --run-- gcc $tmpFile.c -o $tmpFile.out && $tmpFile.out

#include <stdio.h>

int main () {
    printf("Hello, World!");
    return 0;
}
```

--------------------------------

### Running Python Code

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Demonstrates running Python code from the document. Requires a Python environment installed and configured. The code block must start with `# --run--`.

```python
# --run--
print('HELLOWORLD')
```

--------------------------------

### Running NodeJS Code

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Provides an example of running a simple NodeJS script directly within Yank Note using the `--run--` marker. Requires a NodeJS environment to be installed on the system.

```nodejs
// --run--
console.log('HELLOWORLD')
```

--------------------------------

### Running PHP Code

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows how to execute PHP code using the `--run--` marker. This feature requires a PHP environment to be installed on the system for the script to run.

```php
// --run--
echo 'HELLOWORLD!';
```

--------------------------------

### Running Java Code

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Shows how to compile and run Java code. Requires a Java Development Kit (JDK) installed. The first line must be `// --run--` followed by the execution command.

```java
// --run-- java $tmpFile.java

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```

--------------------------------

### Running Node.js Code

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Provides an example of executing Node.js code directly from a markdown document. Requires Node.js environment installed. The code block must start with `// --run--`.

```node
// --run--
console.log('HELLOWORLD')
```

--------------------------------

### Running C Code (GCC)

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Demonstrates compiling and running a C program using the `--run-- gcc $tmpFile.c -o $tmpFile.out && $tmpFile.out` command. This requires GCC to be installed and available in the system's PATH.

```c
// --run-- gcc $tmpFile.c -o $tmpFile.out && $tmpFile.out

#include <stdio.h>

int main () {
    printf("Hello, World!");
    return 0;
}
```

--------------------------------

### Listing Available Context Modules (JavaScript)

Source: https://github.com/purocean/yn/blob/develop/help/PLUGIN.md

Shows how to print the keys (module names) available on the global `ctx` object to the console. This helps developers discover the capabilities accessible within the plugin or RunCode environment. Uses `Object.keys` and `console.log`.

```javascript
// --run-- --no-worker--
console.log(Object.keys(ctx).join('\n'))
```

--------------------------------

### Running PHP Code

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Shows how to execute PHP code within the document. Requires a PHP environment installed and configured. The code block must start with `// --run--`.

```php
// --run--
echo 'HELLOWORLD!';
```

--------------------------------

### Running Java Code

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Illustrates compiling and running a Java program using the `--run-- java $tmpFile.java` command. This requires a Java Development Kit (JDK) to be installed and available in the system's PATH.

```java
// --run-- java $tmpFile.java

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }arg0
}
```

--------------------------------

### Running Shell Commands

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Illustrates executing basic shell commands directly from the document. Requires a compatible shell environment. The code block must start with `# --run--`.

```shell
# --run--
date
```

--------------------------------

### Registering a Basic Yank Note Plugin (JavaScript)

Source: https://github.com/purocean/yn/blob/develop/help/PLUGIN.md

Explains how to register a plugin using `window.registerPlugin`. It shows how to add a menu item to the status bar using `ctx.statusBar.tapMenus` and display a toast message on click using `ctx.ui.useToast().show`. Requires creating a JS file in the plugins directory.

```javascript
// register a plug-in
window.registerPlugin({
    name: 'plugin-hello',
    register: ctx => {
        // add menu on status bar
        ctx.statusBar.tapMenus(menus => {
            menus['plugin-hello'] = {
                id: 'plugin-hello',
                position: 'left',
                title: 'HELLO',
                onClick: () => {
                    ctx.ui.useToast().show('info', 'HELLO WORLD!');
                }
            }
        })
    }
});
```

--------------------------------

### Running npm Script to Rebuild node-pty for Electron (Shell)

Source: https://github.com/purocean/yn/blob/develop/help/DEVELOP.md

Executes an npm script named `rebuild-pty` defined in the project's `package.json` file. This script is specifically configured to use `electron-rebuild` to rebuild the `node-pty` module, resolving potential compatibility issues with Electron.

```shell
npm run rebuild-pty
```

--------------------------------

### Running Batch Commands

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Shows how to execute Windows Batch commands directly from the document. Requires a Windows environment. The code block must start with `REM --run--`.

```bat
REM --run--
@echo HELLOWORLD
```

--------------------------------

### Executing Code via RunCode Feature (JavaScript)

Source: https://github.com/purocean/yn/blob/develop/help/PLUGIN.md

Illustrates how to use the `ctx` object within the Yank Note RunCode feature. It shows displaying a toast message using `ctx.ui.useToast().show` and logging to the console using `console.log`. This demonstrates quick script execution without creating a full plugin.

```javascript
// --run-- --no-worker--
ctx.ui.useToast().show("info", "HELLOWORLD!")
console.log("hello world!")
```

--------------------------------

### Embedding HTML Applet (Hash Tool)

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Explains how to embed interactive HTML tools (applets) within the document. The HTML block must start with `<!-- --applet-- [Title] -->`. This example provides a simple tool for calculating MD5, SHA1, and SHA256 hashes using `ctx.lib.cryptojs`.

```html
<!-- --applet-- Hash -->

<script>
function run (type) {
    const input = document.getElementById('input')
    const output = document.getElementById('output')
    output.value = ''

    switch (type) {
        case 'md5':
            output.value = ctx.lib.cryptojs.MD5(input.value).toString().toLowerCase()
            break
        case 'sha1':
            output.value = ctx.lib.cryptojs.SHA1(input.value).toString().toLowerCase()
            break
        case 'sha256':
            output.value = ctx.lib.cryptojs.SHA256(input.value).toString().toLowerCase()
            break
    }
    output.focus()
    output.select()
}
</script>

<div>
    输入
    <textarea id="input" style="display: block; width: 100%"></textarea>
    <button onclick="run('md5')">MD5</button>
    <button onclick="run('sha1')">SHA1</button>
    <button onclick="run('sha256')">SHA256</button>
    <textarea id="output" style="display: block; width: 100%"></textarea>
    <button onclick="document.getElementById('input').value = ''; document.getElementById('output').value = ''">清空</button>
    <button onclick="var x = document.getElementById('output'); x.value = x.value.toUpperCase()">结果大写</button>
</div>
```

--------------------------------

### Generating Basic PlantUML Diagram

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

This snippet provides a minimal example of PlantUML syntax to generate a simple directed graph. It shows the basic structure with `@startuml` and `@enduml` tags and a single directed edge.

```plantuml
@startuml
a -> b
@enduml
```

--------------------------------

### Running Python Code

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Demonstrates running Python code within Yank Note using the `--run--` marker. A Python interpreter must be installed on the system for execution.

```python
# --run--
print('HELLOWORLD')
```

--------------------------------

### Generating Mermaid Gantt Chart

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

This snippet provides an example of creating a Gantt chart in Mermaid to visualize project schedules. It defines sections, tasks with completion status, duration, and dependencies.

```mermaid
gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
```

--------------------------------

### Rendering Diagrams with PlantUML

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Describes how to embed PlantUML diagrams in markdown. Requires Java and Graphviz installed for local endpoint rendering. The code block must be wrapped in `@startuml` and `@enduml` tags.

```plantuml
@startuml
a -> b
@enduml
```

--------------------------------

### Embedding Interactive HTML Applet with Title

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Provides an example of embedding an interactive HTML snippet as an 'applet' using the `<!-- --applet-- Title -->` marker. The content within the block is rendered as HTML, potentially including scripts that can interact with the `ctx` object if in the main thread context.

```html
<!-- --applet-- Hash -->

<script>
function run (type) {
    const input = document.getElementById('input')
    const output = document.getElementById('output')
    output.value = ''

    switch (type) {
        case 'md5':
            output.value = ctx.lib.cryptojs.MD5(input.value).toString().toLowerCase()
            break
        case 'sha1':
            output.value = ctx.lib.cryptojs.SHA1(input.value).toString().toLowerCase()
            break
        case 'sha256':
            output.value = ctx.lib.cryptojs.SHA256(input.value).toString().toLowerCase()
            break
    }
    output.focus()
    output.select()
}
</script>

<div>
    Input
    <textarea id="input" style="display: block; width: 100%"></textarea>
    <button onclick="run('md5')">MD5</button>
    <button onclick="run('sha1')">SHA1</button>
    <button onclick="run('sha256')">SHA256</button>
    <textarea id="output" style="display: block; width: 100%"></textarea>
    <button onclick="document.getElementById('input').value = ''; document.getElementById('output').value = ''">Clear</button>
    <button onclick="var x = document.getElementById('output'); x.value = x.value.toUpperCase()">Uppercase</button>
</div>
```

--------------------------------

### Creating a Widget Button (HTML/JavaScript)

Source: https://github.com/purocean/yn/blob/develop/help/PLUGIN.md

Shows how to create a simple HTML button within a Yank Note Widget (`<!-- --applet-- -->`). The button's `onclick` attribute directly calls a method on the `ctx` object to display a toast message, demonstrating how widgets can interact with the editor's context.

```html
<!-- --applet-- -->
<button onclick="ctx.ui.useToast().show(`info`, `HELLOWORLD!`)">HELLO</button>
```

--------------------------------

### Embedding HTML Applet (Simple Button)

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Shows a basic example of embedding an HTML applet without a title (`<!-- --applet-- -->`). Applets can include JavaScript that interacts with the editor API via the global `ctx` object.

```html
<!-- --applet--  -->
<button onclick="ctx.ui.useToast().show(`info`, `HELLOWORLD!`)">HELLO</button>
```

--------------------------------

### Executing Complex Multi-line JavaScript | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows a more complex example using a multi-line Immediately Invoked Function Expression (IIFE) in JavaScript to generate structured text dynamically. This snippet generates a 9x9 multiplication table.

```JavaScript
(function nine (num) {
    let res = ''
    for (let i = 1; i <= num; i++) {
        let str = '';
        for (let k = 1; k <= num; k++) {
            if (i >= k) {
                str += k + 'x' + i + '=' + i*k + ' ';
            }
        }
        res = res + str + '\n'
    }
    return res
})(9)
```

--------------------------------

### Accessing Document Info ($doc) | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Illustrates accessing properties of the `$doc` object to get information about the current document being processed, specifically retrieving the base filename without the extension using `$doc.basename`.

```JavaScript
$doc.basename
```

--------------------------------

### Using Libraries via $ctx.lib | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Demonstrates how to access and use external JavaScript libraries (like `dayjs` shown here) that are made available through the `$ctx.lib` object to perform tasks such as formatting the current date and time.

```JavaScript
$ctx.lib.dayjs().format('YYYY-MM-DD HH:mm')
```

--------------------------------

### Rendering LaTeX Equations Block

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

This snippet demonstrates rendering a block of LaTeX mathematical equations using KaTeX. It shows how to format multiple equations using the `array` environment within display math delimiters.

```latex
\begin{array}{c}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{array}
```

--------------------------------

### Running Shell Script

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Illustrates executing a shell command or script using the `--run--` marker. Requires a compatible shell environment (e.g., bash) on the system.

```bash
# --run--
date
```

--------------------------------

### Running JavaScript for HTML Output

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Illustrates executing JavaScript to generate HTML output by adding the `--output-html--` parameter. The script's console output will be rendered as HTML.

```javascript
// --run-- --output-html--
console.log(`output <i>HTML</i>`)
```

--------------------------------

### Running Windows Batch Script

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows how to execute a Windows Batch script using the `--run--` marker. This is intended for use on Windows systems with the `bat` interpreter available.

```bat
REM --run--
@echo HELLOWORLD
```

--------------------------------

### Post-process Output with $afterMacro | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Demonstrates using the `$afterMacro` helper function to register a callback that receives the entire macro-processed document source (`src`) and can perform further text replacements or modifications before final rendering.

```JavaScript
$afterMacro(src => src.replace(/X{4,}/g, 'YYYYY'))
```

--------------------------------

### Accessing Editor Context ($ctx) | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows how to access properties and methods available on the `$ctx` object, which provides access to the editor's context, specifically retrieving the application version using `$ctx.version`.

```JavaScript
$ctx.version
```

--------------------------------

### Define and Use Function with $export | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows how to use the `$export` helper function to define a custom function (`format`) that takes arguments and then invoking that function within another macro expression to produce formatted output.

```JavaScript
$export('format', (a, b) => `${a}, ${b}!`)
```

```JavaScript
format('HELLO', 'WORLD')
```

--------------------------------

### Including Document Fragments with $include | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Demonstrates using the `$include` helper function to insert the entire content of another markdown file (`./_FRAGMENT.md`) into the current document during the rendering process, with an optional boolean parameter to trim leading/trailing whitespace.

```JavaScript
$include('./_FRAGMENT.md', true)
```

--------------------------------

### Generating Mermaid Pie Chart

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

This snippet demonstrates how to create a basic pie chart using Mermaid syntax. It defines categories and their corresponding numerical values.

```mermaid
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```

--------------------------------

### Running JavaScript in Main Thread (ctx access)

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows how to run JavaScript directly in the main thread using `--run-- --no-worker--`. This allows access to the editor's API via the `ctx` object, enabling interactions like showing toast notifications.

```javascript
// --run-- --no-worker--
await new Promise(r => setTimeout(r, 500))
ctx.ui.useToast().show("info", "HELLOWORLD!")
console.log('HELLOWORLD')
```

--------------------------------

### Combining Async Operations with Await/Fetch | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Demonstrates how to combine multiple asynchronous operations within a single macro expression, using `await` to wait for both a delay (`ctx.utils.sleep`) and a `fetch` request to complete before the macro finishes execution and renders the result.

```JavaScript
await ctx.utils.sleep(1000), fetch('https://wttr.in?0AT').then(r => r.text())
```

--------------------------------

### Embedding Simple HTML Applet Without Title

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows how to embed a basic HTML snippet as an 'applet' without a title using the `<!-- --applet-- -->` marker. The content is rendered directly as HTML.

```html
<!-- --applet--  -->
<button onclick="ctx.ui.useToast().show(`info`, `HELLOWORLD!`)">HELLO</button>
```

--------------------------------

### Performing Asynchronous Fetch in Macro | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Illustrates how to perform an asynchronous operation like fetching data from a URL (`https://ifconfig.me/ip`) using the browser's `fetch` API directly within a macro expression and output the retrieved text content.

```JavaScript
fetch('https://ifconfig.me/ip').then(r => r.text())
```

--------------------------------

### Generating Mermaid State Diagram

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

This snippet shows the syntax for a simple state diagram in Mermaid. It defines different states and the transitions between them, including entry and exit points.

```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

--------------------------------

### Rendering Diagrams with Mermaid

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Explains how to embed various types of diagrams like flowcharts, sequence diagrams, gantt charts, state diagrams, pies, and journeys using the Mermaid syntax within a markdown code block. These diagrams are rendered automatically.

```mermaid
graph LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```

```mermaid
gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
```

```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

```mermaid
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
```

--------------------------------

### Generating Mermaid Graph Diagram

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

This snippet demonstrates the basic syntax for creating a flow chart using the Mermaid diagramming tool. It shows nodes, directed edges with labels, and decision points.

```mermaid
graph LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

--------------------------------

### Running JavaScript Code (Output HTML)

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Illustrates executing JavaScript code with the `--output-html--` flag included after `// --run--`. This causes the standard output of the code block to be rendered as HTML.

```js
// --run-- --output-html--
console.log(`output <i>HTML</i>`)
```

--------------------------------

### Generating Sequential Numbers with $seq | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows how to use the `$seq` helper function with a specified label (`Figure-` or `Table-`) to generate a sequence of numbers that automatically increment each time the same label is used within the document, useful for numbering elements like figures or tables.

```JavaScript
$seq`Figure-`
```

--------------------------------

### Generating Mermaid Sequence Diagram

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

This snippet illustrates the syntax for a Mermaid sequence diagram, depicting the interaction flow between different participants (Alice, John, Bob) with messages, loops, and notes.

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```

--------------------------------

### Running JavaScript in Web Worker

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Demonstrates executing a simple JavaScript snippet within a Web Worker environment in Yank Note. The `--run--` marker on the first line triggers execution. This environment is isolated and suitable for basic scripts that don't require direct editor interaction.

```javascript
// --run--
await new Promise(r => setTimeout(r, 500))
console.log('HELLOWORLD')
```

--------------------------------

### Generating Mermaid Journey Diagram

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

This snippet illustrates the creation of a simple journey diagram in Mermaid, often used to map user or system flows. It defines sections, steps, and participants.

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
```

--------------------------------

### Running JavaScript Code (Main Thread)

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Demonstrates running JavaScript code in the main thread using `// --run-- --no-worker--`. This allows the code to interact with the editor's API via the `ctx` object.

```js
// --run-- --no-worker--
await new Promise(r => setTimeout(r, 500))
ctx.ui.useToast().show("info", "HELLOWORLD!")
console.log('HELLOWORLD')
```

--------------------------------

### Rendering ECharts Graph from JS Configuration

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Demonstrates how to render an ECharts graph directly from a JavaScript configuration object using the `--echarts--` marker. The script should define an `option` object according to ECharts specifications and call `chart.setOption(option)`. The `chart` object is provided by the environment.

```javascript
// --echarts--

const option = {
    // backgroundColor: '#2c343c',

    title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#888'
        }
    },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:'referer',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'Direct visit'},
                {value:310, name:'Email marketing'},
                {value:274, name:'Affiliate advertising'},
                {value:235, name:'Video advertisement'},
                {value:400, name:'Search engine'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: '#888'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: '#888'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
}

chart.setOption(option, true)
```

--------------------------------

### Define and Use Variable with $export | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Illustrates using the `$export` helper function to define a variable (`testVar`) within one macro expression and then immediately accessing and rendering its value (`Test`) in a subsequent macro in the same document.

```JavaScript
$export('testVar', 'Test')
```

```JavaScript
testVar
```

--------------------------------

### Running JavaScript Code (Worker)

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES_ZH-CN.md

Shows how to execute JavaScript code within a markdown document. The code runs in a Web Worker by default for isolation. The code block must include `// --run--` on the first line.

```js
// --run--
await new Promise(r => setTimeout(r, 500))
console.log('HELLOWORLD')
```

--------------------------------

### Accessing Variables from Included Documents | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows that variables defined (e.g., via Front Matter) in a document included using the `$include` helper can be accessed and used directly within macro expressions in the current document.

```JavaScript
customVarFromOtherDoc
```

--------------------------------

### Accessing Variable in Macro | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows how to reference a simple variable like `headingNumber` defined elsewhere (e.g., Front Matter) within a macro expression to output its value directly into the document.

```JavaScript
headingNumber
```

--------------------------------

### Rendering LaTeX Equations Inline in Table

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

This snippet shows how to include inline LaTeX mathematical expressions within a markdown table cell. Each equation is enclosed in inline math delimiters (`$`).

```latex
$\\nabla \\cdot \\vec{\\mathbf{B}}  = 0$
```

```latex
$\\nabla \\times \\vec{\\mathbf{E}}\, +\, \\frac1c\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t}  = \\vec{\\mathbf{0}}$
```

```latex
$\\nabla \\times \\vec{\\mathbf{B}} -\, \\frac1c\, \\frac{\\partial\\vec{\\mathbf{E}}}{\\partial t} = \\frac{4\\pi}{c}\\vec{\\mathbf{j}}    \\nabla \\cdot \\vec{\\mathbf{E}} = 4 \\pi \\rho$
```

--------------------------------

### Performing Arithmetic in Macro | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Shows that standard JavaScript arithmetic expressions can be directly evaluated within a macro expression. The result of the calculation is then output into the document.

```JavaScript
(1 + 2) / 2
```

--------------------------------

### Rendering Literal Strings with Escaped Characters | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Illustrates how to include literal characters that are part of the macro syntax (`[=`, `=]`) within a macro expression by escaping them using a backslash (`\=`, `\]`) inside a standard JavaScript string.

```JavaScript
'[\= =\]'
```

--------------------------------

### Accessing Another Variable in Macro | JavaScript

Source: https://github.com/purocean/yn/blob/develop/help/FEATURES.md

Demonstrates accessing a variable named `customVar` within a macro expression. The value of the variable is evaluated and rendered as text in the document.

```JavaScript
customVar
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.