Select language ❯ 🇨🇳 简体中文

Donation

Thanks to donors who supported VLOOK™ (partial list) / Thanks for donate VLOOK™ (partial donors)

Peter_PuOgRd、绿邃清幽_CyBuAq、李导996_CyBuAq、fanky_CyBuAq、＊丽_CyBuAq、杨琛_CyBuAq、＊哦_GnBn、＊豫_GnBn、l＊a_GnBn、＊o_GnBn、K＊y、行川、＊山、＊魂、＊狗、＊R、＊Z、＊川、l＊n、＊朽、＊杰、A＊C、W＊l、＊山、J＊o、韩宗辉、＊星、一叶知秋、d＊、＊军、＊鹏、＊无、H＊t、＊二、＊宇、＊辉、＊秋、＊笑、＊心、整＊9、＊国、＊哥、乌拉、＊龙、远方眼前、＊应、＊销、E＊y、…

If you like VLOOK™, consider buying me a coffee

_Gn

I like VLOOK™, I donate a cup of coffee

_Se

°Code

Copy Code Content

Markdown FansQ「For code and code blocks generated by Markdown, hope to copy content with one click～」

VLOOKA_T2 VLOOK™ automatically enhances Markdown code blocks, supporting current line highlighting, copying all code, and adapting to Dark Mode!

Applicable Scope ••• Editing✓ Not Supported_Gy Export HTML✓ Supported_Gn

Copy Code Example

Click this code to copy its content

Copy Code Block Example

^tab

VLOOK™ Code Block Example_Programming Language: C++_

1
// ================================================== //
2
//           VLOOK™ supports auto-folding for long code blocks          //
3
// ================================================== //
4
/**
5
 * Quick Sort
6
 * @param arr Target data to sort
7
 * @param left Left value of sort range
8
 * @param right Right value of sort range
9
 */
10
void quickSort(int arr[], int left, int right) {
11
  int i = left, j = right, tmp, pivot = arr[(left + right) / 2];
12
  /* partition */
13
  while (i <= j) {
14
    while (arr[i] < pivot)
15
      i++;
16
    while (arr[j]>pivot)
17
      j--;
18
    if (i <= j) {
19
      tmp = arr[i];
20
      arr[i] = arr[j];
21
      arr[j] = tmp;
22
      i++;
23
      j--;
24
    }
25
  };
26
  /* recursion */
27
  if (left < j)
28
    quickSort(arr, left, j);
29
  if (i < right)
30
    quickSort(arr, i, right);
31
}
32
// ================================================== //

Code Block Wrapping Layout

Applicable Scope ••• Editing✓ Not Supported_Gy Export HTML✓ Supported_Gn

Code blocks wrap automatically by default, and can be switched to non-wrapping mode as needed.

Caption & Auto-numbering

About code block caption and auto-numbering

Relevant content see here ❯❯

If you have more needs or suggestions about the above content, feel free to provide feedback～

°Buttons

Keyboard Keys

Applicable Scope ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

VLOOK™ theme supports <kbd> tag, and VLOOK™ provides button styles closer to physical keyboards, examples:

Q W E R T 1 2 3 4 5

ESC Enter

Ctrl Alt Shift 　　　　　　　　　

Ctrl + C 、Ctrl + Shift + V

Ctrl + P

Ctrl + S

Button Links

Markdown FansQ「Buttons are essential for interactive web documents, hope Markdown documents can keep up」

VLOOKA_T2 By enhancing Typora's existing <kbd> feature, you can implement various styles of button links - let's get started!

Applicable Scope ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Text Buttons

VLOOK™ implements "text links" to "button links" conversion, and provides three button styles～

For example with this text link:

• Markdown content: [Visit GitHub](github.com)

• Text link effect: Visit GitHub

■ Standard Button

Just wrap the text with <kbd>～

• [<kbd>Visit</kbd>](...)

• Example: Visit GitHub

□ Secondary Button

Set the "standard button" to italic～

• *[<kbd>Visit</kbd>](...)*

• Example: Visit GitHub

🌈 Super Button

Set the "standard button" to index-en.mdbold～

• **[<kbd>Visit</kbd>](...)**

• Example: index-en.mdVisit GitHub

Centered display when button link is alone in a line

Centered when standalone

Centered when standalone

Centered when standalone

Centered when standalone Centered when standalone

Centered when standalone Centered when standalone index-en.mdCentered when standalone

Tip

To avoid "center alignment", just add a plain space before or after～

Icon + Text Buttons

Besides pure text buttons, also supports adding images as button icons (any size), icons will automatically adapt to icon layout.

^tab

Text + Image/Icon

Directly insert "image URL" inside <kbd> of above "text buttons":

• Markdown: [<kbd>VLOOK ![](xxx.svg)</kbd>]

• Effect:

VLOOK VLOOK VLOOK

Icon Only

Replace text content in "text buttons" with "image URL":

• Markdown: [<kbd>![](xxx.svg)</kbd>]

• Effect:

Card-Style Links

Availability ••• While Editing ✓ Supported_Gn Exported HTML ✓ Supported_Gn

Markdown Fan Q 「Wants to present multiple different links, brief descriptions, and icons in a clean and elegant card layout within Markdown documents」

VLOOK A_T2 Just flexibly combine the previously mentioned Blockquote Subtitles / Columns, Paragraph Underline, Image Icon Styles, and Button Links as needed～

Here’s an example of a three-column link card layout:

This is a simple description of the link

This is a text link

Card Subtitle 1

This is a summary description of the link target. This is a summary description of the link target.

A Secondary Button link

Card Subtitle 2

This is a summary description of the link target with emphasis style

A Standard Button link

If you have more needs or suggestions about the above content, feel free to provide feedback～

°Cover & Back Cover

Markdown FansQ「How to make Markdown documents support covers and back covers (like this document's cover and back cover)?」 VLOOKA_T2 After applying VLOOK™'s "Template Theme", using standard Markdown syntax can make documents support covers and back covers by following VLOOK™ conventions.

Applicable Scope ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Activate "Cover"

Input a Level 6 heading at the index-en.mdvery beginning of the document

Example: ###### This is the cover title

Shortcut

Select text for cover content, then press Cmd / Control + 6

Tip

If there's YAML or [TOC] content, add it after them.

_T1

Activate "Back Cover"

Input a Level 1 heading at the index-en.mdlast line of the document

Example: # This is the back cover message

Shortcut

Select text for back cover content, then press Cmd / Control + 1

_T2

After successfully activating cover and back cover, corresponding entries will appear in Typora's outline panel for quick navigation.
Below are automatic formatting rules for specific information in "Cover":

^tab

Title

Default format is title format, just input directly;

Can combine subscript and underline formats for "subtitle, secondary title":

• Subtitle: <sub>Subtitle with spaces</sub> or ~Subtitle without spaces~

• Secondary title: <u>This is the secondary title</u>

Document Type, Security Level

Use VLOOK™'s multi-level tag syntax:

• *Security Level`Public*_~Gn~_

• *Security Level`Internal*_~Og~_

• *Security Level`Confidential*_~Rd~_

Author

Use Markdown "bold" format for "author info", automatically prefixed with By, or specify via Custom Theme

• Example: **Author Name**

Copyright Info

Use Markdown "italic" format for "copyright info" (automatically reduces font size and bold)

• Example: *(C)2020. All Rights Reserved*

^tab

Minimal Document Cover Example

xxxxxxxxxx
1
1
###### Fill document title here<br>**Fill author here**<br>*Fill copyright owner info here*

Example of this document's cover content

xxxxxxxxxx
1
1
###### ~VLOOK™~<br>Give your Markdown a new way to _^play^_<br>──<br><u>Quick Reference Manual<br>(Part.II)</u><br>*Latest version`V30.0`*<br><br>**MAX°Mengzhao**<br>*COPYRIGHT © 2016-2025. MAX°DESIGN.*

Example of this document's back cover content

xxxxxxxxxx
1
1
# The End

If you want a more personalized cover and back cover design, you can subscribe to VLOOK™’s Custom Theme Service .

Explore More About Custom Themes

If you have more needs or suggestions about the above content, feel free to provide feedback～

°Columns

"Columns" and "Tab Groups" are two very practical, widely applicable, and complementary typesetting features.
"Columns" meet the need to simultaneously display multiple sets of information in the same area, sharing display space, suitable when content is limited;
"Tab Groups" meet the need to alternately display multiple sets of information in the same area, occupying display space exclusively, suitable when content is abundant.

Markdown FansQ「Markdown natively doesn't support column typesetting. Some users reluctantly use tables as substitutes, which remains uncomfortable～」

VLOOKA_T2 With VLOOK, you only need 1 action to instantly make your "blockquotes, lists, GitHub Style Alert" achieve column arrangement!

List Columns

Markdown FansQ「Hope to display long lists in columns, but Markdown standards don't seem to support this practical typesetting method～」

VLOOKA_T2 By extending specific combinations of Markdown syntax, we can meet your flexible typesetting needs!

Applicable Scope ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Mainly suitable for column needs with subtitles, where content is organized via lists, e.g.: task boards, etc.

Syntax

Add a specified number of "horizontal dividers" --- before the "list" that needs column typesetting

• Add 1 horizontal divider to enable "⬛︎ ⬛︎ Two-column" mode

• Add 2 horizontal dividers to enable "⬛︎ ⬛︎ ⬛︎ Three-column" mode

• Add 3 horizontal dividers to enable "⬛︎ ⬛︎ ⬛︎ ⬛︎ Four-column" mode

• Add 4 horizontal dividers to enable "⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎ Five-column" mode

Column Syntax Example

​x
1
--- 
2

3
- List 1
4
  - List item 1-1
5
  - List item 1-2
6
- List 2
7
  - List item 2-1

Two-column List Example

1. List 1

   • This is list item 1-1

   • This is list item 1-2

2. List 2

   1. This is list item 2-1

   2. This is list item 2-2

3. List 3

   • This is list item 3-1

   • This is list item 3-2

   Blockquote within list

4. List 4

   • This is list item 4-1

   • This is list item 4-2

Three-column List Example

• List 1

  • This is list item 1-1

  • This is list item 1-2

• List 2

  1. This is list item 2-1

  2. This is list item 2-2

• List 3

  • This is list item 3-1

  • This is list item 3-2

• List 4

  • This is list item 4-1

• List 5

  • This is list item 5-1

Four-column List Example

• List 1

  • This is list item 1-1

  • This is list item 1-2

• List 2

  1. This is list item 2-1

  2. This is list item 2-2

• List 3

  • This is list item 3-1

  • This is list item 3-2

• List 4

  • This is list item 4-1

  • This is list item 4-2

• List 5

  • This is list item 5-1

• List 6

  • This is list item 6-1

• List 7

  • This is list item 7-1

Five-column List Example

• List 1

  • This is list item 1-1

  • This is list item 1-2

• List 2

  1. This is list item 2-1

  2. This is list item 2-2

• List 3

  • This is list item 3-1

  • This is list item 3-2

• List 4

  • This is list item 4-1

  • This is list item 4-2

• List 5

  • This is list item 5-1

  • This is list item 5-2

• List 6

  • This is list item 6-1

• List 7

  • This is list item 7-1

• List 8

  • This is list item 8-1

• List 9

  • This is list item 9-1

List Columns Nested Within Blockquote Columns Example

---

• List 1

  • This is list item 1-1

  • This is list item 1-2

• List 2

  1. This is list item 2-1

  2. This is list item 2-2

Blockquote Columns

Markdown FansQ「Hope to display blockquotes in columns, but Markdown standards don't seem to support this practical typesetting method～」

VLOOKA_T2 By extending specific combinations of Markdown syntax, we can meet your flexible typesetting needs!

Applicable Scope ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Mainly suitable for organizing similar content in blocks, where content isn't suitable for list-based organization.

Syntax

Add a specified number of "horizontal dividers" --- before the "blockquotes" that need column typesetting

• Add 1 horizontal divider to enable "⬛︎ ⬛︎ Two-column" mode

• Add 2 horizontal dividers to enable "⬛︎ ⬛︎ ⬛︎ Three-column" mode

• Add 3 horizontal dividers to enable "⬛︎ ⬛︎ ⬛︎ ⬛︎ Four-column" mode

Column Blockquote Syntax Example

xxxxxxxxxx
7
1
---
2

3
> Blockquote 1
4
> Content of blockquote 1
5

6
> Blockquote 2
7
> Content of blockquote 2

Single-line Two-column Blockquote Example (No Subtitles)

Column 1

Content of column 1

Column 2

Content of column 2

Single-line Two-column Blockquote Example

Two-column Subtitle 1

Column 1

Two-column Subtitle 2

Column 2

Single-line Three-column Blockquote Example

Three-column Subtitle 1

Row 1 Column 1

Three-column Subtitle 2

Row 1 Column 2

Three-column Subtitle 3

Row 1 Column 2

Three-column Subtitle 4

Row 1 Column 1

Three-column Subtitle 5

Row 1 Column 2

Three-column Subtitle 6

Row 1 Column 3

Single-line Four-column Blockquote Example

Four-column Subtitle 1

Row 1 Column 1

Button

_Rd!

Four-column Subtitle 2

Row 1 Column 2

Button

_Gn!

Four-column Subtitle 3

Row 1 Column 3

Button

_Bu!

Four-column Subtitle 4

Row 1 Column 4

Button

_Pu!

Blockquote Columns Nested Within Blockquotes Example

Blockquote Columns Nested Within Blockquotes

---

---

Nested Column 1 (Non-H6)

Row 1 Column 1

Button

_Rd!

Nested Column 2 (Non-H6)

Row 1 Column 2

Button

_Gn!

Nested Column 3 (Non-H6)

Row 1 Column 3

Button

_Bu!

Nested Column 4

Row 1 Column 4

Button

_Pu!

_Gy

GitHub Style Alert Columns

Applicable Scope ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Supports displaying GitHub Style Alert in columns, following the same familiar approach as "Blockquote Columns" above～

If you have more needs or suggestions about the above content, feel free to provide feedback～

°Caption

Markdown FansQ「How to add caption and auto-numbering to tables, illustrations, code blocks, etc. in documents like Word?」

VLOOKA_T2 With simple markup, you can add caption to tables, images, code blocks, formulas, etc., with auto-numbering like Table 1 Figure 2.3-2. Caption content also automatically serves as anchors for cross-referencing and jumping within documents～

Applicable Scope ••• Editing✓ Not Supported_Gy Export HTML✓ Supported_Gn

How to Set Caption?

^tab

Set Caption: Method 1 (Images only)

For images, caption are primarily generated based on "image title" and "optional subtitle" in Markdown standard syntax.

Memo_Bu This method supports "dual captions", where "optional subtitle" content serves as the second caption.

Set Caption: Method 2

• Caption content needs to index-en.mdoccupy a standalone paragraph, formatted as: first "italic", then "highlight"

• Corresponding Markdown syntax: *==This is caption content==*

Tip_Gn This method supports "dual captions".

Shortcut

Select content, then press Cmd/Ctrl + i for italic, then Cmd/Ctrl + ⇧ Shift + h for highlight

^tab

Dual Captions

The second caption appears below tables. index-en.mdSetting method:

• Step 1 Complete first caption content via "Method 2" above;

• Step 2 Add second caption content after first, wrapped in underscores _ ;

• Corresponding Markdown syntax: *==First caption content_Second caption_==* .

Cross-referencing

Both caption methods support index-en.mdanchor jumps (cross-referencing) within or between documents after exporting HTML;

• Current doc cross-ref example:

  • Tag (regular style) preset color codes & examples

  • Normal image example (long images auto-fold)

• External doc cross-ref example: Normal cell horizontal & vertical merging example

Image Caption & Auto-numbering

Follow Markdown syntax for adding images: ![Image title](ImageURL "Optional subtitle")

• Single caption: Image title serves as "Caption 1" content

• Dual captions: Optional subtitle serves as "Caption 2" content (optional)

(Plugin prioritizes using above content as caption. If none, supports adding via "Method 2")

Table Caption & Auto-numbering

Caption generated via "Method 2"

Example: This is first caption content_This is second caption content_

Code Block Caption & Auto-numbering

• Add caption via "Method 2" above

(Method 3) Italic+highlight code block caption_The best programming language PASCAL! No rebuttals accepted!_

xxxxxxxxxx
4
1
Program HelloWorld(output);
2
begin
3
    writeln('Hello, world!')
4
end

Multimedia Caption & Auto-numbering

• For streaming platforms multimedia, use "Method 2" above

• For Video, audio, caption method matches image caption

Mermaid Chart Caption & Auto-numbering

• Add caption via "Method 2" above

• Mermaid chart caption example, click here to see ❯

Math Formula Caption & Auto-numbering

• Add caption via "Method 2" above

• Formula caption example, click here to see ❯

If you have more needs or suggestions about the above content, feel free to provide feedback～

°Tab Group

"Columns" and "Tab Groups" are two very practical, widely applicable, and complementary typesetting features.
"Columns" meet the need to simultaneously display multiple sets of information in the same area, sharing display space, suitable when content is limited;
"Tab Groups" meet the need to alternately display multiple sets of information in the same area, occupying display space exclusively, suitable when content is abundant.

Markdown FansQ「Markdown natively doesn't support "Tab Group" typesetting, unable to leverage web interactivity～」

VLOOKA_T2 With VLOOK, freely specify continuous content (tables/illustrations/blockquotes/code blocks/GitHub Style Alert) to display as tab groups!

Applicable Scope ••• Editing✓ Not Supported_Gy Export HTML✓ Supported_Gn

Syntax

• Before the first content in continuous content to be displayed as tab groups, add an empty line, input any content (e.g. tab), then format as:

  First "italic", then "^superscript" (standalone paragraph)

• Corresponding Markdown syntax: _^tab^_ or *^tab^*

Shortcut

• Select content, then press Cmd/Ctrl + i for italic, then ⇧ Shift + 6 for highlight;

• Tip_Gn After exporting HTML, supports switching tabs via tab, ⇧ Shift + tab.

Simple Example

^tab

Current Tab

This is the content corresponding to the current tab.

On Hover

This is the content corresponding to the tab when hovered.

Other Tabs

This is the content corresponding to other tabs.

Multi-type Content Tab Groups

Below shows continuous content of different types (tables, illustrations, blockquotes, code blocks, videos, audio, formulas, GitHub Style Alert) specified to display as "Tab Groups":

^tab

Problem

Given a 0-indexed string s containing only digits 0-9. A string t is semi-repetitive if it has at most one pair of adjacent equal characters. Return the length of the longest semi-repetitive substring in s.

xxxxxxxxxx
20
1
class Solution {
2
    public int longestSemiRepetitiveSubstring(String s) {
3
        int n = s.length();
4
        if (n <= 2)
5
            return n;
6
        int[] pre = new int[50];
7
        int ans = 0, k = 0;        // k records pre length for traversal
8
        pre[0] = 1;                // Loop starts from 1, need to add first 1
9
        for (int i = 1; i < n; i++) {
10
            if (s.charAt(i-1) == s.charAt(i))
11
                k++;
12
            pre[k]++;
13
        }
14

15
        ans = pre[0];
16
        for (int i = 1; i <= k; i++)
17
            ans = Math.max(ans, pre[i-1] + pre[i]);
18
        return ans;
19
    }
20
}

Python Example

xxxxxxxxxx
13
1
class Solution:
2
    def longestSemiRepetitiveSubstring(self, s: str) -> int:
3
        if len(s) <= 2:
4
            return len(s)
5
        pre = [1]                  # Loop starts from 1, need to add first 1
6
        for i in range(1, len(s)):
7
            pre[len(pre)-1] += 1
8
            if s[i-1] == s[i]:
9
                pre.append(0)
10
        ans = pre[0]
11
        for i in range(1, len(pre)):
12
            ans = max(ans, pre[i-1] + pre[i])
13
        return ans

Online Video

Blockquote Tab Groups

When tab items or content are too long, horizontal scrolling is supported (also supports keyboard Tab / ⇧ Shift + Tab for switching):

^tab

What is Markdown?

• In 2004, John Gruber created Markdown, a text markup language specifically designed for web writing. Using Markdown, you only need to insert a small number of markup symbols during writing to easily format text (such as setting headings, bold, lists, blockquotes, etc.);

• Markdown documents are stored in plain text format, which means they can be opened with almost any text editor. At the same time, they can be exported as formatted rich text documents, HTML web pages, etc. through Markdown editors. Pure, concise, easy to use, flexible are all reasons why people love Markdown.

Markdown Logo

Markdown Standardization Project (CommonMark)

• The current Markdown standardization project is CommonMark;

• Standardized index-en.mdCommonMark syntax reference: Learn Markdown in 60 Seconds, Dive Deeper into Markdown in 10 Minutes

What is Github Flavored Markdown?

• GitHub Flavored Markdown (GFM) is a popular markup language that adds some additional features to standard Markdown to better adapt to GitHub platform needs. These additional features include task list, automatic links, tables, etc.;

• Typora currently mainly adopts this standard Details ❯

What is AsciiDoc?

• AsciiDoc is a text format specification designed to solve the problem of book-scale writing, serving as an upgrade or alternative to Markdown;

• Compared to Markdown, it supports more formats, including document attributes, setting authors, version information, syntax highlighting, tables, Include functionality, etc.;

• AsciiDoc can be converted to various formats such as HTML5, DocBook, EPUB, PDF, etc. through the AsciiDoctor toolchain;

• AsciiDoctor also provides template engines and performance improvements, making it suitable for scenarios requiring rich formats and custom output.

^{(The above information is generated by Baidu AI)}

Why hasn't AsciiDoc become popular?

• First, index-en.mdhigher learning cost. Although AsciiDoc supports more formats than Markdown, these features also increase its learning difficulty. For simple document writing, these features of AsciiDoc are not necessary, while simple documents like blogs tend to use Markdown with lower learning cost;

• Second, index-en.mdrelatively limited functionality. Although it supports more formats, compared to Markdown, AsciiDoc's flexibility in specific scenarios is slightly insufficient. Markdown can achieve similar functionality through self-extended syntax or using HTML, while AsciiDoc requires more custom block syntax and extensibility, which may bring inconvenience in some cases;

• Finally, index-en.mdlack of widespread community support. Although AsciiDoc has certain applications in specific fields (such as e-book production), its overall community and user base are relatively small, limiting its promotion and use in broader application scenarios.

^{(The above information is generated by Baidu AI)}

GitHub Style Alert Tab Groups

The following shows GitHub Style Alert presented in "Tab Group" form while retaining highlighting styles:

^tab

Currently, 3 styles are available for “Tab Groups”. If you wish to specify a particular style, you can subscribe to VLOOK™’s Custom Theme Service .

Explore More About Custom Themes

°Content Marking

GitHub Style Alert

Markdown FansQ「Does VLOOK™ theme support GitHub Style Alert? (Requires Typora1.8.3+ or higher version)」

VLOOKA_T2 Has adapted and optimized in terms of typesetting styles, while supporting automatic matching of "information category names" in multilingual environments.

Applicable Scope ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

GitHub Style Alert is primarily used in documents for reminders, notes, or emphasizing key information through specific typesetting styles, consisting of corresponding information category icons, names, content, etc.

VLOOK™ Optimizations for GSA

• Provides multiple style options including "Regular, Flat, Emphasized", which can be specified through Custom Theme configuration;

• Adapts styling for "text links, buttons, highlights" within to match the color scheme of corresponding information categories.

---

Below shows the "Flat" style example. For more style examples, please preview through VLOOK™'s preset Hope and Joint themes.

Syntax

Input any of the following GitHub Style Alert category identifiers in the first line of a "blockquote" to enable automatic recognition and rendering:

[!NOTE] [!TIP] [!IMPORTANT] [!WARNING] [!CAUTION]

Reference Example

xxxxxxxxxx
2
1
> [!NOTE]  
2
> Highlights information that users should take into account, even when skimming.

---

For more GitHub Style Alert information, see Typora Release Notes

Below are examples with richer formatting content

Blockquote Embedded GSA

Note

NOTE

Tip

TIP

Important

IMPORTANT

Warning

WARNING

Caution

CAUTION

VLOOK™ also supports column layout for GitHub Style Alert

Content details ❯ GitHub Style Alert Columns

If you have more needs or suggestions about the above content, feel free to provide feedback～

Tag

Markdown FansQ「When writing documents with Markdown, how can I highlight key content using modern visual elements like "tag"?」

VLOOKA_T2 Set the "inline code" content in Markdown (like `tag`) to "italic" to achieve beautiful and practical "tag" formatting!

Applicable Scope ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

For example, these "single-level tag": this tag_Rd or that tag_Bu! can also be gradient tag_T1T2

For example, these "multi-level tag": This is titleThis is content_Bn Chemical formulaH₂Ois water💦_Se, or like this Enabledlight_Gn lightDisabled_Gy

Continue reading below to see how this is achieved～

Single-level Tag

Single-level tag are the most basic form of tag without further classification or structure. They are simple and easy to use, typically used to identify specific common information.

For example VIP_BnGd Pending_Rd Follow-up needed_Bu Important_Pu!

^tab

Syntax

• Wrap the text to be set as a tag with code symbols `, and set it to "italic"

• Corresponding Markdown syntax: *`This is a tag`*

Shortcut

Select the text, then press Cmd / Control + i to set as italic, then press ` to automatically wrap

^tab

Tag (Regular Style) Preset Color Codes and Examples

Tag (Emphasized Style) Preset Color Codes and Examples

Multi-level Tag

Multi-level tag are used for more complex tagging scenarios, generally dividing tag into two or three levels. Unlike single-level tag with single information, multi-level tag can reflect multi-dimensional information.

Two-level structure examples Customer LevelVIP_BnGd Customer LevelRegular Customer_Gy Document ClassificationPublic_Bu Document ClassificationConfidential_RoRd Interaction TypeEmail

Three-level structure examples Project PhaseRequirement AnalysisFeasibility Report Latest VersionV2.3beta_BuOg

^tab

Syntax

1. First complete the setup according to "Tag";

2. Add corresponding content before or after the content wrapped by code symbols `

• Corresponding Markdown syntax: *Segment 1`Segment 2`Segment 3*

Extended Usage

• Adding content only after a single-level tag is equivalent to reversing the left-right style of a two-level multi-level tag, example: BeforeTag-A Tag-AAfter

• Highlight variable styles: For "Segment 2", supported variable formats: {{variable}} %variable% $variable$ ${variable} #{variable} var(variable)

^tab

Multi-level Tag Preset Color Code Examples

More Multi-level Tag Examples

Tag Link

Markdown FansQ「I hope to add hyperlinks to tag for easy association with other documents or external information related to the tag」

VLOOKA_T2 Supports adding hyperlinks to tag. Just select the tag and directly set it according to Markdown hyperlink syntax.

Applicable Scope ••• Editing✓ Not Supported_Gy Export HTML✓ Supported_Gn

Here are tag with hyperlinks, try them out～

VIP Custom Theme_BnGd VLOOK@GitHub VLOOKGitHub@MadMaxChow_T1T2 🎁 VIPSubmit My Custom Requirements_BnGdBnGdBn

If you have more needs or suggestions about the above content, feel free to provide feedback at any time～

Progress Bar

Markdown FansQ「When making documents with Markdown, I hope to visualize progress-related information more intuitively」

VLOOKA_T2 This is really very Easy for VLOOK™, just combine Markdown's "bold, highlight" these two standard formats to achieve it easily

Applicable Scope ••• Editing✓ Not Supported_Gy Export HTML✓ Supported_Gn

^tab

Syntax

• Set the progress numerical content to the following format combination: first "bold", then "highlight"

• Corresponding Markdown syntax: **==Progress Value==**

Shortcut

Select the text, then press Cmd / Control + B to set as bold, then press Cmd / Control + ⇧ Shift + H to set as highlight

Supports adding preset color codes after the progress bar to specify colors. If not specified, it will automatically adapt colors based on specific values, as shown in the table below:

Progress Value Explanation

1. When it's a specific value, directly specify a fixed value, examples:

   • Regular: index-en.md80.5

   • Overflow: index-en.md120 index-en.md-35

2. When it's ?, automatically calculate the completion progress of all subtasks in the following task list.

index-en.md（ The progress during editing is illustrative, the actual progress is subject to the rendering after exporting HTML ）index-en.md

Static Progress Bar Examples

Static Progress Bar Different Color Examples

Default Auto-Adapt Color	index-en.mdSupports Specifying Preset Color Codes	==
index-en.md-25	Wn	index-en.md5.5Wn
index-en.md0	Rd	index-en.md10Rd
index-en.md5	Og	index-en.md15Og
index-en.md19	Ye	index-en.md20Ye
index-en.md20	Lm	index-en.md25Lm
index-en.md39	Gn	index-en.md30Gn
index-en.md40	Mn	index-en.md35Mn
index-en.md59	Ol	index-en.md40Ol
index-en.md60	Aq	index-en.md45Aq
index-en.md79	Cy	index-en.md50Cy
index-en.md80	Bu	index-en.md55Bu
index-en.md99	Se	index-en.md60Se
index-en.md100	La	index-en.md65La
index-en.md125	Vn	index-en.md70Vn
-	Gy	index-en.md75Gy
:	Bk	index-en.md80Bk
:	Pu	index-en.md85Pu
:	Ro	index-en.md90Ro
:	Pk	index-en.md95Pk
:	Gd	index-en.md100Gd
:	Bn	index-en.md120Bn
:	T1	index-en.md-35T1
:	T2	index-en.md0T2

_Gy

Automatically Calculate Task Item Completion Progress Example

Overall Task Progress index-en.md?

• 1. Analyze Target Market Demand index-en.md?

  • Survey Target Customer Groups index-en.md?

    • Develop Questionnaire or Face-to-Face Interview Plan

    • Collect Customer Needs and Preference Information for Products or Services

  • Research Competitors index-en.md?

    • Analyze Competitor Products, Pricing Strategies and Market Share

    • Discover Competitor Strengths and Weaknesses, and Compare with Own

• 2. Collect Market Data index-en.md?

  • Consult Industry Reports and Data index-en.md?

    • Consult Industry Reports and Statistics Released by Industry Associations

    • Collect Information on Industry Trends and Development Forecasts

  • Analyze Market Trends index-en.md?

    • Process Market Data Through Data Analysis Tools or Software

    • Discover and Explain Market Trends to Guide Project Decisions

_Gy

If you have more needs or suggestions about the above content, feel free to provide feedback at any time～

Breadcrumbs

Markdown FansQ「When writing tutorials or guidance documents, for menu sequences, step operations, directory hierarchies and other contents, I hope to have simple and efficient typesetting」

VLOOKA_T2 This is really very Easy for VLOOK™, just combine Markdown's "italic, highlight" these two standard formats to achieve easily.

Applicable Scope ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Syntax

• Set the breadcrumb content to the following format combination: first "italic", then "highlight"

  Shortcut

  Select content, then press Cmd / Control + i to set as italic, then press Cmd / Control + ⇧ Shift + h to set as highlight

• Corresponding Markdown syntax: *==This is breadcrumb content==*

• Supported segment symbols: > / \ -> → ▸ ▶︎

• During editing previews main style, and after exporting to HTML supports:

  • Automatically optimize style for "segment symbols"

  • Click to copy its original information

1. This describes menu sequence example: Menu > File > Export > Export Configuration, can also add text links for certain operations as needed

2. This describes step operation example: Login Account ▸ Preferences ▶︎ Modify Personal Information, can be used to show entry guidance for target operations

3. This describes directory hierarchy example: /Root Directory/Subdirectory 1/Subdirectory 1.1, C:\Program Files\Applications

Breadcrumbs in Tables Example

If you have more needs or suggestions about the above content, feel free to provide feedback at any time～

Scratch Cards

Markdown FansQ「When making training documents with Markdown, hope to hide 'answers' like scratch cards, only showing when clicked」

VLOOKA_T2 This is really very Easy for VLOOK™, just combine Markdown "italic, bold" these two standard formats to achieve easily.

Applicable Scope ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Syntax

1. Set content to be hidden to following format combination: first "italic", then "bold"

Shortcut

Select content, then press Cmd / Control + i to set as italic, then press Cmd / Control + b to set as bold

2. Hint text defaults to ••••_Bk! , to specify just add directly before bold

• Corresponding Markdown syntax: *Hint Text**Hidden Content***

(Supports adding preset color codes after scratch card to specify color, defaults to Gy if not specified)

Scratch Card Examples