Select language ❯ 🇨🇳 简体中文

Donate

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、C＊r、ocean、swingingroi、＊胡、K＊y、行川、＊药、＊山、＊魂、＊士、＊狗、＊R、＊Z、＊川、l＊n、＊朽、＊杰、A＊C、W＊l、＊山、J＊o、韩宗辉、＊星、一叶知秋、d＊、＊军、＊鹏、＊无、H＊t、＊二、＊宇、＊辉、＊秋、＊笑、＊心、整＊9、＊国、＊哥、乌拉、＊龙、远方眼前、＊雩、＊应、＊销、E＊y、…

Your coffee ☕️ keeps VLOOK™ running

_Se

Your coffee ☕️ keeps VLOOK™ running

_Gn

°Code

Code Block Styles

VLOOK™ themes provide the following style enhancements for code blocks

• Directly display the code block language, support current-line highlighting, and integrated display while editing Mermaid diagrams

• Support adding background textures to code blocks through Custom Themes

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!

Availability ••• 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

Availability ••• 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 ❯❯

For feedback:

°Button & Link

Keyboard Keys

Availability ••• 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

A S D F G < > ? + -

ESC Enter ⌘ command ⌥ option

⌃ Ctrl Alt ⇧ Shift 　　　　　　　　　

Button Link

Markdown FansQ「Button 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 link - let's get started!

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Text Button

VLOOK™ implements "text links" to "button link" 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 Centered when standalone](https://github.com/MadMaxChow/VLOOK)**

Tip

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

Icon + Text Button

Besides text-only buttons, images of any size can be added as button icons.
You can then set the desired icon layout for display.

^tab

Text + Image/Icon

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

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

• Effect:

VLOOK VLOOK VLOOK

Icon Only

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

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

• Effect:

Card-Style Link

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 Link 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

This is a simple description of the link

This is a text link

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.

Standard Button link

Card Subtitle 2

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

Secondary Button link

Card Subtitle

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

Super Button link

Cross-reference

Availability ••• Editing× Not Supported_Gy Export HTML✓ Supported_Gn

In-document anchor links, including sections and various Captions, support displaying referenced prefix information (such as section numbers and caption numbers). The example effects are shown below:

• Chapter: °Cover & Back Cover

• Table: Tag (regular style) preset color codes & examples

• Image: Dual-caption image example

• Mermaid diagram: Flowchart example

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

For 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.

Currently, two cover styles are available: "Small Cover" and "Large Cover". Choose the one that best fits your needs:

What's "Small" Cover?

Best suited for short documents or informal publishing scenarios and does not include a back-cover layout.

The cover used in this document is the "Small Cover". You can return to the start of this document to view the effect.

_T1

What's "Large" Cover?

Ideal for longer documents or more formal publishing scenarios, and provides an optional back-cover layout.

The cover used in the introduction document is the "Large Cover". You can open this link to view the effect.

_T1!

Small Cover

Availability ••• Editing× Not Supported_Gy Export HTML✓ Supported_Gn

1. First, add a YAML Front Matter to the document via Typora > Paragraph > YAML Front Matter

2. Then configure the cover-related fields inside the YAML section following standard YAML syntax. The settings will take effect after exporting to HTML.

( You can scroll to the very beginning of this document to directly preview the demo effect of the "small cover" )

The "Small Cover" supports the following YAML fields

xxxxxxxxxx
9
1
---
2
title: Title text
3
author: Author
4
date: Publication date. Example: 2025-11-11
5
version: Version information. Example: V1.0.1
6
copyright: Copyright information. Example: Copyright © 1981 Example Corp. All rights reserved.
7
rights: Rights statement. Example: This work is licensed under the MIT License. See the LICENSE file for details.
8
tags: Tag values, separated by commas. Example: tag1, tag2, tag3
9
---

Large Cover

Availability ••• 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`V2026.7`*<br><br>**MAX°Mengzhao**<br>*Copyright © 2016-2026 MAX°DESIGN. All rights reserved.*

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 VIP Themes

For 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!

Availability ••• 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!

Availability ••• 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

• Add 4 horizontal dividers to enable "⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎ Five-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!

Single-line Five-column Blockquote Example

Five-column Subtitle 1

Row 1 Column 1

Button

_Rd!

Five-column Subtitle 2

Row 1 Column 2

Button

_Gn!

Five-column Subtitle 3

Row 1 Column 3

Button

_Bu!

Five-column Subtitle 4

Row 1 Column 4

Button

_Pu!

Five-column Subtitle 5

Row 1 Column 5

Button

_Bn!

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

Blockquote Columns (Within Lists)

Markdown Fan Q "I’d like to display blockquotes in columns within a list, so the layout can be more flexible for column formatting."

VLOOK A_T2 Just use the "Blockquote Columns" feature inside the list items!

Availability ••• Editing ✓ Supported_Gn Export to HTML ✓ Supported_Gn

(Before creating blockquote columns, remove the numbering from the list items.)

1. List 1

   ---

   Blockquote Column (List) 1-1

   Blockquote Column (List) 1-2

2. List 2

   ---

   ---

   Blockquote Column (List) 2-1

   Blockquote Column (List) 2-2

   Blockquote Column (List) 2-3

3. List 3

   ---

   ---

   ---

   Blockquote Column (List) 3-1

   Blockquote Column (List) 3-2

   Blockquote Column (List) 3-3

   Blockquote Column (List) 3-4

GitHub Style Alert Columns

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

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

Example of GSA Nested in Blockquotes

Below is GitHub Style Alert:

Note

Highlights information that users should take into account, even when skimming. GitHub Style Alert

For 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-reference and jumping within documents～

Availability ••• 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_==* .

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")

Advanced Usage of Image Captions

1. Do not display the image caption text, only show the caption category (e.g., Figure 1, Figure 2, etc.)

   • You can configure this by using the capmini option under Plugin Tuning Parameters to display only the caption category.

2. Display the caption category even when no caption text is specified for the image

   • You can configure this by using the capblank option under Plugin Tuning Parameters to force the caption category to be shown when the caption text is empty.

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 ❯

For 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!

Availability ••• 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

The following demonstrates how consecutive tables, illustrations, blockquotes, code blocks, videos, audio, formulas, and GitHub Style Alerts are presented in the form of "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 VIP 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.

Availability ••• 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, button, 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 Fancy, Geek, Hope, Joint, Solaris, Thinking 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

For 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!

Availability ••• 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.

Availability ••• 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

Availability ••• 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