The Help plug-in provides the platform documentation and the Help viewer app. The app can be used to browse both platform and app-specific help topics.
Help is structured into a hierarchy of topics pointing to the documentation
files. One or more topics.json files define the navigation tree:
{
"topic": "RapidContext",
"source": "RapidContext Platform Documentation",
"children": [
{
"topic": "1. Introduction",
"url": "doc/1_introduction.html",
"children": [
{ "topic": "1.1 Overview", "url": "doc/1_introduction.html#overview" },
{ "topic": "1.2 Standard Setup", "url": "doc/1_introduction.html#setup" },
{ "topic": "1.3 Features", "url": "doc/1_introduction.html#features" },
{ "topic": "1.4 Concepts & Terminology", "url": "doc/1_introduction.html#concepts" }
]
},
...
]
}
The topic name may contain forward slashes (/
) to define
a hierarchy. If the specified parent topics do not exist, they will be
automatically created and merged into the navigation tree.
Documentation can be displayed in one of the following document formats:
<body> content is used (no additional scripts or
styling)..md
extension or a text/markdownMIME type. Automatically converted to HTML.
All formats support front-matter header for metadata. This can be used to specify a topic path (if not already specified elsewhere):
---
topic: Sub-Level/Topic Name
---
Documentation for apps can be provided in the app manifest resource list. Help documents are identified using the type as follows:
For example:
id: my-app
...
resources:
- url: app/my-app/introduction.md
topic: My App/Introduction
- ...
The Help app can be configured to display any set of documents by creating a
new app manifest that reuses the HelpApp source code and specifies
its own topics or documents:
id: my-help
name: My Help
description: A custom clone of the built-in help app.
className: HelpApp
resources:
- url: app/help/**
- url: my-help/icon.png
- url: my-help/topics.json
- url: my-help/introduction.md
Syntax highlighting is automatically applied to code blocks using the highlight.js library. In Markdown source files, use triple backticks with an optional language identifier:
```javascript
function hello() {
console.log("Hello, world!");
}
```
In HTML, use a <pre><code> block with an optional
language-* class:
<pre><code class="language-javascript">
function hello() {
console.log("Hello, world!");
}
</code></pre>
Diagrams and charts can be embedded using
Mermaid syntax. In Markdown
source files, use the mermaid language identifier for a code
block:
```mermaid
graph TD
A[Start] --> B{Is it working?}
B -- Yes --> C[Enjoy]
B -- No --> D[Debug]
```
In HTML, use a <div class="mermaid"> or a
<pre><code class="language-mermaid"> element to
contain the Mermaid diagram definition.