R1021: Markdown Samples (for experts)

 

These are details of the Markdown notation that can be used in Questetra. For more information about Markdown and basic Markdown notation, see "R1020: Markdown Sample (for beginners)".

Functions that can use Markdown for editing/displaying

• Data Item [String-type (Markdown)]
• [Description] of data items
• [Work Manual] for workflow apps

List of Notations

• Separators
• Headings
• Code Block
• HTML Block
• Paragraph
• Table
• Quotation
• List
• Escape
• Character Reference Notation
• Inline Code
• Text Styles
• Links
• Image Display
• Inline HTML
• Line Break

Separators

Separators

Any line with three or more of */-/_ in a line will be displayed as a separator.*

Markdown Sample

***
---
___

Edit/Preview Screen

Headings

Headings

You can create headings using either the ATX style, which uses # at the start of the line, or the Setext style, which uses = or - immediately after a line.

ATX Style

ATX Style

Use # to create a heading. The more # you use, the lower the heading level.

Markdown Sample

# Heading Level 1 
## Heading Level 2
### Heading Level 3
#### Heading Level 4
##### Heading Level 5
###### Heading Level 6

Edit/Preview Screen

Setext Style

Setext Style

Create headings by placing = or - repeatedly below the text to be applied. Only level 1 and level 2 headings can be created in Setext style.

• Level 1 heading: =
• Level 2 heading: -

Markdown Sample

Heading Level 1
===
Heading Level 2
---

Edit/Preview Screen

Code Block

Code Block

Displays text as a block of program code. Spaces within the code remain as they are, and the format does not change.

Fenced Code Block

Fenced Code Block

A code block is any text enclosed between two sets of three consecutive ` or ~, one set at the start of the cod and one at the end. Even if there are blank lines or lines containing three consecutive of both symbols, the code block will continue until there is a line with only three consecutive symbols of the symbol used at the start and without other characters.

Markdown Sample

```
The following is an example of string concatenation in a script task.
~~~
// == Retrieve business data ==
var dataA = engine.findDataByName(‘q_dataA’).toString(); 
var dataB = engine.findDataByName(‘q_dataB’).toString(); 


// == Concatenate strings ==
var newData = dataA + dataB;


// == Set data to data item ==
engine.setDataByName(‘q_dataC’, newData );
```

Edit/Preview Screen

Indented Code Block

Indented Code Block

    (four spaces) inserted at the beginning of a line makes it a code block. Even if you insert a blank line, if you start the next line with four spaces, the code block will continue.

On the other hand, if there is a line that does not start with four spaces, it will return to a normal paragraph.

Markdown Sample

    let array1 = qbpms.form.get(‘q_radioButton’);
    let display1 = array1[0].display; //Display label


    let array2 = qbpms.form.get(‘q_checkBox’);
    let value2 = array2[1].value; //Choice ID of the second choice
The above code uses the Questetra Form JavaScript API to retrieve the value stored in a Select-type data item.

Edit/Preview Screen

HTML Block

HTML Block

You can use HTML tags with Markdown. The HTML tags that can be used depend on what you are using Markdown for, such as String-type (Markdown) data items and work manuals. For details, see "R2131: HTML Tags Available for Operation Form".

Note: Please do not use blank lines in HTML blocks, except for <script>/<style> tags.

Markdown Sample

<dl><dt style="font-weight:600 ;font-size:1.2em;">Markdown</dt>
<dd>A lightweight markup language.</dd>
<dd>It allows you to easily express headings, lists, links, and emphasised text using symbols and character combinations.</dd></dl>

Edit/Preview Screen

Paragraph

Paragraph

A basic unit that groups text to clearly express meaning. A paragraph consists of one or more lines of text, and is separated from other paragraphs and elements by one or more blank lines.

Markdown Sample

This is the first paragraph.

This is the second paragraph.

Edit/Preview Screen

Table

Table

In Markdown, tables are created using - and |.

How to create a table

1. Header line

   • The column headings are written in the top row of the table
   • | is used to separate the columns

2. Separator line

   • This is always written below the header line
   • - is used to define the length of the columns, and is separated by |

3. Data line

   • The contents are written below the separator line

How to align text

By adding : to the separator line, you can specify how to align the text in the relevant column.

Notation	Align	Example
:---	Left	Contents
:---:	Center	Contents
---:	Right	Contents

Markdown Sample

| Item name | Price | Stock |
|:----------|:-----:|-----:|
| Notepad | ¥500 | 10 |
| Pen | ¥100 | 50 |
| Eraser | ¥150 | 30 |

Edit/Preview Screen

Quotation

Quotation

This is used to express quotations or excerpts from other sources. It is created by adding > to the beginning of a line.

Markdown Sample

> This is a block quotation. This is the outermost quotation.
>
>> This is a block quotation one level inside.
>>
>>> This is a block quotation two levels inside.
>>> You can continue to quote at a deeper level.
>>
>> This returns to the block quotation one level inside.
>
> Back to the outer block quote.   

Edit/Preview Screen

List

List

This will format the text into a simple list. There are two types: “unordered list (with bullet points)” and “ordered list (numbered)”.

Unordered List

Unordered List

Write -/*/+ at the beginning of the line, followed by  (a space), and then write the item. To create a sub-level (to move down a level), add   (two spaces) at the beginning of the line.

Markdown Sample

* Item
  + Sub-item
    - Sub-sub-item
    - Sub-sub-item
  + Sub-item
    - Sub-sub-item
* Item
  + Sub-item

Edit/Preview Screen

Ordered List

Ordered List

Write . or ) after a number, followed by  (a space) before writing the item. When displayed, the number will automatically be incremented.

To move down a level, add a number of spaces equal to the number of digits in the number at the start of the line + 2 (for example, if it is 1., then three spaces are required, and if it is 10., then four spaces are required).

If you change the number written in the first item in the same level, it will start from that number when displayed.

Markdown Sample

1. Item
   1) Sub-item
      1. Sub-sub-item
      1. Sub-sub-item
   1) Sub-item
   1) Sub-item
1. Item
   5. Sub-item
   1. Sub-item     

Edit/Preview Screen

Combination of Unordered and Ordered Lists

Combination of Unordered and Ordered Lists

Unordered and ordered lists can also be mixed. To move down a level, from an unordered list, add   (two spaces) to the beginning of the line, and from an ordered list, add a number of spaces equal to the number of digits in the number at the beginning of the line + 2.

Markdown Sample

1. Item
   1) Sub-item
      * Sub-sub-item
      * Sub-sub-item
   1) Sub-item
   1) Sub-item
1. Item
   - Sub-item
     1. Sub-sub-item
     1. Sub-sub-item
   - Sub-item

Edit/Preview Screen

Escape

Escape

To display characters that have a special meaning in Markdown, such as #, as they are, enter \ before them.

Markdown Sample

\*This text will not be italicized\*

\# This text will not be a heading

Edit/Preview Screen

Character Reference Notation

Entity Reference

Entity Reference

You can use HTML entity references to represent specific characters and symbols. Entity references are useful for safely representing special characters. They are particularly useful for representing symbols that would otherwise be interpreted if written directly in HTML or Markdown (e.g. <, >, etc.).

Markdown Sample

`<` represents <, `>` represents >, and `&` represents &.

Edit/Preview Screen

Numeric Character Reference (NCR)

Numeric Character Reference (NCR)

This is a method for displaying characters by directly specifying the Unicode code point.

Decimal NCR

Decimal NCR

This is specified in &# + decimal number + ;.

Markdown Sample

`—` represents —, `π` represents π, and `⇔` represents ⇔.

Edit/Preview Screen

Hexadecimal NCR

Hexadecimal NCR

This is specified in &#x + hexadecimal number + ;.

Markdown Sample

`—` represents —, π` represents π, and `⇔` represents ⇔.

Edit/Preview Screen

Emoji

Emoji

To use emoji, use the emoji code enclosed in :.

The emoji codes are the same as those used on GitHub.
List of GitHub Emoji Codes (https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md)

Markdown Sample

`:smile:` represents :smile:, `:thumbsup:` represents :thumbsup:, and `:heart:` represents :heart:.

Edit/Preview Screen

Inline Code

Inline Code

To display as inline code, enclose it in `.

Markdown Sample

To get the input values on the task processing screen, use `qbpms.form.get(field name)`.

Edit/Preview Screen

Text Styles

Text Styles

To change the formatting, enclose the text in */ _ /~.

Bold

Bold

Use this to make important parts or keywords you want to emphasize stand out. Enclose the text in ** or __

Markdown Sample

**Both of these methods** will __make the text bold__.

Edit/Preview Screen

Italic

Italic

Used to indicate light emphasis, terms or expressions that you want to distinguish from others. Enclose the text in * or _. However, depending on your browser settings, double-byte characters, such as Kanji and Hiragana, may not be italicized.

Markdown Sample

*A* and _B_ are both italicized.

Edit/Preview Screen

Bold and Italic

Bold and Italic

Use this for very important emphasis or to draw special attention. Enclose the text in *** or ___.

Markdown Sample

***Bold*** and ___Italic___

Edit/Preview Screen

Strike-through

Strike-through

Indicates deleted or invalidated information. Or, it is used to record the content before the change. Enclose the text in ~~.

Markdown Sample

~~This text is struck through~~

Edit/Preview Screen

Links

Links

There are the following ways to write links.

• URL only: <Link destination ULR>
• With link text: [Link text](Link destination URL)
• Reference link:
  When you want to repeat the same URL, you can insert the link by entering the URL and reference text separately and entering the reference string.
  [Reference text] Link destination URL “Alternative text”
[Link text][Reference string]

Markdown Sample

<https://questetra.com/ja/>

[Questetra Support Site](https://support.questetra.com/ja/) 

[Product Site]: https://questetra.com/en/ "Questetra Product Site" 

[1st][Product Site]

[2nd][Product Site]

Edit/Preview Screen

Image Display

Image Display

![alternative text](image URL) can be used to display images. The display size cannot be adjusted, so if you want to change the display size, please use the <img> tag.

Markdown Sample

![Ques-kun](https://support.questetra.com/wp-content/uploads/2022/04/QuesEyecatch_220_01.png)

Edit/Preview Screen

Inline HTML

Inline HTML

You can use inline HTML element tags within Markdown lines.

The HTML tags that can be used differ depending on the function that uses Markdown, such as String-type (Markdown) data items and work manuals. For details, see "R2131: HTML Tags Available for Operation Form".

Markdown Sample

You can use <span style=“font-size:1.5em;”>inline HTML tags</span> within a line. 

Edit/Preview Screen

Line Break

Line Break

You can insert a line break by either adding \ at the end of the line, or by adding   (two spaces) at the end of the line.

Markdown Sample

You can insert a line break by either adding `\`,\
or by adding "  "(two spaces) 
at the end of the line.

Edit/Preview Screen