Marked Test

node-red custom marked syntax for node help

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
<textarea id="markdown-input" rows="16" style="width: 100%;">
Send data via a local serial port.  
### Inputs
:   payload     (string | buffer) :  data to be sent via the serial port  
:  *baudrate*   (string)          :  baudrate of the serial port (optional)  

### Outputs

1. Standard output  
:   payload   (string | buffer) :  the standard output of the command.  
:   rc        (object)          :  exec mode only, a copy of the return code object (also available on port 3)  

2. Standard Error  
:   payload   (string)          :  the standard error of the command.  
:   rc        (object)          :  exec mode only, a copy of the return code object (also available on port 3)  


### Details
|msg property | description                                                 |
|------------:|:------------------------------------------------------------|
| stopbits    | set `msg.stopbits` to change stop bits                      |
| parity      | set `msg.parity` to change parity                           |
| options     | a JSON object containing extra options (see example below)  |

```js
msg.options = {
  splitChar: '\n',
  timeout: 3000,
}
```
</textarea>
<button id="test2" onclick="disableCustomisations()">
  Disable
</button>
<button id="test1" onclick="enableCustomisations()">
  Enable
</button>

<hr>
<div class="red-ui-editor">
  <div class="red-ui-help">
    <div id="markdown-output"></div>
</div>

CSS

.red-ui-editor pre,
.red-ui-editor-dialog pre,
.red-ui-menu pre,
.red-ui-popover pre,
.red-ui-typedInput-options pre,
.red-ui-icon-picker pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.red-ui-editor pre,
.red-ui-editor-dialog pre,
.red-ui-menu pre,
.red-ui-popover pre,
.red-ui-typedInput-options pre,
.red-ui-icon-picker pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 4px;
}


p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.red-ui-help a {
  color: #08c;
  text-decoration: none;
}

.red-ui-help {
  font-size: 14px;
  line-height: 1.5em;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

div {
  display: block;
}

dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.red-ui-help dl.message-properties {
  border: 1px solid #ddd;
  border-radius: 2px;
  margin: 5px auto 10px;
}


.red-ui-help dl.message-properties>dt .property-type {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  color: #555;
  font-style: italic;
  font-size: 11px;
  float: right;
}


.red-ui-help dl.message-properties>dt {
  padding: 0px 3px 2px 3px;
  font-family: Menlo, Consolas, "DejaVu Sans Mono", Courier, monospace;
  font-weight: normal;
  margin: 5px 3px 1px;
  color: #ad1625;
  white-space: nowrap;
}

.red-ui-help dl.message-properties>dt.optional {
  font-style: italic;
}

.red-ui-help dl.message-properties>dd {
  margin: 0px 8px 2px 13px;
  vertical-align: top;
}



.red-ui-editor ul, .red-ui-editor ol, .red-ui-editor-dialog ul,...

JavaScript

let enable = true;
const descriptionList = {
  name: 'descriptionList',
  level: 'block',                                     // Is this a block-level or inline-level tokenizer?
  start(src) { 
    if(!enable) return null 
    return src.match(/:[^:\n]/)?.index; // Hint to Marked.js to stop and check for a match
  }, 
  tokenizer(src, tokens) {
  	if(!enable) return null;
    const rule = /^(?::[^:\n]+:[^:\n]*(?:\n|$))+/;    // Regex for the complete token
    const match = rule.exec(src);
    if (match) {
      return {                                        // Token to generate
        type: 'descriptionList',                      // Should match "name" above
        raw: match[0],                                // Text to consume from the source
        text: match[0].trim(),                        // Additional custom properties
        tokens: this.inlineTokens(match[0].trim())    // inlineTokens to process **bold**, *italics*, etc.
      };
    }
  },
  renderer(token) {
    return `<dl class="message-properties">${this.parseInline(token.tokens)}\n</dl>`; // parseInline to turn child tokens into HTML
  }
};

const description = {
  name: 'description',
  level: 'inline',                                 // Is this a block-level or inline-level tokenizer?
  start(src) {
  	if(!enable) return null 
  	src.match(/:/)?.index; // Hint to Marked.js to stop and check for a match
  },    
  tokenizer(src, tokens) {
  	if(!enable) return null;
    const rule = /^:([^:\n]+)\(([^:\n]+)\).*?:([^:\n]*)(?:\n|$)/;  // Regex for the complete token
    const match = rule.exec(src);
    if (match) {
      return {                                     // Token to generate
        type: 'description',                       // Should match "name" above
        raw: match[0],                             // Text to consume from the source
        dt: this.inlineTokens(match[1].trim()),    // Additional custom properties
        types: this.inlineTokens(match[2].trim()),
        dd:...