Select language ❯ 🇨🇳 简体中文

Some Conventions

#Magic

#Magic_CyOgPu, pronounced as /sharp magic/

What is "#Magic"?

After multiple iterations and user feedback, VLOOK™ has explored practical and elegant methods for quick image and video typesetting.

We can activate corresponding typesetting "magic" by adding URL anchors at the end of image or video addresses～

The usage method is by adding URL anchors "#specific magic" at the end of image paths

Example:

• Images in Markdown are generally in this format: ![Alt text](image address.png)

• If we want to set the image as an icon style, we can add #icon to scale to 200px width, we can add #200w ～

Quick Typesetting Applications for Images

Display Layout, Scaling, Filter, Grid Background, Edge Padding, etc.～

Quick Typesetting Applications for Videos

Embedded videos from streaming platforms, specified as "Vertical Display", etc.

Format Combinations and Special Cases

VLOOK™ combines and specially uses conventional Markdown formats to innovatively achieve various personalized and practical typesetting capabilities.

^tab

Highlight

The highlight color will adapt based on Theme Color, Text Color, Text Gradient, Blockquote Coloring, GitHub Style Alert.

Level 1 Heading, Level 6 Heading

Using Markdown's level 1 heading # Heading and level 6 heading ###### Heading in specific positions in the document achieves:

• "Front and Back Covers"

• "Blockquote Subtitle"

Markdown Conventional Format Combinations

Preset Color Code

< One >

Below are VLOOK™'s predefined color codes, where the two-character English abbreviations are color code markers, such as: Ye Aq T1, etc.

< Two >

Will be used in subsequent Text Color, Text Gradient, Cell Coloring, Tags, Scratch Card, Blockquote Coloring, etc.

< Three >

Supports "Regular" and "Emphasized" styles. Adding an English exclamation mark "!" after the color code specifies the emphasized style, e.g.: Ye!

Syntax

Set the "Color Code" to the following format combination: first "Italic", then "Subscript"

• Corresponding Markdown format syntax:

  • Single color: _~Color Code~_, e.g.: _~Ye~_ _~Aq~_ _~T1~_

  • Gradient color: _~Color Code 1Color Code 2...Color Code n~_, e.g.: _~YeOg~_ _~RdGnBuRo~_

• After correctly setting the format combination, a special style will be displayed as a hint during editing (or after gaining focus), and it will take effect only after exporting the HTML file.

Donate

Thanks to the patrons who donated to support 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

°Text

Text Color

Markdown FansQ「Specifying different colors for text is probably the second most requested feature by Markdown fans after table typesetting!」

VLOOKA_T2 achieves this easily through a concise method, let's take a look～

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

How to Make Your Markdown Document Text Colors More Vibrant (Bilibili)

^tab

Text Color for "Specified Format"

• Add predefined color codes after text with formats like "bold", italic, highlight, underline., e.g.: "red" by _~Rd~_

• For specific color code syntax, refer to Preset Color Code

Text Color for "Entire Paragraph"

The syntax is consistent with the left "Text Color for Specified Format", the difference is adding Preset Color Code at the very beginning of the paragraph. After being correctly recognized, a paragraph marker "¶_T2" will appear before the color code.

Text Color Example in Normal Paragraphs

_GdThis is a paragraph where you can use predefined color codes to color the entire paragraph with color codes.

1. Mark specified bold text content_Rd in the paragraph with color code combinations, also supporting special symbols: ●_Rd●_Ye●_Gn;

2. Or specified italic text content_Bu with color code combinations for marking_Wt;

3. Or specified highlighted text content_Ro with color code combinations for marking;

4. Or specified underlined text content_Pu with color code combinations for marking;

5. Or specified^superscript content^_Gn,~subscript content_{_}Gn~_ with color code combinations for marking.

Text Color Example in Blockquotes

1. Apply color codes to specified bold text content_Rd in the paragraph, also supporting special symbols: ●_Rd●_Ye●_Gn;

2. Or apply color codes to specified italic text content_Gn;

3. Or apply color codes to specified highlighted text content_Ro;

4. Or apply color codes to specified underlined text content_Pu.

_T1This is a paragraph where you can use predefined color codes to color the entire paragraph with color codes.

Preset Color Code and Examples for Text Color

Text Gradient

Markdown FansQ「Gradient text colors are becoming increasingly popular, it would be perfect if this could be supported too!」

VLOOKA_T2 The new Preset Color Code support gradient colors, with a natural and intuitive writing style that will definitely impress you～

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

• All rules are the same as "Text Color", just change the color code from 1 to multiple consecutive inputs～

• For example: "Red-Green_RdGn" gradient is input as _~RdGn~_, "Red-Yellow-Green_RdYeGn" gradient is input as _~RdYeGn~_

• For specific color code syntax, refer to Preset Color Code

Gradient Text Example in Normal Paragraphs

_LmOgGnRdThis is a paragraph using predefined color codes at the very beginning to color the entire paragraph.

1. Mark specified bold text content_RoBuAq in the paragraph with color code combinations as gradient_RoBuAq;

2. Or specified italic text content_OgRo with color code combinations as gradient_OgWt;

3. Or specified highlighted text content_BuAq with color code combinations as gradient_BuAq;

4. Or specified underlined text content_SeRo with color code combinations as gradient_SeRo;

5. Or specified^superscript content^_RdGn,~subscript content_{_}RdGn~_ with color code combinations as gradient_RdGn.

Gradient Text Example in Blockquotes

1. Mark specified bold text content_RoBuAq in the paragraph with color code combinations as gradient_CySe;

2. Or specified italic text content_SeGd with color code combinations as gradient_OgRo;

3. Or specified highlighted text content_AqPu with color code combinations as gradient_BuAq;

4. Or specified underlined text content_OgBk with color code combinations as gradient_SeRo.

_LmOgGnRdThis is a paragraph using predefined color codes at the very beginning to color the entire paragraph.

For feedback:

°Paragraph

Paragraph Indentation

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

In Markdown document editing, the first-line indentation of a paragraph is usually created using the Tab key. VLOOK™ provides optimized control for Chinese environments by fixing the indentation width to the equivalent of two Chinese characters.

This is an example of paragraph indentation inside a blockquote. This is an example of paragraph indentation inside a blockquote. This is an example of paragraph indentation inside a blockquote. This is an example of paragraph indentation inside a blockquote.

Paragraph Indentation Inside a Collapsed Blockquote

This is an example of paragraph indentation inside a collapsed blockquote. This is an example of paragraph indentation inside a collapsed blockquote. This is an example of paragraph indentation inside a collapsed blockquote.

This is an example of an indented English paragraph inside a blockquote. This is an example of an indented English paragraph inside a blockquote.

Paragraph Styles

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Used to meet the need for personalized formatting of an entire paragraph, creating a differentiated style compared to regular body text.

Simply select all the content of the paragraph first, then apply the basic Markdown formatting (bold, underline, italic, highlight), such as: **entire paragraph content** ==entire paragraph content== , etc.

Paragraph Italic

Provides support for styling an entire paragraph with a distinct appearance from the main body text — typically used to de-emphasize content or format it as a reference note. Example:

~This is a paragraph that needs to be visually distinct from the main content, de-emphasized, or used as a reference note. Everything else remains unchanged.~

Italic paragraph style within blockquotes

(Currently not available)

The above is the effect after applying "paragraph Italic" to the entire paragraph. (To disable this style, simply add a space at the end)

Paragraph Bold

Meets the need to center and emphasize the entire paragraph content. Example:

～This is a paragraph that needs strong emphasis, appearing in center alignment. Bold, larger font size, centered, others unchanged～

Bold paragraph style within blockquotes

(Currently not available)

The above is the effect after applying "paragraph bold" to the entire paragraph. (To disable this style, simply add a space at the end)

Paragraph Underline

Meets the need to slightly emphasize the entire paragraph content, with visual separation from subsequent content but still related. Example:

～This is a paragraph with slight emphasis, visual separation from subsequent content, but still related. Larger font size, centered, others unchanged

Underline paragraph style within blockquotes

～This is a paragraph with slight emphasis, visual separation from subsequent content, but still related. Larger font size, centered, others unchanged

The above is the effect after applying "underline" to the entire paragraph. (To disable this style, simply add a space at the end)

Paragraph Highlight

Meets the need for the entire paragraph content to be displayed in a more personalized, more emphasized quote style, with visual separation from preceding/following content. Example:

～This is a paragraph with more personality, more emphasis_RdPuRo, visual separation from preceding/following content. Larger font size, centered, others unchanged～

Hightlight paragraph style within blockquotes

(Currently not available)

The above is the effect after applying "highlight" to the entire paragraph. (To disable this style, simply add a space at the end)

For feedback:

°Table

Cell Merging

Markdown FansQ「What's the most requested feature by Markdown fans? ———— Cell merging!」

VLOOKA_T2 Now you can easily achieve this — Wow! Wow!～Cheers from Markdown fans!!!

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

Cross-column Merge (Horizontal Merge)

Input column merge marker == in the cell to be merged, and this cell will merge with the adjacent cell to the left, and so on.

_T1

Cross-row Merge (Vertical Merge)

Input row merge marker : in the cell to be merged, and this cell will merge with the adjacent cell above, and so on.

_T2

^tab

Example of Normal Cell Horizontal and Vertical Merging

Header Vertical and Horizontal Merge Example-1

Header Vertical and Horizontal Merge Example-2

Table Column Formatting

Basic

Markdown FansQ「How to quickly set whole column formatting (bold, highlight, italic) for Markdown tables?」

VLOOKA_T2 SO EASY～ Just set the corresponding format in the header using standard Markdown or GFM format syntax.

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

Review standard Markdown or GFM format syntax:

**bold**, *italic*, ==highlight==

Basic Column Formatting Example

More Basic Column Formatting Examples

^tab

Nested Basic Column Formatting

Nested Basic Column Formatting (Multi-line Header)

Numeric

Markdown FansQ「Besides regular formats, are there more advanced format requirements? Numbers, percentages, currency... none can be missing!」

VLOOKA_T2 Supports automatic formatting for the above numeric content across entire columns! The approach remains elegant and very VLOOK!

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

Set the table column alignment to "right-align" to automatically recognize different numeric content and automatically format it!

"Normal Numbers" Auto-Formatting

• Uses "DIN" style font specifically for numbers

• Adds thousand separators and displays decimals in smaller font size

• Automatically prefixes numbers with "plus +" or "minus -", highlighted in different colors

_Rd!

Normal Numbers Example

"Percentage" Auto-Formatting

• Inherits "Normal Numbers" format automatically

• Displays percentage sign % in smaller font size and visually subdued, with progress bar showing corresponding percentage value

_Bu!

Percentage Column Format Example

"Currency" Auto-Format

• Inherits "Normal Numbers" format automatically

• Aligns currency symbols (e.g.: ¥ $), or currency abbreviations (e.g.: CNY USD HKD, etc.) to the left and visually subdues them

_Bn!

Currency Column Format Example

Checkbox

Markdown FansQ「For table column formatting, besides typesetting formats, what if we want to support checkboxes (tick boxes)?」

VLOOKA_T2 Although the requirements are higher, it can also be achieved by automatically setting the entire column to "checkbox" format!

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

Add [] before the corresponding table column header content (e.g., []Required Field) to automatically set the column to unselected state.

To independently specify different states for a cell's checkbox, you can fill in the specified marker symbol at the very beginning of the cell content, such as:

• StateSelected: Add Y at the beginning of the cell content (case insensitive)

• StateIndeterminate: Add ? at the beginning of the cell content (both Chinese and English question marks are supported)

• StateUnselected: Empty cell, or add N at the beginning of the cell content (case insensitive)

"Checkbox" Column Format Example

Freeze Table Column

Markdown Fan Q 「When a table contains many columns and requires horizontal scrolling, it becomes difficult to distinguish data across rows. I hope the first column can be frozen for more efficient table viewing.」

VLOOK A_T2 VLOOK™ provides a way to freeze the first column of tables — and it works during editing!

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

Automatic Mode (Default)

• While editing, simply set the column header of the first column to bold (see Table Column Formatting) to freeze that column.

• After exporting to HTML, you can unfreeze or refreeze the first column of each table via the table’s Content Assistant.

Full-Enable Mode

• All tables will have their first column frozen by default in both editing mode and exported HTML.

• After exporting to HTML, you can still unfreeze or refreeze the first column of individual tables via the table's Content Assistant.

Freeze Table Row

Cell Coloring

Markdown FansQ「Table column formatting is rich enough, but can we use different background colors to identify individual cells?」

VLOOKA_T2 VLOOK™'s Preset Color Code can be put to use again, same formula, same super easy to use!

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

Color Cell Text

Consistent with the method of coloring entire paragraphs in Text Color, just add Preset Color Code at the very beginning of the cell, and a paragraph marker "¶_T2" will appear before the color code after being correctly recognized, e.g.: red _~Rd~_

Color Cell "Background"

The method is the same as cell text coloring, the difference is using "emphasized" Preset Color Code (e.g.: blue _~Bu!~_).

If "cell text" coloring has been specified, you can add it at the end position_T2

^tab

Example_Cell Coloring (Single Color)

Example_Cell Coloring (Gradient Color)

Table Row Grouping & Folding

Markdown FansQ「Table rows are all at the same hierarchical level, but what if the table data has hierarchical relationships?」

VLOOKA_T2 Supports grouping and hierarchical specification for rows within tables through very concise markers.

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

For subordinate rows, automatic grouping and folding can be achieved by following these rules in the first column of the table row:

• Use Markdown's blockquote syntax >␣ to indicate one level of indentation, with the preceding row as the parent group

• Multiple > indicate multiple levels of indentation, e.g., three levels of indentation >>>␣

^{Note: The ␣ symbol above represents an English space}

^tab

Writing Method as Shown in Column 2 Below

Example 1_Table Row Grouping & Folding

Table Row Grouping & Folding Example

Table Wrapping Layout

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

^tab

For Tables

Default is "auto-wrap" layout, adjusted to "no-wrap" in the following cases:

• Small screens (generally screen width less than 1280px)

• Tables with "Row Grouping & Folding", or tables with more than 7 columns

_T1

For Cells

Fine-tune cell styles for different situations:

• Default minimum cell width is 120px

• Empty cells that are unique in a row or column will display as separator line style

• For tables with row grouping, minimum width of first column is 180px

• When table is in "no-wrap" layout, maximum width for cells with excessive content is 330px

_T2

Columns < 7

Columns ≥ 7

Table Alignment

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

The table alignment (left-aligned, centered) is specified by the selected VLOOK™ theme, and can be customized through Custom Theme Service.

Table Caption & Auto-numbering

About table captions and auto-numbering

Relevant content can be found here ❯❯

Table Summary Row and Column Style

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

• If you want certain rows or columns in a table to be displayed with distinct styles as summary rows or summary columns, simply add an empty row or column, and leave the corresponding cells completely empty;

• After completing the above steps, VLOOK™ will apply summary row and summary column styles in the exported HTML.

For feedback:

°Image

Image Display Layout

Markdown FansQ「How to uniformly size mixed text-image icons and specify images not to be processed as "Figure"?」

VLOOKA_T2 VLOOK™ displays images as "Figure" by default, but can easily switch to more flexible display layouts using "#Magic".

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Add VLOOK™ standard image "#Magic" in the "image address" to implement various non-illustration layouts:

• Image address + #layout identifier

Image Display Layout Identifiers and Descriptions

Icon Layout Examples

icon: VLOOK™ is Open Source China recommended domestic open source project, perhaps one of the best Markdown Typesetting Pluss currently

icon2x: VLOOK™ is Open Source China recommended domestic open source project, perhaps one of the best Markdown Typesetting Pluss currently

icon: VLOOK™ is a G-Star Program Project of AtomGit, and may be one of the best Markdown Typesetting Pluss available today.

icon2x: VLOOK™ is a G-Star Program Project of AtomGit, and may be one of the best Markdown Typesetting Pluss available today.

Logo Layout Examples

Specified as logo mode

Specified as #logo#left mode

After setting to #logo#left mode, achieves left-aligned image + text wrapping effect. Let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK.

Specified as #logo#right mode

After setting to #logo#right mode, achieves right-aligned image + text wrapping effect. Let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK, let me add some filler text Hello VLOOK.

Image Scale

Markdown FansQ「Hope to freely set image scaling size to adapt different sized images in documents」

VLOOKA_T2 Markdown doesn't support image scaling, but now with VLOOK™'s "#Magic" it's easily achievable～

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Add VLOOK™ standard image "#Magic" in the "image address" to implement:

• Image address + #scaling value

Image Scaling Value Descriptions

^tab

Width Scaling by Percentage Examples

^tab

Width Scaling by Pixels Examples

^tab

Height Scaling by Pixels Examples

^tab

Image Rotation

Markdown FansQ「Hope to quickly rotate images directly」

VLOOKA_T2 Markdown doesn't support image rotation, but now with VLOOK™'s "#Magic" it's easily achievable～

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Add VLOOK™ standard image "#Magic" in the "image address" to implement (currently only supports 180 degree rotation):

• Image address + #180deg

Image Rotation Example

Image Flip

Markdown FansQ「Hope to quickly flip images horizontally or vertically」

VLOOKA_T2 Markdown doesn't support image flipping, but now with VLOOK™'s "#Magic" it's easily achievable～

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Add VLOOK™ standard image "#Magic" in the "image address" to implement:

• Horizontal Flip: Image address + #fliph

• Vertical Flip: Image address + #flipv

Image Flipping Example

Image Filter

Markdown FansQ「Hope to add some simple, practical filters to images (e.g. invert, blur, grayscale, vintage)」

VLOOKA_T2 Markdown doesn't support image filters, but now with VLOOK™'s "#Magic" it's easily achievable～

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

^tab

Syntax

Add VLOOK™ standard image "#Magic" in the "image address" to implement:

• Invert: Image address + #invert

• Blur: Image address + #blur

• Vintage: Image address + #aged

• Grayscale: Image address + #gray

Advanced Usage

If you want filtered images to restore to original when hovered, it's very Easy～

Just add an English exclamation mark ! after the above mentioned "#Magic"～

Image Filter Examples

Hover to Restore Original Examples

Image Grid Background

Markdown FansQ「When using engineering or design images, hope to automatically add uniform grids as background」

VLOOKA_T2 Through "#Magic", you can add specified grid backgrounds for transparent background images (like PNG, SVG).

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Add VLOOK™ standard image "#Magic" in the "image address" to implement:

• Image address + #grid background identifier

This feature automatically adapts to images also using Dark Mode.

Image Grid Background Identifiers and Descriptions

Line Grid Background Examples

^tab

Block Grid Background Examples

^tab

Image Edge Padding

Markdown FansQ「My figure have no edge padding, visually looking crowded, how to adjust?」

VLOOKA_T2 Through "#Magic" this niche personalized typesetting challenge can be easily handled～

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Syntax

Add VLOOK™ standard parameter in "image address" to enable this feature (default adds 20px padding to image edges):

• Image address + #padding, example: ![Image Caption](xxx.png#padding)

Postcard

Markdown FansQ「Most HTML generated by Markdown is static, can it bring some more modern designs in terms of interactivity?」

VLOOKA_T2 With "#Magic"加持, automatic image-text typesetting reaches new heights, monotonous images instantly become lively～

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

^tab

Postcard Syntax

Add VLOOK™ standard image "#Magic" in the "image address" to implement:

• Hover Mode¹: Image address + #card

• Flat Mode²: Image address + #cardd

When a theme-colored border appears at the bottom of the image, it means it's correctly enabled. After exporting HTML, supports browsing and searching in illustration index.

Tip

If image edges are white or you want images to stand out, you can append #border to achieve this

Postcard Title and Body

Standard Markdown image syntax:

![Alt text](xxx.png#card "Title text")

Note that card title content comes from "Title text" in the image, while card body content comes from "Alt text" in the image.

 

Tip

To customize body content formatting, you can add a "blockquote" below the image, whose content will replace "Alt text".

^tab

Adding Postcard to Any Ordinary Image (Single Card) Example

Adding Postcard to Any Ordinary Image (Single Card+Border) Example

Adding Postcard to Any Ordinary Image (Dual Card) Example

Adding Postcard to Any Ordinary Image (Dual Card+Border) Example

Postcard with Blockquote Coloring (Dual Card) Example

_Gn

Advanced Usage

• If you want to typeset Postcard more neatly in columns_T1T2, just place "Postcard" inside colored blockquotes

• If blockquotes specify background colors_T1T2, will adapt for display, same familiar recipe～

• After adding #border to images, when image width is too small to fill column space, you can additionally add #fill parameter,

• If image width is small, you can try adding #fitmax to image address to make hover-displayed cards wider, see example ❯❯

_Bk!

Single Card Example with Blockquote Columns

With "Nature, Humanity, Science, Civilization"_RdGnSe as its theme, this non-profit public welfare organization serves as a social science activity venue for public science education and a demonstration site for science tourism leisure.

View on Baidu Baike View on Baidu Baike

---

_{Guangdong Science Center cost 1.9 billion RMB and took nearly 5 years to build, opening on September 26, 2008.}

_T1

_Mn

Flat Mode Example with Blockquote Columns

With "Nature, Humanity, Science, Civilization"_LmOgYe as its theme, this non-profit public welfare organization serves as a social science activity venue for public science education.

View on Baidu Baike View on Baidu Baike

---

_{Guangdong Science Center cost 1.9 billion RMB and took nearly 5 years to build, opening on September 26, 2008.}

_Bu

Pel^tícan^hú (also called gannets or river birds, large swimming birds in the order Pelecaniformes, family Pelecanidae, with broad wings, wide wingspan, powerful flapping), flying over Medicine Lake National Wildlife Refuge in Montana. The bird in the foreground has a horny plate on its beak that grows during mating season and falls off when the season ends.

_{— Photo: KLAUS NIGGE, NAT GEO IMAGE COLLECTION}

_Gn

Image HD Screen Adaptation

Markdown FansQ「Images appear blurry on HD screens, but Markdown image syntax doesn't support different resolution image sets, what to do?」

VLOOKA_T2 While keeping Markdown image syntax unchanged, easily display HD resolution images on high-resolution screens!

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

Add VLOOK™ standard parameters in "image address" to enable this feature.

^tab

Not Using "Image Hosting"

---

Syntax Without Image Hosting

srcset=@2x,@3x

Example

![](my-image.png?srcset=@2x)

Using "Image Hosting"

---

Syntax for using "Image Hosting" (random naming)

srcset=<2x image path>@2x,<3x image path>@3x

Example

![](2WY6eq.jpg?srcset=3yEIwd.jpg@2x)

 

^tab

Image Adaptation for Dark Mode

Markdown FansQ「When the system enables Dark Mode, the images appear somewhat inharmonious. What should I do?」

VLOOKA_T2 Supports specifying adaptation methods for images in Dark Mode, currently supporting "invert colors" and "replace" to meet different needs!

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

Invert Color Adaptation

Particularly suitable for "black/white/gray" type images

Add VLOOK™ standard URL parameters in "image address":

• URL parameter: darksrc=invert

---

You can now click the / / in the bottom right corner (shortcut D), then observe the changes in the two images below.

^tab

Replacement Adaptation

In the "image address", add VLOOK™ standardized URL parameters to achieve:

URL parameters:

• Normal resolution image: darksrc=xxx.jpg

• High-definition screen resolution adaptation (optional): darksrcset=..., the usage of this parameter is consistent with srcset for high-definition screen adaptation, see "Image HD Screen Adaptation"

---

You can now click the bottom right (shortcut D), then observe the changes in the two images below～

^tab

^tab

Image Silhouette

Markdown FansQ「Hope images in documents can automatically follow the document theme color or text color, without needing to recreate multiple versions of image resources」

VLOOKA_T2 Can target transparent background png or svg images, displaying their outlines with specified colors.

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

In the "image address", add VLOOK™ standardized URL parameters to achieve:

• URL parameter: fill=color identifier

Image Silhouette URL Parameters (fill) Identifiers and Descriptions

Image Silhouette Mixed Layout Example

1. Different content using text color identifier will automatically adapt:

   • Adapt to normal text color: Markdown is a text markup language specifically for web writing

   • Adapt to link text color: What is Markdown ?

   • Adapt to button link color: Markdown Markdown

   • Adapt to blockquote (colored), GitHub Style Alert colors

2. Using specified Preset Color Code:

Image Silhouette Specified as Preset Color Code Example

Color	Color Code	Image Silhouette Effect Example
Wine Red	WnWn	Markdown icon replaced with specified color
Red	RdRd	Markdown icon replaced with specified color
Orange	OgOg	Markdown icon replaced with specified color
Yellow	YeYe	Markdown icon replaced with specified color
Lime Green	LmLm	Markdown icon replaced with specified color
Green	GnGn	Markdown icon replaced with specified color
Mineral Green	MnMn	Markdown icon replaced with specified color
Olive Green	OlOl	Markdown icon replaced with specified color
Aqua Green	AqAq	Markdown icon replaced with specified color
Cyan	CyCy	Markdown icon replaced with specified color
Blue	BuBu	Markdown icon replaced with specified color
Sea Blue	SeSe	Markdown icon replaced with specified color
Lavender Purple	LaLa	Markdown icon replaced with specified color
Vine Purple	VnVn	Markdown icon replaced with specified color
Purple	PuPu	Markdown icon replaced with specified color
Rose Pink	RoRo	Markdown icon replaced with specified color
Pink	PkPk	Markdown icon replaced with specified color
Gold	GdGd	Markdown icon replaced with specified color
Brown	BnBn	Markdown icon replaced with specified color
Gray	GyGy	Markdown icon replaced with specified color
Black	BkBk	Markdown icon replaced with specified color
Theme Primary Color	T1T1	Markdown icon replaced with specified color
Theme Secondary Color	T2T2	Markdown icon replaced with specified color

Blockquote Coloring and Title Example

This is Markdown's Level 6 Heading

Here is the main content.

_Pk

GIF Playback Control

Using online videos can be large in size and vulnerable to attacks. Often converted to GIF for suitability, but they automatically play causing unnecessary traffic.

Achieve more friendly interaction and save traffic by implementing click-to-play similar to videos.

In addition to GIF, it's recommended to include a cover image.

Then add #gif after the image address, clicking will play the .gif file with the same name.

![Title](xxx.png#gif)

Image Comparison

COMMING SOON...

---

_Gy!

Image Gallery

COMMING SOON...

_Gy!

Image Alignment

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

• Image alignment (left, center) is specified by the selected VLOOK™ theme, support custom alignment through Custom Theme Service;

• Includes cases where there's only one image in a paragraph, images with links, etc., but excludes icon layout images.

Image Caption & Auto-numbering

About image captions and auto-numbering

Related content see here ❯❯

For feedback:

°List

List Auto-numbering & Style

In addition to the previously mentioned List Columns, the following enhancements are provided:

1. Unified processing of bullet symbols for ordered and unordered lists, applying theme colors;

2. Editing focus and mouse hover in exported HTML both support highlighting current list symbols;

3. Support personalized symbol styles for first-level ordered lists :

   1. Temporarily not applicable to ordered lists within GitHub Style Alert;

   2. Ordered lists within quotes need preceding content (like blank lines, subtitles, etc.).

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Auto-numbering for Ordered Lists in Blockquotes

1. Auto-numbering styles for ordered lists:

   1. Force-set symbols for each level, applying theme colors.

      1. Third-level ordered list

         1. Fourth-level ordered list

            1. Fifth-level ordered list

               1. Sixth-level ordered list

Top 20 Ordered List Styles

1. Top 9 styles

2. Top 9 styles

3. Top 9 styles

4. Top 9 styles

5. Top 9 styles

6. Top 9 styles

7. Top 9 styles

8. Top 9 styles

9. Top 9 styles. If content is too long it will auto-wrap, check the indentation after wrapping.

10. Top 10-19 styles. If content is too long it will auto-wrap, check the indentation after wrapping.

11. Top 10-19 styles

12. Top 10-19 styles

13. Top 10-19 styles

14. Top 10-19 styles

15. Top 10-19 styles

16. Top 10-19 styles

17. Top 10-19 styles

18. Top 10-19 styles

19. Top 10-19 styles

20. Top 20 styles

_T2

Auto-numbering for Unordered Lists in Blockquotes

• Auto-numbering styles for unordered lists:

  • Force-set symbols for each level, applying theme colors.

    • Third-level unordered list

      • Fourth-level unordered list

        • Fifth-level unordered list

          • Sixth-level unordered list

_Gd!

1. This is auto-numbering style for ordered lists in normal text:

   1. Force-set symbols for each level, applying theme colors.

      1. Third-level ordered list

         1. Fourth-level ordered list

            1. Fifth-level ordered list

               1. Sixth-level ordered list

• This is auto-numbering style for unordered lists in normal text:

  • Force-set symbols for each level, applying theme colors.

    • Third-level unordered list

      • Fourth-level unordered list

List Columns

About column typesetting for lists

Related content see here ❯❯

Task List Style

Markdown FansQ「The default generated task list style is the browser's standard checkbox style, inconsistent with the theme and enhanced typesetting effects～」

VLOOKA_T2 VLOOK™ has made multiple style and detail adaptations for this situation, making the overall to detailed visuals more harmonious and consistent.

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

Overall task progress: ?

• 1. Analyze target market demand ?

  • Survey target customer groups ?

    • Develop questionnaire or face-to-face interview plan

    • Collect customer needs and preference information for products/services

  • Research competitors ?

    • Analyze competitor products, pricing strategies and market share

    • Identify competitor strengths/weaknesses and compare with own

• 2. Collect market data ?

  • Review industry reports and data ?

    • Review industry reports and statistics published by industry associations

    • Collect information on industry trends and development forecasts

  • Analyze market trends ?

    • Process market data through analysis tools/software

    • Identify and explain market trends to guide project decisions

For feedback:

°Blockquotes

Blockquote Subtitle

Markdown FansQ「Want to add a subtitle within a blockquote, but using hierarchical headings directly isn't quite appropriate」

VLOOKA_T2 Generally the first paragraph in a blockquote serves as the subtitle, so setting the entire paragraph content as bold or highlighted automatically renders as a "blockquote subtitle" style!

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

^tab

Syntax

Set the first line in a blockquote as "bold" or "highlight".

Also supports adding "icon layout" images before the subtitle in a standalone line for richer typesetting options～

Blockquote Subtitle Example

​x
1
> **Here is the subtitle for this blockquote**
2
> ---
3
> xxxxx
4

5
> ==Here is the subtitle for this blockquote==
6
> ---
7
> xxxxx

Example Effect Below:

Bold-Set Blockquote Subtitle

Other paragraph content 1 within this blockquote

Other paragraph content 2 within this blockquote

Highlight-Set Blockquote Subtitle

Other paragraph content 1 within this blockquote

Other paragraph content 2 within this blockquote

For more subtitle styles, see Blockquote Coloring ❯❯

Blockquote Columns

About blockquote column typesetting

Relevant content see here ❯❯

Blockquote Coloring

Markdown FansQ「Hope to create banners or boards in Markdown documents to write important things～」

VLOOKA_T2 VLOOK™'s Preset Color Code come into play again, same formula, same super usability! Meets practical multi-color "blockquote" typesetting needs!

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

^tab

Syntax

Add corresponding color code _~Color Code~_ in a standalone line within the blockquote (recommended in the last line), e.g.: _~Rd~_

Where: Color Code specifies the Preset Color Code used for this blockquote. When correctly recognized, a blockquote coloring marker will appear before the color code.

• Default is "Outline" style;

• To specify as "Color Block" style, use "Emphasized" predefined color codes (add English exclamation mark "!" after Color Code, e.g.: _~Rd!~_).

Normal Blockquote

Main Button Secondary Button

More Information

• This is a task list item

• This is an unordered list item

1. This is an ordered list item

Blockquote Coloring

Color Code Wn　LearnColor Code ℹ️　Main Button Secondary Button

More Information

• This is a task list item

• This is an unordered list item

1. This is an ordered list item

_Wn

[... Additional blockquote coloring examples continue in same pattern ...]

Blockquote Folding

Markdown FansQ「When writing Markdown documents, for some long blockquote content, hope it can exist in folded form by default, and click to open when needed.」

VLOOKA_T2 By extending the writing method of Markdown blockquotes >, achieves dynamic folding/unfolding of blockquote content!

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Syntax: > ###### title, which means setting a level-6 heading as the first line content of a standard blockquote, serving as the title displayed when collapsed.

Where:

title: The title corresponding to the collapsed content. After being correctly recognized, a collapse indicator will appear before the level-6 heading, and the content will be automatically collapsed. Clicking it will expand the content for viewing and editing. The same interactive behavior will also be preserved after exporting to HTML.

(When using this syntax, all content inside the blockquote except the title will become the collapsed section.)

Practical Application Example

What is Syllogism?

Syllogism is a simple deductive reasoning in logic. It contains:

• Major Premise A general principle

• Minor Premise A specific statement subordinate to the major premise

• Conclusion_T2! The derived specialized statement conforms to the general principle's conclusion

What is the MECE Principle?

MECE^[[me_see]] analysis stands for Mutually Exclusive Collectively Exhaustive, meaning "no overlaps, no gaps" in Chinese.

Here are five classification methods of MECE:

Dichotomy

Dichotomy is common in daily life, essentially dividing things into A and non-A parts, such as "day/night", "male/female", "domestic/foreign", "internal/external", etc.

Process Method

The process method breaks down procedures according to their timeline, processes, or sequences.

Example

The production of cloisonné can be divided into seven steps: base making, wire inlaying, firing, enamel filling, enamel firing, polishing, and gilding.

Element Method

The element method is mainly used when things consist of certain components, dividing a whole into different parts; however, when decomposing elements, maintain dimensional consistency to avoid overlaps or gaps.

Example

A library can be divided by floor dimension: first floor, second floor, third floor; or by functional areas: information service area, collection area, reading area, public activity area, office area; but cannot mix floor and functional area dimensions, otherwise it violates the MECE principle.

Formula Method

The formula method classifies elements according to designed formulas. If the formula holds, then the element classification complies with MECE.

For example: GMV = Traffic × Average Order Value

Matrix Method

The matrix method classifies or divides things using a two-dimensional matrix, such as the common urgent/important classification in time management: urgent and important, urgent but not important, not urgent but important, not urgent nor important.

Example Markdown Source Content

xxxxxxxxxx
7
1
> ###### What is Syllogism?
2
>
3
> Syllogism is a simple deductive reasoning in logic. It contains:
4
> 
5
> - **Major Premise**: A general principle
6
> - **Minor Premise**: A specific statement subordinate to the major premise
7
> - **Conclusion**: The specific conclusion derived from the premises that conforms to the general principle

Blockquote Typesetting Subdivision

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

Example of Nested Blockquotes in Blockquotes

The style of normal blockquotes nested within blockquotes will automatically adjust to a "minimalist" style, as follows:

This is a normal blockquote nested within a blockquote

The style of normal blockquotes nested within blockquotes will automatically adjust to a "minimalist" style, as follows:

This is a collapsible blockquote nested within a blockquote

Collapsed content

Example of Column Blockquotes Nested in Blockquotes

The style of "blockquote columns" nested within blockquotes will automatically adjust to a "prominent" style, as follows:

---

This is "blockquote column" 1 nested within a blockquote

This is "blockquote column" 2 nested within a blockquote

Example of Blockquotes Nested in Lists

• Normal blockquotes nested within unordered or ordered lists will adjust to a "self-adapting width" style and won't be converted by default (see quote in Plugin Tuning Parameters), as follows:

  Normal Blockquote

  This is content of a normal blockquote

• "Blockquote coloring" nested within unordered or ordered lists will adjust to a "self-adapting width" style, as follows:

  Blockquote Coloring

  This is a blockquote coloringtheme secondary color_T2, color code T2　Learn aboutcolor codesℹ️

  _T2

For feedback:

°Chapter Headings

Heading Style

VLOOK™'s Built-in Themes provide rich choices for document headings, along with various automatic numbering formats

For more personalized heading styles (e.g., colors, gradients, borders, padding, etc.) or custom automatic numbering formats, you can subscribe to Custom Theme Services .

Explore More About VIP Themes

Automatic Heading Numbering

Markdown FansQ「Hope to customize automatic heading numbering in documents to adapt to specific document styles and heading content organization」

VLOOKA_T2 VLOOK™ provides very practical and personalized heading numbering format options that can easily meet the personalized requirements of different documents for heading numbering formats.

Availability ••• Editing✓ Supported_Gn Export HTML✓ Supported_Gn

After using the VLOOK™ plugin, it supports automatic numbering of chapter headings in documents by default. The default automatic numbering format is Arabic numerals, such as 1. Chapter Heading 3.2.5 Chapter Heading.

• All VLOOK™ themes automatically apply hierarchical numbering to Level 1 ~ 5 headings;

• Because Level 6 headings are used in VLOOK™ for Front and Back Covers, paragraph subheadings, etc., they are not within the automatic numbering range.

You can specify through "Plugin Preset Options" vlook-header-autonum to take effect after exporting HTML. The formatting examples are as follows:

Custom Heading Automatic Numbering Format Examples

xxxxxxxxxx
3
1
---
2
vlook-header-autonum: Level1{{Prefix#Format#Suffix}},Level2{{Prefix#Format#Suffix}},...,Level5{{Prefix#Format#Suffix}}
3
---

^tab

Options Explanation for Custom Title Auto-numbering Format