master

分支 (1)

标签 (58)

管理

管理

master

V2026.3

V2026.1

V2025.10.1

V2025.10

V30.1

V30.0

V29.0

V28.1

V28.0

V27.0

V26.1

V26.0

V25.0

V24.2

V24.1

V24.0

V23.0

V22.0

V21.1

V21.0

VLOOK
/
docs
/
guide3-en.html

<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'><style type='text/css'>html {overflow-x: initial !important;}</style>
<style type='text/css'  id="style-base">:root { --bg-color: #ffffff; --text-color: #333333; --select-text-bg-color: #B5D6FC; --select-text-font-color: auto; --monospace: "Lucida Console",Consolas,"Courier",monospace; --title-bar-height: 20px; }
.mac-os-11 { --title-bar-height: 28px; }
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI Emoji", "SF Pro", sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { white-space: pre-wrap; }
body { margin: 0px; padding: 0px; height: auto; inset: 0px; font-size: 1rem; line-height: 1.428571; overflow-x: hidden; background: inherit; }
iframe { margin: auto; }
a.url { word-break: break-all; }
a:active, a:hover { outline: 0px; }
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 36px; }
#write.first-line-indent p { text-indent: 2em; }
#write.first-line-indent li p, #write.first-line-indent p *, #write.first-line-indent svg * { text-indent: 0px; }
#write.first-line-indent li { margin-left: 2em; }
.for-image #write { padding-left: 8px; padding-right: 8px; }
body.typora-export { padding-left: 30px; padding-right: 30px; }
.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
.typora-export .task-list-item input { pointer-events: none; }
@media screen and (max-width: 500px) {
  body.typora-export { padding-left: 0px; padding-right: 0px; }
  #write { padding-left: 20px; padding-right: 20px; }
}
#write li > figure:last-child { margin-bottom: 0.5rem; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; image-orientation: from-image; }
button, input, select, textarea { color: inherit; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-width: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; position: relative; }
#write svg h1, #write svg h2, #write svg h3, #write svg h4, #write svg h5, #write svg h6, #write svg p { position: static; }
svg sub, svg sup { position: static; }
.nodeLabel p { padding-right: 2px; padding-left: 2px; }
.typora-export .nodeLabel p { padding-right: 0px; padding-left: 0px; }
foreignObject { overflow: visible; }
p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 4; }
p { orphans: 4; }
li p { orphans: 1; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px; }
thead, tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 32px; }
.CodeMirror-gutters { border-right-width: 0px; border-right-style: none; border-right-color: currentcolor; background-color: inherit; }
.CodeMirror-linenumber { -webkit-user-select: none; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-fences-adv-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
svg { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li blockquote { margin: 1rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
  body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; font-variant-ligatures: no-common-ligatures; }
  #write { margin-top: 0px; border-color: transparent !important; padding-top: 0px !important; padding-bottom: 0px !important; }
  .typora-export * { print-color-adjust: exact; }
  .typora-export #write { break-after: avoid; }
  .typora-export #write::after { height: 0px; }
  .is-mac table { break-inside: avoid; }
  #write > p:nth-child(1) { margin-top: 0px; }
  .typora-export-show-outline .typora-export-sidebar { display: none; }
  figure { overflow-x: visible; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
#write.first-line-indent p > .md-image:only-child:not(.md-img-error) img { left: -2em; position: relative; }
p > .md-image:only-child { display: inline-block; width: 100%; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
.MathJax_ref { fill: currentcolor; }
[contenteditable="true"]:active, [contenteditable="true"]:focus, [contenteditable="false"]:active, [contenteditable="false"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: medium; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { text-decoration: underline; }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
  .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
  .md-toc-h4 .md-toc-inner { margin-left: 5em; }
  .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
  .md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.reversefootnote { font-family: ui-monospace, sans-serif; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.6; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="flow"] svg, [lang="mermaid"] svg { max-width: 100%; height: auto; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom-width: 0px; border-bottom-style: none; border-bottom-color: currentcolor; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: medium; }
.highlight td, .highlight tr { border: 0px; }
mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
.md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit; }
.md-expand mark .md-meta { opacity: 0.3 !important; }
mark .md-meta { color: rgb(0, 0, 0); }
@media print {
  .typora-export h1, .typora-export h2, .typora-export h3, .typora-export h4, .typora-export h5, .typora-export h6 { break-inside: avoid; }
}
.md-diagram-panel .messageText { stroke: none !important; }
.md-diagram-panel .start-state { fill: var(--node-fill); }
.md-diagram-panel .edgeLabel rect { opacity: 1 !important; }
.md-fences.md-fences-math { font-size: 1em; }
.md-fences-advanced:not(.md-focus) { padding: 0px; white-space: nowrap; border: 0px; }
.md-fences-advanced:not(.md-focus) { background: inherit; }
.mermaid-svg { margin: auto; }
.typora-export-show-outline .typora-export-content { max-width: 1440px; margin: auto; display: flex; flex-direction: row; }
.typora-export-sidebar { width: 300px; font-size: 0.8rem; margin-top: 80px; margin-right: 18px; }
.typora-export-show-outline #write { --webkit-flex: 2; flex: 2 1 0%; }
.typora-export-sidebar .outline-content { position: fixed; top: 0px; max-height: 100%; overflow: hidden auto; padding-bottom: 30px; padding-top: 60px; width: 300px; }
@media screen and (max-width: 1024px) {
  .typora-export-sidebar, .typora-export-sidebar .outline-content { width: 240px; }
}
@media screen and (max-width: 800px) {
  .typora-export-sidebar { display: none; }
}
.outline-content li, .outline-content ul { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; list-style: none; overflow-wrap: anywhere; }
.outline-content ul { margin-top: 0px; margin-bottom: 0px; }
.outline-content strong { font-weight: 400; }
.outline-expander { width: 1rem; height: 1.428571rem; position: relative; display: table-cell; vertical-align: middle; cursor: pointer; padding-left: 4px; }
.outline-expander::before { content: ""; position: relative; font-family: Ionicons; display: inline-block; font-size: 8px; vertical-align: middle; }
.outline-item { padding-top: 3px; padding-bottom: 3px; cursor: pointer; }
.outline-expander:hover::before { content: ""; }
.outline-h1 > .outline-item { padding-left: 0px; }
.outline-h2 > .outline-item { padding-left: 1em; }
.outline-h3 > .outline-item { padding-left: 2em; }
.outline-h4 > .outline-item { padding-left: 3em; }
.outline-h5 > .outline-item { padding-left: 4em; }
.outline-h6 > .outline-item { padding-left: 5em; }
.outline-label { cursor: pointer; display: table-cell; vertical-align: middle; text-decoration: none; color: inherit; }
.outline-label:hover { text-decoration: underline; }
.outline-item:hover { border-color: rgb(245, 245, 245); background-color: var(--item-hover-bg-color); }
.outline-item:hover { margin-left: -28px; margin-right: -28px; border-left-width: 28px; border-left-style: solid; border-left-color: transparent; border-right-width: 28px; border-right-style: solid; border-right-color: transparent; }
.outline-item-single .outline-expander::before, .outline-item-single .outline-expander:hover::before { display: none; }
.outline-item-open > .outline-item > .outline-expander::before { content: ""; }
.outline-children { display: none; }
.info-panel-tab-wrapper { display: none; }
.outline-item-open > .outline-children { display: block; }
.typora-export .outline-item { padding-top: 1px; padding-bottom: 1px; }
.typora-export .outline-item:hover { margin-right: -8px; border-right-width: 8px; border-right-style: solid; border-right-color: transparent; }
.typora-export .outline-expander::before { content: "+"; font-family: inherit; top: -1px; }
.typora-export .outline-expander:hover::before, .typora-export .outline-item-open > .outline-item > .outline-expander::before { content: "−"; }
.typora-export-collapse-outline .outline-children { display: none; }
.typora-export-collapse-outline .outline-item-open > .outline-children, .typora-export-no-collapse-outline .outline-children { display: block; }
.typora-export-no-collapse-outline .outline-expander::before { content: "" !important; }
.typora-export-show-outline .outline-item-active > .outline-item .outline-label { font-weight: 700; }
.md-inline-math-container mjx-container { zoom: 0.95; }
mjx-container { break-inside: avoid; }
.md-alert.md-alert-note { border-left-color: rgb(9, 105, 218); }
.md-alert.md-alert-important { border-left-color: rgb(130, 80, 223); }
.md-alert.md-alert-warning { border-left-color: rgb(154, 103, 0); }
.md-alert.md-alert-tip { border-left-color: rgb(31, 136, 61); }
.md-alert.md-alert-caution { border-left-color: rgb(207, 34, 46); }
.md-alert { padding: 0px 1em; margin-bottom: 16px; color: inherit; border-left-width: 0.25em; border-left-style: solid; border-left-color: rgb(0, 0, 0); }
.md-alert-text-note { color: rgb(9, 105, 218); }
.md-alert-text-important { color: rgb(130, 80, 223); }
.md-alert-text-warning { color: rgb(154, 103, 0); }
.md-alert-text-tip { color: rgb(31, 136, 61); }
.md-alert-text-caution { color: rgb(207, 34, 46); }
.md-alert-text { font-size: 0.9rem; font-weight: 700; }
.md-alert-text svg { fill: currentcolor; position: relative; top: 0.125em; margin-right: 1ch; overflow: visible; }
.md-alert-text-container::after { content: attr(data-text); text-transform: capitalize; pointer-events: none; margin-right: 1ch; }

</style>
<style type='text/css'  id="style-codemirror">.CodeMirror { height: auto; }
.CodeMirror.cm-s-inner { background: inherit; }
.CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
.CodeMirror-gutters { border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); background: inherit; white-space: nowrap; }
.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
.cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
.cm-s-inner .cm-property { color: rgb(0, 0, 0); }
.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
.cm-negative { color: rgb(221, 68, 68); }
.cm-positive { color: rgb(34, 153, 34); }
.cm-header, .cm-strong { font-weight: 700; }
.cm-del { text-decoration: line-through; }
.cm-em { font-style: italic; }
.cm-link { text-decoration: underline; }
.cm-error { color: red; }
.cm-invalidchar { color: red; }
.cm-constant { color: rgb(38, 139, 210); }
.cm-defined { color: rgb(181, 137, 0); }
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
.CodeMirror { position: relative; overflow: hidden; }
.CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
.CodeMirror-sizer { position: relative; }
.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; outline: 0px; }
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: auto hidden; }
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 10px; z-index: 3; overflow-y: hidden; }
.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: medium !important; }
.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
.CodeMirror-lines { cursor: text; }
.CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
.CodeMirror-code pre { border-right-width: 30px; border-right-style: solid; border-right-color: transparent; width: fit-content; }
.CodeMirror-wrap .CodeMirror-code pre { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; width: auto; }
.CodeMirror-linebackground { position: absolute; inset: 0px; z-index: 0; }
.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right-width: medium; border-right-style: none; border-right-color: currentcolor; width: 0px; }
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
.cm-searching { background: rgba(255, 255, 0, 0.4); }
span.cm-underlined { text-decoration: underline; }
span.cm-strikethrough { text-decoration: line-through; }
.cm-tw-syntaxerror { color: rgb(255, 255, 255); background-color: rgb(153, 0, 0); }
.cm-tw-deleted { text-decoration: line-through; }
.cm-tw-header5 { font-weight: 700; }
.cm-tw-listitem:first-child { padding-left: 10px; }
.cm-tw-box { border-style: solid; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-color: inherit; border-top-width: 0px !important; }
.cm-tw-underline { text-decoration: underline; }
@media print {
  .CodeMirror div.CodeMirror-cursor { visibility: hidden; }
}

</style>
<link rel='stylesheet' href='https://madmaxchow.github.io/openfonts/css/github-io/V2026.3/vlook-owl-en.css' type='text/css' />
<style type='text/css'  id="style-theme_css">@import '';
.sidebar-content:before{content:'VLOOK™ only •• live';color:var(--ac-t2);background:var(--ac-t2-a);}
</style>
<style type='text/css'  id="style-lp">ol, ul {padding-left: 40px}</style>
<style type='text/css'  id="style-mac-print"> @media print { @page {margin: 0 0 0 0;} body.typora-export {padding-left: 0; padding-right: 0;} #write {padding:0;}}</style>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preconnect" href="https://openfonts.pages.dev" crossorigin="anonymous">
<link rel="preconnect" href="https://madmaxchow.github.io" crossorigin="anonymous">
<!-- 补充 DNS 加速，防止 preconnect 被忽略 -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com" "="">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://openfonts.pages.dev">
<link rel="dns-prefetch" href="https://madmaxchow.github.io">
<!-- live 模式部署时相关资源 URL 配置 -->
<meta name="vlook-js" content="https://madmaxchow.github.io/VLOOK/">
<meta name="vlook-fs" content="https://openfonts.pages.dev/css/pages-dev/">
<meta name="vlook-fs" content="https://madmaxchow.github.io/openfonts/css/github-io/">
<!-- 以下为 W3C 相关的 meta 配置 -->
<meta name="author" content="MAX°孟兆">
<meta name="date" content="2026-03-27">
<meta name="copyright" content="Copyright © 2016-2026 MAX°DESIGN. All rights reserved.">
<meta name="rights" content="This work is licensed under the MIT License. For details, see the LICENSE file.">
<meta name="version" content="V2026.3">
<meta name="changelog" content="">
<meta name="description" content="Regarding VLOOK™: Theme Design, Content Tagging, Content Navigation, Presentation &amp; Publishing, Third-Party Integration Adaptation, and Miscellaneous Exclusions">
<meta name="keywords" content="gitee,github,i18n,markdown,mit,osc,plugin,typora,vlook,github style alert,ogp,open graph protocol,mermaid,wiki,html,prd,yaml,youtube, editor's recommendation,plugin,open source,oschina (open source china),cross-platform,theme,font style,automatic typesetting,tag,multi-level tag,rainbow color,outline,code block,alignment,multimedia,back cover,front cover,formula,scratch card,black curtain,badge,gradient color,footnote,progress bar,breadcrumb,template,task list,color code,social network sharing,video,customization,caption,cross-reference,audio,coloring,theme,phonetic notation,automatic numbering,automatic folding,word count,font, light mode,dark mode,grayscale mode,gray mode,publish as pdf,export as pdf,card-style link,link card, catalogue,library,illustration navigation,outline navigation,paragraph navigation,footnote navigation,picture navigation,table navigation,library navigation,chapter navigation,navigation history,table index,picture index,audio index,video index,code block index,search,word segmentation, table cross cursor,table reading mode,table enhancement,table note,repeated table header,numerical format,cell merging,currency format,row grouping,row folding,percentage format, picture browsing,picture layout,picture silhouette,picture zooming,picture enhancement,picture note,high-definition screen,high-definition picture,inversion,negative color,postcard,picture filter,picture rotation,mixed arrangement of pictures and text, online video,streaming media,bilibili video,watermelon video,douyin video,tencent video, content assistant,publishing assistance,presentation assistance,copy,laser pointer,spotlight,picture-in-picture,publish as pdf,export as pdf,save as pdf,print to pdf, text color,paragraph layout,button,button link,primary button,secondary button,super button, tab group,columns,two columns,three columns,four columns,five columns,quote block,title,details,summary,subtitle,official account article,official account editor, link map,link specification,link check,link recognition,link conversion, design,requirement,document,blog,manual,guide,knowledge base,tutorial,scheme,education,note,diary, product manager,programmer,operation and maintenance,pre-sales,after-sales,trainer,teacher,student,engineer,lawyer, 编辑推荐,插件,开源,开源中国,跨平台,主题,字体风格,自动排版,标签,多级标签,彩虹色,大纲,代码块,对齐方式,多媒体,封底,封面,公式,刮刮卡,黑幕,徽章,渐变色,脚注,进度条,面包屑,模板,任务清单,色号,社交网络分享,视频,定制,题注,交叉引用,音频,着色,主题,注音,自动编号,自动折叠,字数统计,字体, 浅色外观,深色外观,灰度外观,灰色外观,发布为PDF,导出为PDF,卡片式链接,链接卡片, 目录,文库,插图导航,大纲导航,段落漫游,脚注导航,图片导航,表格导航,文库导航,章节导航,导航历史,表格索引,图片索引,音频索引,视频索引,代码块索引,搜索,分词, 表格十字光标,表格阅读模式,表格增强,表注,数值格式,单元格合并,货币格式,行分组,行折叠,百分比格式, 图片浏览,图片版式,图片剪影,图片缩放,图片增强,图注,高清屏,高清图,反转,反色,明信片,图片滤镜,图片旋转,图文混排, 在线视频,流媒体,B站视频,西瓜视频,抖音视频,腾讯视频, 内容助手,出版辅助,演示辅助,复制,激光笔,聚光灯,画中画,发布为PDF,导出为PDF,另存为PDF,打印为PDF, 文本颜色,段落排版,按钮,按钮链接,主按钮,次按钮,超级按钮,页签组,分栏,双栏,三栏,四栏,五栏,引用块,标题,小标题,折叠,公众号文章,公众号编辑器, 链接地图,链接规范,链接检查,链接识别,链接转换, 设计,需求,文档,博客,手册,指南,攻略,知识库,教程,方案,教育,笔记,日记, 产品经理,程序员,运维,售前,售后,培训师,老师,学生,工程师,律师">
<meta name="tags" content="Content Navigation, Content Assistant, Presentation Tools, Publishing Tools, Appearance, Miscellaneous">
<meta name="logo" content="">
<!-- 以下为 VLOOK™ 相关的 meta 配置 -->
<meta name="vlook-footer" content="<a href=&quot;index-en.html&quot;>Introduction</a>	|	Guide for <a href='guide-en.html'>Basic</a>  ❯  <a href='guide2-en.html'>Advanced</a>  ❯  <strong>Exploration</strong>">
<meta name="vlook-doc-lib" content="[How to Start?](index-en.html?target=_self &quot;Introduction, Installation and Configuration, Language Packs&quot;), [Guide • Basic](guide-en.html?target=_self &quot;Text Color / Gradient, Paragraph Formatting / Bold / Underline / Highlight, Table Cell Merging / Column Formatting / Coloring / Row Grouping &amp; Collapsing / Wrapping / Color, Image Layout / Scaling / Filters / Postcards / Silhouette / High-Definition, Lists / Task Lists, Blockquote Subtitles / Collapsible / Color, Section Title Auto-Numbering, …&quot;), [Guide ▲ Advanced](guide2-en.html?target=_self &quot;Columns, Caption, Cross-reference, Buttons, Link,Code / Copy / Wrap, Cover / Back Cover, Tab Groups, Github-Style Alerts, Tag / Badge, Progress Bar, Breadcrumb, Scratch Card, Phonetic Annotations, Mermaid, Math Formula, Multimedia / Audio / Video / Streaming, …&quot;), [Guide ★ Exploration](guide3-en.html?target=_self &quot;Content Navigation / History / Last Read, Content Assistant / Copy / Fullscreen / Wrap / Crosshair / Reading Mode / Picture-In-Picture, Presentation Aids / Laser Pointer / Spotlight / Paragraph Roaming / Width Fit, Publishing Aids / Mark As Unpublished / Social Sharing / Publish as PDF / Export as PDF / Link Map / Long Content Folding / Link Checker / Link Recognition, Appearance / Themes / Fonts / Light / Dark, Custom / Preset Options / Tuning Parameters, Keyboard Shortcuts, …&quot;), [Value-added Services](vip-en.html?target=_self &quot;VIP Themes, Document Typesetting and Editing,...&quot;), [More Content](vlook-lib-en.html &quot;VLOOK™ Full Feature Index Table&quot;), [Report Issues](https://github.com/MadMaxChow/VLOOK/issues?target=issues &quot;GitHub Issues&quot;)">
<meta name="vlook-gray-mode" content="">
<meta name="vlook-header-autonum" content="">
<meta name="vlook-header-dup" content="/^Your coffee.+/;/.*Syntax$/;/^Applicable Scope ••• .+/">
<meta name="vlook-image-host" content="">
<meta name="vlook-query" content="">
<meta name="vlook-unpub" content="">
<meta name="vlook-welcome" content="">
<meta name="vlook-shortcut" content="">
<meta name="vlook-cc-top-left" content="">
<meta name="vlook-cc-top-right" content="">
<meta name="vlook-cc-bottom-left" content="">
<meta name="vlook-cc-bottom-right" content="">
<!-- 以下为 Open Graph Protocol (OGP) 相关的 meta 配置 -->
<meta property="og:image" content="https://vlook-doc.pages.dev/pic/vlook-og.png">
<meta property="og:image:alt" content="">
<meta property="og:title" content="">
<meta property="og:description" content="Regarding VLOOK™: Theme Design, Content Tagging, Content Navigation, Presentation &amp; Publishing, Third-Party Integration Adaptation, and Miscellaneous Exclusions">
<meta property="og:url" content="">
<meta property="og:type" content="">
<meta property="og:site_name" content="">
<meta property="og:locale" content="">
<meta property="og:video" content="">
<meta property="og:audio" content="">

<!--========================================================================-->
<!--                                                                        -->
<!--                          VLOOK - Typora Plugin                         -->
<!--                                ( live )                                -->
<!--                                                                        -->
<!--                                  V2026.3                                 -->
<!--                               2026-03-11                               -->
<!--                           Powered by MAX°孟兆                           -->
<!--                                                                        -->
<!--                          QQ Group: 805502564                           -->
<!--                  Telegram Channel: t.me/vlook_markdown                 -->
<!--                         email: maxchow@qq.com                          -->
<!--                                                                        -->
<!--                  https://github.com/MadMaxChow/VLOOK                   -->
<!--                  https://gitee.com/madmaxchow/VLOOK                    -->
<!--                                                                        -->
<!--========================================================================-->
<!--
MIT License
Copyright (c) 2016-2025 MAX°DESIGN | Max Chow
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!-- ==================== VLOOK UI ==================== -->
<div id="v-pdf-log">[ PDF LOG ]</div>
<div id="v-debug"></div>
<style type="text/css">
    @keyframes breathe-vlook { 0% { transform: scale(1.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
    #VLOOK { left: 0; top: 0; background: var(--v-btn-bg); width: 100%; height: 100vh; display: flex; align-items: center; position: fixed; z-index: 99999; }
    #VLOOK > div { margin: 0 auto; background: var(--v-btn-f); width: 30px; height: 30px; border-radius: 10px; animation: 1s breathe-vlook infinite alternate; }
</style>
<!-- ==================== VLOOK JS ==================== -->
<script type="text/javascript">
	function getMetaContent(key, attr = "name") {
		const meta = document.querySelector(`meta[${attr}="${key}"]`);
		return meta ? meta.getAttribute("content") : null;
	}
    let pdfLog = document.querySelector("#v-pdf-log"),
        lVer = "V2026.3",
        devMode = lVer.indexOf("dev") > 0 ? true : false, debugMode = devMode,
        jsHost = devMode ? "http://localhost/dev/" : getMetaContent("vlook-js") + lVer + "/",
        ts = Math.floor(Date.now()/(1000*60*60*24)); // (1000*60*60*24) 按天
    document.body.insertBefore(pdfLog, document.body.childNodes[0]);
// ==================== live ====================
// ▽ ▽ ▽ ▽ ▽
    function loadScript(src, onload) {
        let js = document.createElement("script");
        js.src = src + "?ts=" + ts;
        js.onload = onload;
        js.onerror = () => console.error("Failed: ", src);
        document.head.appendChild(js);
    }
    loadScript(jsHost + "jquery-slim.js", () => {
        devMode && loadScript(jsHost + "jquery-migrate.js");
        loadScript(jsHost + "start.js");
    });
</script>
<!--======================================-->
<!-- END • VLOOK plugin_live for <head /> -->
<!--======================================-->

<title>Guide ★ Exploration - VLOOK™ - Elegant and Practical Typora Theme &amp; Plugin</title>
</head>
<body class='typora-export'><div class='typora-export-content'>
<div id='write'  class=''><div class='md-toc' mdtype='toc'><p class="md-toc-content" role="list"><span role="listitem" class="md-toc-item md-toc-h1" data-ref="n5"><a class="md-toc-inner" href="#donation"><mark>Donation</mark></a></span><span role="listitem" class="md-toc-item md-toc-h1" data-ref="n17"><a class="md-toc-inner" href="#content-navigation">Content Navigation</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n18"><a class="md-toc-inner" href="#document-library-navigation">Document Library Navigation</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n75"><a class="md-toc-inner" href="#navigation-center">Navigation Center</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n97"><a class="md-toc-inner" href="#chapter-navigation">Chapter Navigation</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n114"><a class="md-toc-inner" href="#figure-navigation">Figure Navigation</a></span><span role="listitem" class="md-toc-item md-toc-h6" data-ref="n139"><a class="md-toc-inner" href="#long-image--dual-caption-example">Long Image &amp; Dual Caption Example</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n141"><a class="md-toc-inner" href="#table-navigation">Table Navigation</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n143"><a class="md-toc-inner" href="#footnote-navigation">Footnote Navigation</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n150"><a class="md-toc-inner" href="#quick-action-navigation"><del>Quick Action Navigation</del></a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n170"><a class="md-toc-inner" href="#continue-last-reading">Continue Last Reading</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n180"><a class="md-toc-inner" href="#navigation-history">Navigation History</a></span><span role="listitem" class="md-toc-item md-toc-h1" data-ref="n190"><a class="md-toc-inner" href="#content-assistant">Content Assistant</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n197"><a class="md-toc-inner" href="#copy-content">Copy Content</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n212"><a class="md-toc-inner" href="#fullscreen-mode">Fullscreen Mode</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n215"><a class="md-toc-inner" href="#toggle-frozen-table-columns">Toggle Frozen Table Columns</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n219"><a class="md-toc-inner" href="#table-reading-mode">Table Reading Mode</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n249"><a class="md-toc-inner" href="#line-wrap-layout">Line Wrap Layout</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n257"><a class="md-toc-inner" href="#picture-in-picture">Picture-in-Picture</a></span><span role="listitem" class="md-toc-item md-toc-h1" data-ref="n269"><a class="md-toc-inner" href="#presentation-tools">Presentation Tools</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n272"><a class="md-toc-inner" href="#laser-pointer">Laser Pointer</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n277"><a class="md-toc-inner" href="#spotlight">Spotlight</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n286"><a class="md-toc-inner" href="#paragraph-roaming">Paragraph Roaming</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n308"><a class="md-toc-inner" href="#zen-mode"><del>Zen Mode</del></a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n315"><a class="md-toc-inner" href="#mermaid-element-highlighting">Mermaid Element Highlighting</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n317"><a class="md-toc-inner" href="#content-width-adaptation">Content Width Adaptation</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n338"><a class="md-toc-inner" href="#reading-progress">Reading Progress</a></span><span role="listitem" class="md-toc-item md-toc-h1" data-ref="n344"><a class="md-toc-inner" href="#publishing-tools">Publishing Tools</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n347"><a class="md-toc-inner" href="#mark-content-not-to-publish">Mark Content not to Publish</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n387"><a class="md-toc-inner" href="#publish-as-pdf">Publish as PDF</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n435"><a class="md-toc-inner" href="#document-footer">Document Footer</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n474"><a class="md-toc-inner" href="#social-sharing">Social Sharing</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n541"><a class="md-toc-inner" href="#link-map">Link Map</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n553"><a class="md-toc-inner" href="#long-content-auto-collapse"><del>Long Content Auto-Collapse</del></a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n566"><a class="md-toc-inner" href="#custom-welcome-page">Custom Welcome Page</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n575"><a class="md-toc-inner" href="#link-validation--standardization">Link Validation &amp; Standardization</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n611"><a class="md-toc-inner" href="#link-content-recognition">Link Content Recognition</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n634"><a class="md-toc-inner" href="#link-content-conversion">Link Content Conversion</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n647"><a class="md-toc-inner" href="#lazy-loading-for-images">Lazy Loading for Images</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n656"><a class="md-toc-inner" href="#word-count--reading-time">Word Count &amp; Reading Time</a></span><span role="listitem" class="md-toc-item md-toc-h1" data-ref="n660"><a class="md-toc-inner" href="#°appearance">°Appearance</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n661"><a class="md-toc-inner" href="#template-themes">Template Themes</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n667"><a class="md-toc-inner" href="#built-in-template-themes">Built-in Template Themes</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n693"><a class="md-toc-inner" href="#custom-template-themes">Custom Template Themes</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n697"><a class="md-toc-inner" href="#font-style">Font Style</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n750"><a class="md-toc-inner" href="#dark-mode">Dark Mode</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n768"><a class="md-toc-inner" href="#gray-mode">Gray Mode</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n795"><a class="md-toc-inner" href="#browser-theme-color">Browser Theme Color</a></span><span role="listitem" class="md-toc-item md-toc-h1" data-ref="n808"><a class="md-toc-inner" href="#°miscellaneous">°Miscellaneous</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n809"><a class="md-toc-inner" href="#plugin-preset-options">Plugin Preset Options</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n885"><a class="md-toc-inner" href="#plugin-tuning-parameters">Plugin Tuning Parameters</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n1076"><a class="md-toc-inner" href="#shortcuts">Shortcuts</a></span><span role="listitem" class="md-toc-item md-toc-h1" data-ref="n1206"><a class="md-toc-inner" href="#extended-content">Extended Content</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n1207"><a class="md-toc-inner" href="#heading-content-notes">Heading Content Notes</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n1218"><a class="md-toc-inner" href="#image-address-extension-notes">Image Address Extension Notes</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n1239"><a class="md-toc-inner" href="#color-wheel-schemes"><del>Color Wheel Schemes</del></a></span></p></div><blockquote><p><span>Select language ❯ </span><em><a href='guide3.md'><kbd><span>🇨🇳 简体中文</span></kbd></a></em></p></blockquote><h1 id='donation'><mark><span>Donation</span></mark></h1><p><u><strong><span>Thanks for donating to VLOOK™ (partial donor list)</span></strong></u></p><p><mark><strong><span>Peter</span></strong><em><sub><span>PuOgRd</span></sub></em><span>、</span><strong><span>绿邃清幽</span></strong><em><sub><span>CyBuAq</span></sub></em><span>、</span><strong><span>李导996</span></strong><em><sub><span>CyBuAq</span></sub></em><span>、</span><strong><span>fanky</span></strong><em><sub><span>CyBuAq</span></sub></em><span>、</span><strong><span>＊丽</span></strong><em><sub><span>CyBuAq</span></sub></em><span>、</span><strong><span>杨琛</span></strong><em><sub><span>CyBuAq</span></sub></em><span>、</span><strong><span>＊哦</span></strong><em><sub><span>GnBn</span></sub></em><span>、</span><strong><span>＊豫</span></strong><em><sub><span>GnBn</span></sub></em><span>、</span><strong><span>l＊a</span></strong><em><sub><span>GnBn</span></sub></em><span>、</span><strong><span>＊o</span></strong><em><sub><span>GnBn</span></sub></em><span>、ocean、swingingroi、＊胡、K＊y、行川、＊药、＊山、＊魂、＊士、＊狗、＊R、＊Z、＊川、l＊n、＊朽、＊杰、A＊C、W＊l、＊山、J＊o、韩宗辉、＊星、一叶知秋、d＊、＊军、＊鹏、＊无、H＊t、＊二、＊宇、＊辉、＊秋、＊笑、＊心、整＊9、＊国、＊哥、乌拉、＊龙、远方眼前、＊雩、＊应、＊销、E＊y、…</span></mark></p><hr /><blockquote><p><strong><span>Your coffee keeps VLOOK™ running ☕️</span></strong></p><p><a href='https://paypal.me/madmaxchow'><img src="pic/donate-paypal-light.png?darksrc=donate-paypal-dark.png&amp;srcset=@2x&amp;darksrcset=@2x#logo" alt="Donate VLOOK™"></a></p><p><em><sub><span>Se</span></sub></em></p></blockquote><blockquote><p><strong><span>Your coffee keeps VLOOK™ running ☕️</span></strong></p><p><img src="pic/donate-wechat-light.png?darksrc=donate-wechat-dark.png&amp;srcset=@2x&amp;darksrcset=@2x#logo" alt="Donate to VLOOK™"></p><p><em><sub><span>Gn</span></sub></em></p></blockquote><h1 id='content-navigation'><span>Content Navigation</span></h1><h2 id='document-library-navigation'><span>Document Library Navigation</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>I have many Markdown documents on similar topics/projects, hoping to organize and access them conveniently after publishing as HTML.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Configure a dedicated &quot;Library&quot; for each document to quickly access your &quot;document universe&quot;.</span></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><blockquote><ul><li><p><span>After configuring a </span><strong><span>Library</span></strong><span> in the document (or when the document contains library-type links), a </span><strong><span>Library</span></strong><span> entry will be displayed in the Navigation Center;</span></p></li><li><p><span>Supports configuring multiple links for the </span><strong><span>Library</span></strong><span>;</span></p></li><li><p><span>Footnotes automatically generate an entry to view all footnote content.</span></p></li></ul></blockquote><ol start='' ><li><p><span>First, add a </span><strong><a href='https://yaml.org/'><span>YAML</span></a></strong><span> Front Matter to the document via the menu: </span><em><mark><span>Typora &gt; Paragraph &gt; YAML Front Matter</span></mark></em><span>  </span></p></li><li><p><span>Then add the </span><code>vlook-doc-lib</code><span> configuration item and its corresponding content inside the YAML section.</span></p></li></ol><p>&nbsp;</p><p><span>Choose one or more of the following configuration methods as needed:</span></p><p><em><sup><span>tab</span></sup></em></p><p><em><mark><span>Library Configuration Method 1 (Simplest)</span></mark></em></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 37px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 25px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -25px; width: 25px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">vlook-doc-lib</span><span class="cm-meta">: </span>library.html</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 63px;"></div><div class="CodeMirror-gutters" style="height: 63px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 24px;"></div></div></div></div></pre><p><em><mark><span>Library Configuration Method 2 (Add title, keywords)</span></mark></em></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 36px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 24px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>1</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -24px; width: 24px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -24px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 15px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">vlook-doc-lib</span><span class="cm-meta">: [</span>Your Library Title<span class="cm-meta">]</span>(library.html <span class="cm-string">"Keywords for navigation center search"</span>)</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 21px;"></div><div class="CodeMirror-gutters" style="height: 21px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 23px;"></div></div></div></div></pre><p>&nbsp;</p><p><span>For multiple libraries:</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 37px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 25px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>6</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -25px; width: 25px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">vlook-doc-lib</span><span class="cm-meta">: </span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-meta">- </span>library1.html</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-meta">- [</span>Open as Library<span class="cm-meta">]</span>(library2.html <span class="cm-string">"Supports keyword search in the Navigation Center."</span>)</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-meta">- [</span>Open in New Tab<span class="cm-meta">]</span>(library3.html)</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 126px;"></div><div class="CodeMirror-gutters" style="height: 126px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 24px;"></div></div></div></div></pre><p>&nbsp;</p><blockquote><h6 id='how-to-open-a-library-link-in-a--new-browser-tab-'><span>How to open a library link in a </span><strong><span>new browser tab</span></strong><span>?</span></h6><p><span>The value of </span><code>target</code><span> is consistent with the HTML standard. It only needs to be set to </span><code>_blank</code><span> or a custom value, and additionally supports </span><code>auto</code><span> .</span></p><p><span>The value of </span><code>target</code><span> is consistent with the HTML standard. It only needs to be set to </span><code>_self</code><span> .</span></p><p><span>Examples:</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 37px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 25px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><span><span></span>x</span></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -25px; width: 25px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># (Recommended) Open the link only in a new tab of the browser</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-meta">- </span>library.html?target=auto</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span cm-text="" cm-zwsp="">
</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># Open in a new browser tab</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-meta">- </span>library.html?target=_blank</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span cm-text="" cm-zwsp="">
</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># Open only in a browser tab named (mydoc)</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-meta">- </span>library.html?target=mydoc</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 168px;"></div><div class="CodeMirror-gutters" style="height: 168px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 24px;"></div></div></div></div></pre></blockquote><blockquote><h6 id='how-to-open-a-library-link-in-the--current-browser-tab-'><span>How to open a library link in the </span><strong><span>current browser tab</span></strong><span>?</span></h6><p><span>The value of </span><code>target</code><span> is consistent with the HTML standard. It only needs to be set to </span><code>_self</code><span> .</span></p><p><span>Example:</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 37px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 25px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>2</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -25px; width: 25px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># Open in the current browser tab</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-meta">- </span>library.html?target=_self</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 42px;"></div><div class="CodeMirror-gutters" style="height: 42px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 24px;"></div></div></div></div></pre></blockquote><blockquote><h6 id='how-to-display-any-link-from-a-document-inside-the--library-popup-'><span>How to display any link from a document inside the </span><strong><span>library popup</span></strong><span>?</span></h6><p><span>Simply add the URL parameter </span><code>target=vdl</code><span> to the text link.</span></p><p><span>Examples:</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="markdown"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="markdown"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 37px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 25px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>2</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -25px; width: 25px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-link">[Click here to open the default library]</span><span class="cm-string">(?target=vdl)</span><span class="cm-trailing-space-a"> </span><span class="cm-trailing-space-new-line">&nbsp;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-link">[Click here to open Library 2]</span><span class="cm-string">(library2.html?target=vdl)</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 42px;"></div><div class="CodeMirror-gutters" style="height: 42px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 24px;"></div></div></div></div></pre><p><span>For more examples, see: </span><a href='#链接内容识别'><span>Link Content Recognition</span></a></p></blockquote><p>&nbsp;</p><div class="md-alert md-alert-tip tip"><p><span class='md-alert-text md-alert-text-tip'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>Tip</span><br></p><ul><li><p><span>If library links match current document, they won&#39;t be added (facilitates template management);</span></p></li><li><p><span>When multiple similar documents specify </span><code>target=_self</code><span>, the effect of integrating library links with the table of contents display can be achieved;</span></p></li><li><p><span>For more about YAML Front Matter settings, see </span><a href='#plugin-preset-options'><span>Plugin Preset Options</span></a><span>.</span></p></li></ul></div><h2 id='navigation-center'><span>Navigation Center</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>When documents contain extensive content, just having an outline isn&#39;t enough for quick positioning and displaying key resources</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> VLOOK™ enhances the table of contents and supports rich indexing of document resources.</span></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p><span>Toggle the </span><img src="pic/icon-outline-nav.svg?darksrc=invert#icon" alt="Navigation Center"><span> button on the left toolbar to &quot;open / close&quot; the navigation center (shortcut </span><kbd><span>N</span></kbd><span>)</span></p><ul><li><p><span>Displays hierarchical table of contents and various types of &quot;</span><a href='#document-library-navigation'><strong><span>Library</span></strong></a><span>&quot; entries</span></p></li><li><p><span>Categorized indexing of document content, supporting: </span><mark><span>Images</span></mark><span>, </span><mark><span>Tables</span></mark><span>, </span><mark><span>Code Blocks</span></mark><span>, </span><mark><span>Formula</span></mark><span>, </span><mark><span>Multimedia</span></mark></p></li><li><p><span>All content supports Plugin Tuning Parameters</span><strong><span>keyword</span></strong><span> search and Plugin Tuning Parameters</span><strong><span>tokenized search</span></strong><span> (separate keywords with spaces)</span></p></li></ul><div class="md-alert md-alert-important important"><p><span class='md-alert-text md-alert-text-important'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>Important</span><br></p><ul><li><p><span>For Typora-generated table of contents, add the </span><code>[TOC]</code><span> marker after the VLOOK™ </span><a href='guide2-en.md#°Cover &amp; Back Cover'><span>cover</span></a><span>;</span></p></li><li><p><span>If the document has no table of contents or categorized indexing, the navigation center will be collapsed by default;</span></p></li><li><p><span>On desktop, you can hover your mouse over the left side of the screen to open the &quot;navigation indicator&quot;, while on mobile or tablet devices, simply tap to open it.</span></p></li></ul></div><h2 id='chapter-navigation'><span>Chapter Navigation</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Besides the outline, I want to browse chapter by chapter in order.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> VLOOK™ automatically provides a &quot;Chapter Navigation Bar&quot; at the top of the document.</span></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p><span>When scrolling into the main content area, a chapter navigation bar automatically appears at the top (hidden when viewing the cover), supporting chapter-by-chapter browsing for levels 1-5.</span></p><p><em><mark><span>Chapter Navigation Shortcuts</span></mark></em></p><figure class='table-figure'><table><thead><tr><th style='text-align:center;' ><span>Chapter Navigation Shortcuts</span></th><th><span>Function (when active)</span></th></tr></thead><tbody><tr><td style='text-align:center;' ><kbd><span>◀</span></kbd><span> or </span><kbd><span> , </span></kbd></td><td><span>Plugin Tuning Parameters</span><strong><span>Previous</span></strong><span> chapter</span></td></tr><tr><td style='text-align:center;' ><kbd><span>▶</span></kbd><span> or </span><kbd><span> . </span></kbd></td><td><span>Plugin Tuning Parameters</span><strong><span>Next</span></strong><span> chapter</span></td></tr></tbody></table></figure><h2 id='figure-navigation'><span>Figure Navigation</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>I want to quickly browse all images in the document and jump to their locations.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> All images and Mermaid</span><sup class='md-footnote'><a href='#dfref-footnote-1' name='ref-footnote-1'>1</a></sup><span> diagrams in the document support one-click fullscreen viewing.</span></p><p>&nbsp;</p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p>&nbsp;</p><blockquote><ul><li><p><span>Supports zooming via </span><strong><span>mouse wheel, touchpad, and touchscreen</span></strong><span>.</span></p></li><li><p><span>Supports jumping to the corresponding position in the document, viewing the complete illustration index, switching to Picture-in-Picture mode, and more.</span></p></li></ul></blockquote><p><em><mark><span>Figure Navigation Shortcuts</span></mark></em></p><figure class='table-figure'><table><thead><tr><th style='text-align:center;' ><span>Figure Navigation Shortcuts</span></th><th><span>Function (when active)</span></th></tr></thead><tbody><tr><td style='text-align:center;' ><kbd><span>◀</span></kbd><span> or </span><kbd><span> , </span></kbd></td><td><span>Plugin Tuning Parameters</span><strong><span>Previous</span></strong><span> image</span></td></tr><tr><td style='text-align:center;' ><kbd><span>▶</span></kbd><span> or </span><kbd><span> . </span></kbd></td><td><span>Plugin Tuning Parameters</span><strong><span>Next</span></strong><span> image</span></td></tr></tbody></table></figure><h6 id='long-image--dual-caption-example'><span>Long Image &amp; Dual Caption Example</span></h6><p><img src="pic/normal-pic.jpg" alt="Normal image example" title="(Image source from internet, copyright unclear)"></p><h2 id='table-navigation'><span>Table Navigation</span></h2><p><span>The functionality is essentially the same as </span><strong><a href='#figure-navigation'><span>Figure Navigation</span></a></strong><span> and also automatically freezes tables.</span></p><h2 id='footnote-navigation'><span>Footnote Navigation</span></h2><p><span>In technical/academic papers, footnotes are frequently used for supplementary explanations, citations, or notes.</span></p><p><strong><span>VLOOK™ displays footnotes as popups at current position</span></strong><span>, avoiding jumps, also accessible via </span><a href='#navigation-center'><span>Navigation Center</span></a><span> </span><a href='#document-library-navigation'><span>Library List</span></a><span>.</span></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p><span>Click the superscript after this paragraph to view the footnote</span><sup class='md-footnote'><a href='#dfref-footnote-2' name='ref-footnote-2'>2</a></sup></p><h2 id='quick-action-navigation'><del><span>Quick Action Navigation</span></del></h2><p><span>Default action is </span><a href='#navigation-history'><span>Navigation History</span></a></p><p><span>Add custom quick actions via </span><code>vlook-quick-action</code><span> in YAML.</span></p><p><span>Quick actions consist of &quot;Action Icon&quot; and &quot;Action Link&quot; separated by semicolon </span><code>;</code><span> .</span></p><p><span>Icon format follows Markdown image syntax: </span><code>![Icon Title](my-icon.svg)</code><span> where:</span></p><ul><li><p><span>Recommended size: </span><code>20 × 20</code><span> pixels</span></p></li><li><p><span>Title is optional (hover tooltip)</span></p></li></ul><p><span>Link format follows Markdown link syntax: </span><code>[Note](URL)</code><span> where:</span></p><ul><li><p><span>Note is optional (supplementary hover tooltip)</span></p></li><li><p><span>For images shown on hover, add </span><code>?target=qv</code><span> to URL</span></p></li></ul><p><span>Example configuration:</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 38px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>4</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># Configure quick actions in YAML</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">vlook-quick-action</span><span class="cm-meta">: </span>!<span class="cm-meta">[</span>Icon Title<span class="cm-meta">]</span>(my-icon.svg);<span class="cm-meta">[</span>Note<span class="cm-meta">]</span>(xxx.png?target=qv)</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 84px;"></div><div class="CodeMirror-gutters" style="height: 84px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><p><span>For multiple actions:</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 38px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>7</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># Configure multiple quick actions</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">vlook-quick-action</span><span class="cm-meta">:</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-meta">- </span>!<span class="cm-meta">[</span>Title1<span class="cm-meta">]</span>(my-icon1.svg);<span class="cm-meta">[</span>Note1<span class="cm-meta">]</span>(url-1.html?target=view)</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-meta">- </span>!<span class="cm-meta">[</span>Title2<span class="cm-meta">]</span>(my-icon2.png);<span class="cm-meta">[</span>Note2<span class="cm-meta">]</span>(url-2.html)</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-meta">- </span>!<span class="cm-meta">[</span>Title3<span class="cm-meta">]</span>(my-icon3.png);<span class="cm-meta">[</span>Note3<span class="cm-meta">]</span>(url-3.html)</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 147px;"></div><div class="CodeMirror-gutters" style="height: 147px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><h2 id='continue-last-reading'><span>Continue Last Reading</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Static HTML documents generally can&#39;t remember the last reading position～</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> VLOOK™ enables every exported static HTML to quickly return to the last reading position.</span></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><ul><li><p><span>After opening a previously read HTML document, a &quot;Continue Last Reading&quot; button appears in the top-right corner, clicking it returns to the last reading position;</span></p></li><li><p><span>This entry will automatically hide shortly after, but can be accessed again via the </span><img src="pic/icon-history.svg?darksrc=invert#icon" alt="Navigation History"><span> button (shortcut </span><kbd><span>H</span></kbd><span>).</span></p></li></ul><h2 id='navigation-history'><span>Navigation History</span></h2><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><ul><li><p><span>Automatically records all navigation history within current document;</span></p></li><li><p><span>Access via </span><img src="pic/icon-history.svg?darksrc=invert#icon" alt="Navigation History"><span> button (shortcut </span><kbd><span>H</span></kbd><span>).</span></p></li></ul><hr /><p><span>For feedback: </span><a href='https://qm.qq.com/q/O0tNC6WBWe'><img src="pic/feedback-via-email.svg?darksrc=invert#icon" alt="Feedback via Email"><span>  </span><img src="pic/feedback-via-qq.svg?darksrc=invert#icon" alt="Feedback via QQ"></a><span>  </span><a href='https://t.me/vlook_markdown'><img src="pic/feedback-via-telegram.svg#icon" alt="Feedback via Telegram"></a></p><h1 id='content-assistant'><span>Content Assistant</span></h1><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p><span>Context-aware quick functions for different content types: </span><a href='guide-en.md#°Table'><span>Tables</span></a><span>, </span><a href='guide-en.md#°Image'><span>Images</span></a><span>, </span><a href='guide2-en.md#Tag'><span>Tags</span></a><span>, </span><a href='guide2-en.md#Scratch-Cards'><span>Scratch Card</span></a><span>, </span><a href='guide2-en.md#°Code'><span>Code &amp; Code Blocks</span></a><span>, </span><a href='guide2-en.md#°Formula'><span>Formula</span></a><span>, </span><a href='guide2-en.md#Breadcrumbs'><span>Breadcrumbs</span></a></p><div class="md-alert md-alert-note note"><p><span class='md-alert-text md-alert-text-note'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</span><br></p><p><span>Hover over supported content to activate assistant options.</span></p></div><h2 id='copy-content'><span>Copy Content</span></h2><hr /><ul><li><p><span>Copy &quot;</span><a href='guide2-en.md#Multi-level Tag'><span>Multi-level Tags</span></a><span>&quot;</span></p><p><span>Click segments to copy content including right-side parts, e.g.: </span><em><span>Category</span><code>Content1</code><span>Content2</span></em></p></li><li><p><span>Copy &quot;</span><a href='guide2-en.md#Tag'><span>Single-level Tags</span></a><span>, Code&quot;</span></p><p><span>Click to copy content, e.g.: </span><em><code>Tag</code></em><span> </span><code>Code</code></p></li><li><p><span>Copy &quot;Code Blocks&quot;</span></p><p><span>One-click copy entire code block</span></p></li><li><p><span>Copy &quot;Images&quot;</span></p><p><span>Copy image URL, </span><a href='#long-image--dual-caption-example'><span>Try with an image ❯</span></a></p></li></ul><h2 id='fullscreen-mode'><span>Fullscreen Mode</span></h2><p><span>The Content Assistant supports one-click fullscreen display for illustrations (images/Mermaid diagrams) and tables.</span><br/><span>In fullscreen mode, you can browse forward/backward, jump to the corresponding position in the document, view the complete category index, and more.</span></p><p><span>Learn more: </span><a href='#figure-navigation'><span>Figure Navigation ❯</span></a><span> , </span><a href='#table-navigation'><span>Table Navigation ❯</span></a></p><h2 id='toggle-frozen-table-columns'><span>Toggle Frozen Table Columns</span></h2><blockquote><p><span>When the </span><strong><a href='guide.md#冻结表格列'><span>Freeze Table Columns</span></a></strong><span> feature is enabled or configured in the theme, you can unfreeze or refreeze columns while viewing the exported HTML.  </span></p><p><span>Hover over the table and use the </span><img src="pic/icon-full.svg?darksrc=invert#icon" alt="Fullscreen"><span> button in the top-right Content Assistant to perform the related actions.</span></p></blockquote><h2 id='table-reading-mode'><span>Table Reading Mode</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>With many rows/columns, how to quickly see related cells?</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Works out-of-the-box with VLOOK™～</span></p><blockquote><ul><li><p><span>Hover table, click </span><img src="pic/icon-table-cross.svg?darksrc=invert#icon" alt="Table Reading Mode"><span> to toggle;</span></p></li><li><p><span>Click any cell to highlight its row and column (crosshair);</span></p></li><li><p><span>Navigate with Plugin Tuning Parameters</span><strong><span>arrow keys</span></strong><span> ( </span><kbd><span>▲</span></kbd><span>  </span><kbd><span>▼</span></kbd><span>  </span><kbd><span>◀</span></kbd><span>  </span><kbd><span>▶</span></kbd><span> ), </span><kbd><span>Enter ⏎</span></kbd><span> to expand/collapse </span><a href='guide-en.md#Table Row Grouping &amp; Folding'><span>grouped rows</span></a><span>;</span></p></li><li><p><span>Click blank area or </span><kbd><span>ESC</span></kbd><span> to temporarily hide.</span></p></li></ul></blockquote><p><em><mark><span>Try clicking cells or moving cursor in this table</span></mark></em></p><figure class='table-figure'><table><thead><tr><th><span>Column A</span></th><th><span>Column B</span></th><th style='text-align:center;' ><span>Column C</span></th><th style='text-align:right;' ><span>Column D</span></th></tr></thead><tbody><tr><td><span>Row 1</span></td><td><span>Left-align (long)</span></td><td style='text-align:center;' ><span>Center-align</span></td><td style='text-align:right;' ><span>Right-align (long)</span></td></tr><tr><td><span>Row 2 (long)</span></td><td><span>Left-align</span></td><td style='text-align:center;' ><span>Center-align (long)</span></td><td style='text-align:right;' ><span>Right-align</span></td></tr></tbody></table></figure><h2 id='line-wrap-layout'><span>Line Wrap Layout</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Need different line-wrapping styles for tables/code blocks.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> VLOOK™ provides out-of-the-box toggle.</span></p><blockquote><p><span>Hover &quot;Tables/Code Blocks&quot;, click </span><img src="pic/icon-wrap-unwrap.svg?darksrc=invert#icon" alt="Wrap Mode"><span> to toggle &quot;Wrap&quot;/&quot;No Wrap&quot;.</span></p></blockquote><div class="md-alert md-alert-note note"><p><span class='md-alert-text md-alert-text-note'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</span><br></p><p><span>VLOOK™ auto-adapts based on content and screen width, see </span><a href='guide-en.md#Table Wrapping Layout'><span>details ❯❯</span></a></p></div><h2 id='picture-in-picture'><span>Picture-in-Picture</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Want floating display for images/tables/code/formulas like videos.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Available out-of-the-box with VLOOK™～</span></p><blockquote><ul><li><p><span>Hover content, click </span><img src="pic/icon-pic-in-pic.svg?darksrc=invert#icon" alt="PiP"><span> to enable;</span></p></li><li><p><span>Defaults to 75% size, adjustable via zoom buttons.</span></p></li></ul></blockquote><p><span>Try it on any image/table/code/formula in the document～</span></p><hr /><p><span>For feedback: </span><a href='https://qm.qq.com/q/O0tNC6WBWe'><img src="pic/feedback-via-email.svg?darksrc=invert#icon" alt="Feedback via Email"><span>  </span><img src="pic/feedback-via-qq.svg?darksrc=invert#icon" alt="Feedback via QQ"></a><span>  </span><a href='https://t.me/vlook_markdown'><img src="pic/feedback-via-telegram.svg#icon" alt="Feedback via Telegram"></a></p><h1 id='presentation-tools'><span>Presentation Tools</span></h1><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><h2 id='laser-pointer'><span>Laser Pointer</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Need laser pointer for document reviews/presentations.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Works out-of-the-box with VLOOK™～</span></p><blockquote><p><span>Toggle via </span><img src="pic/icon-laser-pointer.svg?darksrc=invert#icon" alt="Laser Pointer"><span> (shortcut </span><kbd><span>P</span></kbd><span>).</span></p></blockquote><h2 id='spotlight'><span>Spotlight</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Need spotlight to focus audience on specific areas.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Works out-of-the-box with VLOOK™～</span></p><blockquote><ul><li><p><span>Toggle via </span><img src="pic/icon-spotlight.svg?darksrc=invert#icon" alt="Spotlight"><span> (shortcut </span><kbd><span>S</span></kbd><span>);</span></p></li><li><p><span>Adjust size with </span><kbd><span>⇧ Shift</span></kbd><span>.</span></p></li></ul></blockquote><h2 id='paragraph-roaming'><span>Paragraph Roaming</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Want paragraph-by-paragraph highlighting for focused browsing.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Click </span><img src="pic/icon-paragraph-nav.svg?darksrc=invert#icon" alt="Paragraph Roaming"><span> (or shortcut) to enter mode (vim-inspired).</span></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p><em><mark><span>Paragraph Roaming Shortcuts_vim-inspired_</span></mark></em></p><figure class='table-figure'><table><thead><tr><th style='text-align:center;' ><span>Shortcuts</span></th><th><span>Function</span></th></tr></thead><tbody><tr><td style='text-align:center;' ><kbd><span>J</span></kbd></td><td><span>Next paragraph</span></td></tr><tr><td style='text-align:center;' ><kbd><span>K</span></kbd></td><td><span>Previous paragraph</span></td></tr><tr><td style='text-align:center;' ><kbd><span>⌘ command</span></kbd><span> / </span><kbd><span>⌃ Ctrl</span></kbd></td><td><span>Jump </span><mark><span>5</span></mark><span> paragraphs</span></td></tr><tr><td style='text-align:center;' ><kbd><span>⇧ shift</span></kbd></td><td><span>Jump </span><mark><span>10</span></mark><span> paragraphs</span></td></tr></tbody></table></figure><h2 id='zen-mode'><del><span>Zen Mode</span></del></h2><p><span>When you need to hide the VLOOK™ plugin interface (such as the toolbar, navigation center, status bar, and other elements) and display only the document content, you can press </span><kbd><span>Z</span></kbd><span> to instantly enter </span><strong><span>&quot;Zen Mode&quot;</span></strong><span>, which hides the plugin interface.</span></p><p><span>Press </span><kbd><span>Z</span></kbd><span> again or </span><kbd><span>ESC</span></kbd><span> to exit </span><strong><span>&quot;Zen Mode&quot;</span></strong><span>.</span></p><p>&nbsp;</p><div class="md-alert md-alert-tip tip"><p><span class='md-alert-text md-alert-text-tip'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>Tip</span><br></p><p><span>In </span><strong><span>&quot;Zen Mode&quot;</span></strong><span>, if you need to use presentation tools such as </span><strong><a href='#laser-pointer'><span>&quot;Laser Pointer&quot;</span></a></strong><span>, </span><strong><a href='#spotlight'><span>&quot;Spotlight&quot;</span></a></strong><span>, or </span><strong><a href='#paragraph-roaming'><span>&quot;Paragraph Roaming&quot;</span></a></strong><span>, you can activate them directly via keyboard shortcuts.</span></p></div><h2 id='mermaid-element-highlighting'><span>Mermaid Element Highlighting</span></h2><p><span>Hover to highlight Mermaid chart elements (nodes, subgraphs, text) for focused presentations, </span><a href='guide2-en.md#°Mermaid'><span>Try with Mermaid ❯</span></a></p><h2 id='content-width-adaptation'><span>Content Width Adaptation</span></h2><p><span>For optimal reading, main content width automatically adapts to browser window, with:</span></p><ul><li><p><span>Fixed width when too wide</span></p></li><li><p><span>Arrow controls to toggle widths</span></p></li></ul><div class="md-alert md-alert-note note"><p><span class='md-alert-text md-alert-text-note'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</span><br></p><p><span>Also adapts to Typora window width in these cases:</span></p><hr /><blockquote><p><span>Hide left sidebar (outline/files)</span></p><ul><li><p><kbd><span>⇧ Shift</span></kbd><span> + </span><kbd><span>Cmd/Ctrl</span></kbd><span> + </span><kbd><span>L</span></kbd></p></li></ul></blockquote><blockquote><p><span>Enable Focus Mode</span></p><ul><li><p><kbd><span>F8</span></kbd></p></li></ul></blockquote></div><h2 id='reading-progress'><span>Reading Progress</span></h2><p><span>A friendly reading progress indicator has been added at the bottom of the document, allowing you to check your reading progress at any time. It also works regardless of whether the scrollbar is automatically hidden.</span></p><p>&nbsp;</p><p>&nbsp;</p><hr /><p><span>For feedback: </span><a href='https://qm.qq.com/q/O0tNC6WBWe'><img src="pic/feedback-via-email.svg?darksrc=invert#icon" alt="Feedback via Email"><span>  </span><img src="pic/feedback-via-qq.svg?darksrc=invert#icon" alt="Feedback via QQ"></a><span>  </span><a href='https://t.me/vlook_markdown'><img src="pic/feedback-via-telegram.svg#icon" alt="Feedback via Telegram"></a></p><h1 id='publishing-tools'><span>Publishing Tools</span></h1><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><h2 id='mark-content-not-to-publish'><span>Mark Content not to Publish</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>How to handle unfinished/temporary content elegantly?</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Markdown&#39;s &quot;Strike&quot; + headings = elegant content control～</span></p><p><u><span>Use Markdown &quot;</span><strong><del><span>strikethrough</span></del></strong><span>&quot; to mark unpublished content:</span></u></p><hr /><hr /><blockquote><p><strong><span>Specific Chapters</span></strong></p><p><span>Level 1-6 headings including sub-chapters.</span></p><blockquote><p><strong><span>Method</span></strong><span>: Apply strikethrough to heading text</span></p></blockquote></blockquote><blockquote><p><strong><span>Specific Blockquotes</span></strong></p><p><span>Blockquotes with </span><a href='guide-en.md#Blockquote Subtitle'><span>subtitles</span></a><span> or </span><a href='guide-en.md#Blockquote-Folding'><span>folding</span></a></p><blockquote><p><strong><span>Method</span></strong><span>: Apply strikethrough to subtitle/folding title</span></p></blockquote></blockquote><blockquote><p><strong><span>Specific Table Columns</span></strong></p><p><span>One or multiple columns</span></p><blockquote><p><strong><span>Method</span></strong><span>: Apply strikethrough to column headers per </span><a href='guide-en.md#Table Column Formatting'><span>Table Column Format</span></a></p></blockquote></blockquote><hr /><hr /><blockquote><p><strong><del><span>Unpublished bold subtitle blockquote</span></del></strong></p><p><span>This won&#39;t be published</span></p></blockquote><blockquote><p><mark><span>~~Unpublished highlighted subtitle blockquote</span></mark></p><p><span>This won&#39;t be published</span></p></blockquote><blockquote><h6 id='unpublished-folded-blockquote'><del><span>Unpublished folded blockquote</span></del></h6><p><span>This won&#39;t be published</span></p></blockquote><p>&nbsp;</p><div class="md-alert md-alert-tip tip"><p><span class='md-alert-text md-alert-text-tip'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>Tip</span><br></p><ul><li><p><span>For cases </span><mark><span>not suitable for adding strikethrough</span></mark><span>, you can also specify it through &quot;</span><a href='guide3.md#plugin-preset-options'><span>Plugin Preset Options</span></a><span>&quot;;</span></p></li><li><p><span>This feature can be disabled via </span><a href='vip-en.md'><span>VIP Themes</span></a><span>, or temporarily deactivated by adding spaces outside the strikethrough </span><code>~~</code><span> .</span></p></li></ul></div><h2 id='publish-as-pdf'><span>Publish as PDF</span></h2><p><u><span>After exporting to HTML with VLOOK™, you can enjoy rich document layout capabilities.</span><br><span>However, using Typora&#39;s built-in &quot;Export to PDF&quot; may result in loss of formatting.</span><br><span>To publish in PDF format with full layout support, use the </span><strong><span>&quot;Publish as PDF&quot;</span></strong><span> feature provided in the VLOOK™ exported HTML.</span></u></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p>&nbsp;</p><ol start='' ><li><p><span>Open the exported HTML file and click the </span><img src="pic/icon-print.svg?darksrc=invert#icon" alt="PiP"><span> button ( shortcut </span><kbd><span>⌃ Ctrl</span></kbd><span> / </span><kbd><span>⌘ command</span></kbd><span> + </span><kbd><span>P</span></kbd><span> ) in the bottom-right corner to launch the feature.</span></p></li><li><p><span>Before printing, the page will adapt its styles for print output. Then use your browser’s &quot;</span><strong><span>Print to PDF</span></strong><span>&quot; / &quot;</span><strong><span>Save as PDF</span></strong><span> option to generate the final PDF.</span></p></li></ol><blockquote><p><strong><span>Provide the following control options</span></strong></p><ul><li><p><span>Enable / Disable: </span><strong><span>Cover Adapted for A4 Paper</span></strong><span>  </span></p></li><li><p><span>Enable / Disable: </span><strong><span>Include Outline</span></strong></p></li><li><p><span>Enable / Disable: </span><strong><span>Expand Blockquote Folding</span></strong></p></li><li><p><span>Enable / Disable: </span><strong><span>Cancle Image Filter (Blur)</span></strong></p></li><li><p><span>Enable / Disable: </span><strong><span>Expand Table Row Group</span></strong><span>  </span></p></li><li><p><span>Enable / Disable: </span><strong><span>Reveal Scratch Card</span></strong></p></li></ul></blockquote><blockquote><p><strong><span>Page Break Control</span></strong></p><hr /><blockquote><p><strong><span>Method 1</span></strong></p><p><span>By default, PDF export inserts a page break at each level-1 heading.</span></p><p><span>If you need a customized default paging rule, you can adjust it through </span><a href='vip.md'><span>VIP Themes</span></a><span>.</span></p></blockquote><blockquote><p><strong><span>Method 2 (Experimental)</span></strong></p><p><span>Supports manually adding page break markers. Syntax:</span></p><p>&nbsp;</p><p><span>Based on the Markdown horizontal rule syntax </span><code>---</code><span>, append </span><code>page</code><span> after it, i.e. </span><code>---page</code><span> (must occupy its own line).</span></p></blockquote><p><em><sub><span>Rd</span></sub></em></p></blockquote><p>&nbsp;</p><p><span>Example start: </span><strong><span>The content below ↓↓↓ occupies a single page via the &quot;page break marker&quot;</span></strong></p><p><span>---page</span></p><p>&nbsp;</p><p><span>This content occupies </span><strong><span>1 full page</span></strong><span> by adding </span><code>---page</code><span> page break markers before and after.</span></p><p><span>This content occupies </span><strong><span>1 full page</span></strong><span> by adding </span><code>---page</code><span> page break markers before and after.</span></p><p><span>This content occupies </span><strong><span>1 full page</span></strong><span> by adding </span><code>---page</code><span> page break markers before and after.</span></p><p>&nbsp;</p><p><span>---page</span></p><p><span>Example end: </span><strong><span>The content above ↑↑↑ occupies a single page via the &quot;page break marker&quot;</span></strong></p><h2 id='document-footer'><span>Document Footer</span></h2><p><mark><span>You can add personalized footer content to a document, such as copyright information, ICP details, navigation links, and any other content you want to place at the end of the document.</span></mark></p><p><u><span>Currently, the following three methods are supported for adding a document footer</span></u></p><hr /><hr /><blockquote><p><strong><span>YAML</span></strong></p><p><span>Supports defining the footer via the document’s </span><strong><span>YAML Front Matter</span></strong><span>, suitable for specifying different footers for different documents.</span></p><p><em><sub><span>T1</span></sub></em></p></blockquote><blockquote><p><strong><span>Built into VIP Themes</span></strong></p><p><span>Supports being built into </span><strong><a href='vip.md'><span>VIP Themes</span></a></strong><span>, suitable for using a unified footer across all documents.</span></p><blockquote><p><span>For individual documents, a different footer can still be specified separately via </span><strong><span>YAML</span></strong><span>.</span></p></blockquote><p><em><sub><span>T2</span></sub></em></p></blockquote><blockquote><p><strong><span>Default Footer</span></strong></p><p><span>If the document footer is not specified using the above two methods, the document title is used as the default footer content.</span></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><blockquote><p><span>To maximize personalization and template-based management, extended support is provided for HTML layout and YAML field references.</span></p><blockquote><h6 id='supported-yaml-fields-referenced-using-double-curly-braces'><span>Supported YAML fields (referenced using double curly braces)</span></h6><ul><li><p><code>{{title}}</code><span> — Document title  </span></p></li><li><p><code>{{author}}</code><span> — Author  </span></p></li><li><p><code>{{date}}</code><span> — Publication date  </span></p></li><li><p><code>{{version}}</code><span> — Document Version  </span></p></li><li><p><code>{{copyright}}</code><span> — Copyright information  </span></p></li><li><p><code>{{rights}}</code><span> — Rights statement</span></p></li></ul></blockquote></blockquote><p>&nbsp;</p><p><span>Example of configuring document footer content in YAML (Menu path: </span><em><mark><span>Typora ▸ Paragraph ▸ YAML Front Matter</span></mark></em><span>):</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 43px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 31px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>12</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -31px; width: 31px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 22px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 22px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">title</span><span class="cm-meta">: </span>xxx</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 22px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">author</span><span class="cm-meta">: </span>xxx</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 22px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">date</span><span class="cm-meta">: </span>xxxx-xx-xx</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 22px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">copyright</span><span class="cm-meta">: </span>xxx</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 22px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span cm-text="" cm-zwsp="">
</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 22px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># Example 1</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 22px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">vlook-footer</span><span class="cm-meta">: {{</span>title<span class="cm-meta">}}</span>&lt;br&gt;&lt;br&gt;<span class="cm-meta">{{</span>author<span class="cm-meta">}}</span>&lt;br&gt;<span class="cm-meta">{{</span>date<span class="cm-meta">}}</span> (<span class="cm-meta">{{</span>version<span class="cm-meta">}}</span>)</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 22px;">9</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span cm-text="" cm-zwsp="">
</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 22px;">10</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># Example 2</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 22px;">11</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">vlook-footer</span><span class="cm-meta">: </span>&lt;a href=<span class="cm-string">"xxx.com"</span>&gt;More great content&lt;/a&gt;&lt;br&gt;&lt;br&gt;<span class="cm-meta">{{</span>copyright<span class="cm-meta">}}</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 22px;">12</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 252px;"></div><div class="CodeMirror-gutters" style="height: 252px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 30px;"></div></div></div></div></pre><h2 id='social-sharing'><span>Social Sharing</span></h2><p><mark><span>VLOOK™ supports </span><a href='https://ogp.me/'><span>Open Graph Protocol</span></a><span> (enhances how content appears when shared on social media), automatically generating share appearances based on preset OGP tags.</span></mark></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><div class="md-alert md-alert-important important"><p><span class='md-alert-text md-alert-text-important'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>Important</span><br></p><ol start='' ><li><p><span>OGP tags are specified via YAML Front Matter like </span><a href='#plugin-tuning-parameters'><span>Plugin Tuning Parameters</span></a><span>;</span></p></li><li><p><span>Since OGP tags contain colons </span><code>:</code><span>, wrap them in double quotes in YAML, e.g.: </span><code>&quot;og:image&quot;: https://xxxxx.png</code><span>.</span></p></li></ol></div><p><span>VLOOK™ export config includes common OGP tags (see table below), additional tags can be added manually.</span></p><p><em><mark><span>Supported Open Graph Tags</span></mark></em></p><figure class='table-figure'><table><thead><tr><th><span>OGP Tag</span></th><th><mark><span>YAML Name</span></mark></th><th><span>Description</span></th></tr></thead><tbody><tr><td><code>og:title</code></td><td><code>&quot;og:title&quot;</code></td><td><span>Page title (main share title)</span></td></tr><tr><td><code>og:type</code></td><td><code>&quot;og:type&quot;</code></td><td><span>Page type (website, video, article etc.)</span></td></tr><tr><td><code>og:image</code></td><td><code>&quot;og:image&quot;</code></td><td><span>Associated image (main share image)</span></td></tr><tr><td><code>og:url</code></td><td><code>&quot;og:url&quot;</code></td><td><span>Canonical URL</span></td></tr><tr><td><span>Other Common Tags</span></td><td><span>==</span></td><td><span>==</span></td></tr><tr><td><span>&gt; </span><code>og:description</code></td><td><code>&quot;og:description&quot;</code></td><td><span>Brief page description (shown when shared)</span></td></tr><tr><td><span>&gt; </span><code>og:site_name</code></td><td><code>&quot;og:site_name&quot;</code></td><td><span>Website name</span></td></tr><tr><td><span>&gt; </span><code>og:locale</code></td><td><code>&quot;og:locale&quot;</code></td><td><span>Content locale/language</span></td></tr><tr><td><span>&gt; </span><code>og:video</code></td><td><code>&quot;og:video&quot;</code></td><td><span>Video URL if page contains video</span></td></tr><tr><td><span>&gt; </span><code>og:audio</code></td><td><code>&quot;og:audio&quot;</code></td><td><span>Audio URL if page contains audio</span></td></tr></tbody></table></figure><p><em><mark><span>YAML Front Matter Example</span></mark></em></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 37px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 25px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>6</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -25px; width: 25px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-string">"og:title"</span>: Share Title Here</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-string">"og:image"</span>: Image URL Here</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-string">"og:url"</span>: Target URL Here</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-string">"og:description"</span>: Share Description Here</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 126px;"></div><div class="CodeMirror-gutters" style="height: 126px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 24px;"></div></div></div></div></pre><p><em><sup><span>tab</span></sup></em></p><div class="md-alert md-alert-note note"><p><span class='md-alert-text md-alert-text-note'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</span><br></p><p><span>For more about YAML Front Matter settings, see </span><a href='#plugin-preset-options'><span>Plugin Preset Options</span></a><span>.</span></p></div><div class="md-alert md-alert-tip tip"><p><span class='md-alert-text md-alert-text-tip'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>Tip</span><br></p><p><span>To verify OGP configuration, use Meta&#39;s </span><a href='https://developers.facebook.com/tools/debug/'><span>Sharing Debugger</span></a><span> tool.</span></p></div><h2 id='link-map'><span>Link Map</span></h2><hr /><blockquote><p><mark><span>External Link List &amp; Anchor Counts</span></mark></p><p><span>View all external links in current document and their anchor reference counts.</span></p></blockquote><blockquote><p><mark><span>External Anchor Validation</span></mark></p><p><span>Quickly check validity of external link anchors as documents grow.</span></p><p><em><code>Note</code></em><span> External documents must also be VLOOK™ generated.</span></p></blockquote><div class="md-alert md-alert-tip tip"><p><span class='md-alert-text md-alert-text-tip'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>Tip</span><br></p><p><span>Click </span><img src="pic/icon-link-map.svg#icon"><span> at bottom-right to view link map (shortcut </span><kbd><span>M</span></kbd><span>), then click &quot;</span><strong><span>Check Anchors</span></strong><span>&quot; on entries with anchors.</span></p></div><h2 id='long-content-auto-collapse'><del><span>Long Content Auto-Collapse</span></del></h2><p><mark><span>VLOOK™ automatically collapses long images, tables, and code to save space～</span></mark></p><blockquote><ul><li><p><span>Long </span><strong><span>images</span></strong><span> … </span><a href='#long-image--dual-caption-example'><span>Example ❯</span></a></p></li><li><p><span>Long </span><strong><span>tables</span></strong><span> … </span><a href='#shortcuts'><span>Example ❯</span></a></p></li><li><p><span>Long </span><strong><span>code</span></strong><span> … </span><a href='guide2-en.md#Copy-Code-Content'><span>Example ❯</span></a></p></li></ul></blockquote><div class="md-alert md-alert-important important"><p><span class='md-alert-text md-alert-text-important'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>Important</span><br></p><p><span>Content inside blockquotes or </span><a href='guide-en.md#Blockquote-Folding'><span>folded blockquotes</span></a><span> is excluded from auto-collapsing.</span></p></div><h2 id='custom-welcome-page'><span>Custom Welcome Page</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>VLOOK™ documents show a welcome page during loading - can I customize it?</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span>  The welcome page closes automatically after loading, but customization is supported.</span></p><p><span>Use </span><a href='#plugin-preset-options'><span>Plugin Preset Options</span></a><span> </span><code>vlook-welcome</code><span> in YAML Front Matter:</span></p><p><em><mark><span>Custom Welcome Page Example</span></mark></em></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 37px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 25px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>3</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -25px; width: 25px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">vlook-welcome</span><span class="cm-meta">: </span>Custom welcome message here, can include HTML like &lt;strong&gt;Welcome&lt;/strong&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 63px;"></div><div class="CodeMirror-gutters" style="height: 63px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 24px;"></div></div></div></div></pre><div class="md-alert md-alert-note note"><p><span class='md-alert-text md-alert-text-note'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</span><br></p><p><span>For more about YAML Front Matter settings, see </span><a href='#plugin-preset-options'><span>Plugin Preset Options</span></a><span>.</span></p></div><h2 id='link-validation--standardization'><span>Link Validation &amp; Standardization</span></h2><hr /><blockquote><p><strong><span>Broken Image Sources</span></strong></p><p><span>Auto-detection with prompts, example:</span></p><p><img src="vlook-lost-image.jpg?darksrc=invert"></p><p><img src="vlook-lost-image.jpg?darksrc=invert&amp;fill=t1#icon"></p><p><em><sub><span>Rd</span></sub></em></p></blockquote><blockquote><p><strong><span>Broken Audio/Video Sources</span></strong></p><p><span>Auto-detection with prompts, example:</span></p><p><img src="media/waves_and_rocks.mp3" alt="Audio player in standard mode" title="(MP3 format)"></p><p><em><sub><span>Rd</span></sub></em></p></blockquote><hr /><hr /><blockquote><p><strong><span>Invalid Internal Links (Anchors)</span></strong></p><p><span>Auto-check for broken page-internal links, </span><a href='#This-is-an-invalid-internal-link'><span>example invalid link</span></a></p><p><strong><span>How to check external link anchors? See </span><a href='#link-map'><span>Link Map ❯❯</span></a></strong></p><p><em><sub><span>Rd</span></sub></em></p></blockquote><blockquote><p><strong><span>Duplicate Headings</span></strong></p><p><span>To avoid navigation conflicts</span></p><p><strong><sub><span>(Controllable via </span><a href='#plugin-preset-options'><span>Plugin Preset Options</span></a><span> </span><code>vlook-header-dup</code><span>)</span></sub></strong></p><p><em><sub><span>Ye</span></sub></em></p></blockquote><blockquote><p><strong><span>Anchor Standardization Check &amp; Fix</span></strong></p><p><span>Checks/fixes punctuation in link anchors</span></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><div class="md-alert md-alert-warning warning"><p><span class='md-alert-text md-alert-text-warning'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>Warning</span><br></p><ul><li><p><span>Issues needing attention show </span><img src="pic/icon-link-error.svg#icon"><span> at bottom-right - click for details;</span></p></li><li><p><span>VLOOK™ uses &quot;lazy loading&quot; for images/media - resource checks trigger when scrolled into view.</span></p></li></ul></div><h2 id='link-content-recognition'><span>Link Content Recognition</span></h2><p><mark><span>VLOOK™ automatically recognizes link content types, showing different cursors (adapting to Light/Dark Mode)</span></mark></p><p><img src="pic/cur-set.png?srcset=@2x" alt="VLOOK™ Custom Cursors"></p><hr /><hr /><blockquote><p><strong><span>VLOOK™ Library Links</span></strong></p><ul><li><p><span>Open </span><a href='?target=vdl'><strong><span>Default Library</span></strong></a><span> (first library if multiple exist)</span></p></li><li><p><span>Open </span><a href='?target=vdl#Quick-Start'><strong><span>Default Library + Anchor</span></strong></a></p></li><li><p><span>Open specific file as library: </span><a href='vlook-lib-en.md?target=vdl#📊-scripted-charts'><strong><span>Document Library (En)</span></strong></a></p></li></ul><p><em><sub><span>T1!</span></sub></em></p></blockquote><blockquote><p><strong><span>Recognize Mainstream Hyperlink Resources</span></strong></p><p><a href='#donation'><strong><span>#Internal links</span></strong></a><span> / </span><a href='http://xxx'><strong><span>Non-secure links</span></strong></a><span> / </span><a href='https://xxx'><strong><span>Secure links</span></strong></a><span> / </span><a href='mailto:'><strong><span>Email</span></strong></a></p><p><em><sub><span>Gy!</span></sub></em></p></blockquote><blockquote><p><strong><span>High-Risk Resources</span></strong></p><p><a href='file.exe'><strong><span>.exe files</span></strong><span> / Plugin Tuning Parameters</span><strong><span>.sh files</span></strong></a></p><p><em><sub><span>Rd!</span></sub></em></p></blockquote><h2 id='link-content-conversion'><span>Link Content Conversion</span></h2><hr /><blockquote><p><strong><span>Automatic .md Link Conversion</span></strong></p><blockquote><p><span>Typora allows specifying any .md document (or with anchors) during editing for easy cross-document navigation, but exported HTML doesn&#39;t automatically convert to .html, which isn&#39;t suitable for HTML publishing.</span></p></blockquote><p><span>By default converts </span><code>*.md</code><span> links to </span><code>html</code><span>, can specify any extension.</span></p><p><span>To disable or specify conversion, use </span><a href='#plugin-tuning-parameters'><span>Plugin Tuning Parameters</span></a><span> </span><code>xmd</code><span>.</span></p><p><em><sub><span>Bu!</span></sub></em></p></blockquote><blockquote><p><strong><span>Force External Links to Open in New Tab</span></strong></p><p><span>For better reading experience, external links (http/https) automatically open in new tab.</span></p><p><em><sub><span>Vn!</span></sub></em></p></blockquote><h2 id='lazy-loading-for-images'><span>Lazy Loading for Images</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>When documents contain many images, exported HTML loads them all immediately, affecting opening speed and wasting bandwidth.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Supports delayed loading - images only load when scrolled into view.</span></p><p>&nbsp;</p><p><strong><span>During loading, it supports displaying the default placeholder image specified in the </span><a href='vip-en.md'><span>Custom Theme</span></a><span>.</span></strong></p><p>&nbsp;</p><blockquote><h6 id='how-to-enable-lazy-loading'><span>How to enable lazy loading?</span></h6><p><strong><span>Zero configuration!</span></strong><span> Just use VLOOK™ built-in themes or </span><a href='#template-themes'><span>VIP Themes</span></a><span>, export normally to HTML.</span></p></blockquote><h2 id='word-count--reading-time'><span>Word Count &amp; Reading Time</span></h2><p><span>Displays word count (separating Latin/CJK characters) and estimated reading time at bottom-right.</span></p><hr /><p><span>For feedback: </span><a href='https://qm.qq.com/q/O0tNC6WBWe'><img src="pic/feedback-via-email.svg?darksrc=invert#icon" alt="Feedback via Email"><span>  </span><img src="pic/feedback-via-qq.svg?darksrc=invert#icon" alt="Feedback via QQ"></a><span>  </span><a href='https://t.me/vlook_markdown'><img src="pic/feedback-via-telegram.svg#icon" alt="Feedback via Telegram"></a></p><h1 id='°appearance'><span>°Appearance</span></h1><h2 id='template-themes'><span>Template Themes</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Can your Markdown documents switch skins with one click?!</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Built-in original themes for various scenarios, surpassing expectations for Markdown themes!</span></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p><mark><span>Themes apply to Typora UI and all editable elements for visual consistency!</span></mark></p><h3 id='built-in-template-themes'><span>Built-in Template Themes</span></h3><p><u><span>VLOOK™&#39;s 6 free themes (click the image below to preview the effect.)～</span></u></p><hr /><hr /><blockquote><p><a href='theme-hope.html'><img src="pic/vlook-theme-hope.png?srcset=@2x#card" alt="Inspired by movie &quot;Titanic&quot;, default font style &quot;Literary&quot;" title="Hope Ocean Heart"></a></p><p><em><sub><span>Bu</span></sub></em></p></blockquote><blockquote><p><a href='theme-joint.html'><img src="pic/vlook-theme-joint.png?srcset=@2x#card" alt="Blends Chinese ancient architecture with modern industrial style" title="Joint Mortise-Tenon"></a></p><p><em><sub><span>Ye</span></sub></em></p></blockquote><blockquote><p><a href='theme-geek.html'><img src="pic/vlook-theme-geek.png?srcset=@2x#card" alt="Geeks change the world, VLOOK changes Markdown automation" title="Geek Profound"></a></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><hr /><hr /><blockquote><p><a href='theme-fancy.html'><img src="pic/vlook-theme-fancy.png?srcset=@2x#card" alt="Inspired by coffee breaks, default font style &quot;Fresh&quot;" title="Fancy Fantasy"></a></p><p><em><sub><span>Og</span></sub></em></p></blockquote><blockquote><p><a href='theme-thinking.html'><img src="pic/vlook-theme-thinking.png?srcset=@2x#card" alt="Inspired by meditation" title="Thinking Meditation"></a></p><p><em><sub><span>Cy</span></sub></em></p></blockquote><blockquote><p><a href='theme-solaris.html'><img src="pic/vlook-theme-solaris.png?srcset=@2x#card" alt="Homage to Sun Microsystems' Solaris OS, default font style &quot;Book&quot;" title="Solaris"></a></p><p><em><sub><span>Vn</span></sub></em></p></blockquote><p><strong><span>Online plugin users can specify themes via </span><a href='#plugin-tuning-parameters'><span>Plugin Tuning Parameters</span></a><span> </span><code>theme</code><span>.</span></strong></p><hr /><h3 id='custom-template-themes'><span>Custom Template Themes</span></h3><p><u><span>Now offering theme customization services (sample cases below)</span></u></p><p><img src="https://vlook-doc.pages.dev/pic/vlook-theme-vip-demo.gif" alt="VIP Themes"></p><p><strong><a href='vip-en.md'><kbd><span>Explore More About VIP Themes</span></kbd></a></strong></p><h2 id='font-style'><span>Font Style</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Themes boost visual appeal, fonts define document personality!</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Five distinctive Font Style for different preferences.</span></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p><u><span>Select via </span><img src="pic/icon-font-style.svg?darksrc=invert#icon" alt="Font Style"><span> in status bar (shortcut </span><kbd><span>A</span></kbd><span>)</span><br><span>Also configurable via </span><a href='#template-themes'><span>VIP Themes</span></a></u></p><hr /><hr /><hr /><blockquote><p><img src="pic/fs-local2.png?srcset=@2x#padding#card#fitmax" alt="Uses system UI fonts, varies slightly across systems"></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><blockquote><p><img src="pic/fs-book2.png?srcset=@2x#padding#card#fitmax" alt="Overall presents as &quot;Books, Print&quot; (Mixes system Song/Hei fonts, varies across systems)"></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><blockquote><p><img src="pic/fs-zen2.png?srcset=@2x#padding#card#fitmax" alt="Overall presents as &quot;Zen Courtyard, Regular Script Calligraphy, Tranquil Space&quot; (requires the browser to load web fonts or install them locally)"></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><blockquote><p><img src="pic/fs-yuan2.png?srcset=@2x#padding#card#fitmax" alt="Overall presents as &quot;Affinity, Warmth, Health&quot; (requires the browser to load web fonts or install them locally)"></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><hr /><hr /><hr /><blockquote><p><img src="pic/fs-dyn2.png?srcset=@2x#padding#card#fitmax" alt="Vibrant, open style (requires the browser to load web fonts or install them locally)"></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><blockquote><p><img src="pic/fs-serif2.png?srcset=@2x#padding#card#fitmax" alt="Overall presents as &quot;Elegance, Rhythm, Personality&quot; (requires the browser to load web fonts or install them locally)"></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><blockquote><p><img src="pic/fs-sans2.png?srcset=@2x#padding#card#fitmax" alt="Overall presents as &quot;Freshness, Simplicity, Trendiness&quot; (requires the browser to load web fonts or install them locally)"></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><blockquote><p><img src="pic/fs-ink2.png?srcset=@2x#padding#card#fitmax" alt="Overall presents as &quot;Childlike Fun, Handwriting, Free-Spirited, Comfortable&quot; (requires the browser to load web fonts or install them locally)"></p><p><em><sub><span>Gy</span></sub></em></p></blockquote><p>&nbsp;</p><p><span>Some Font Style marked with (WebFont) require an Internet connection to load and take effect properly.</span></p><p><span>If you cannot connect to the Internet or your network is slow, it is recommended to download the fonts for local installation.</span></p><p><strong><a href='https://github.com/MadMaxChow/openfonts/releases/download/V2.0/install-font-V2.0.tar.gz'><kbd><span>Download the Font Package</span></kbd></a></strong></p><div class="md-alert md-alert-note note"><p><span class='md-alert-text md-alert-text-note'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</span><br></p><ul><li><p><span>You can choose to install only the font packages for the styles you want to use, or install all of them;  </span></p></li><li><p><span>Some fonts are duplicated across different Font Style. If you are prompted that a font already exists during installation, you can skip installing that font.</span></p></li></ul></div><div class="md-alert md-alert-important important"><p><span class='md-alert-text md-alert-text-important'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>Important</span><br></p><ul><li><p><span>Applies to all documents under same domain, override via </span><a href='#plugin-tuning-parameters'><span>Plugin Tuning Parameters</span></a><span> </span><code>font</code></p></li></ul></div><p>&nbsp;</p><h2 id='dark-mode'><span>Dark Mode</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Want Markdown documents to adapt to system dark mode.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> All VLOOK™ themes auto-adapt to browser/system dark mode.</span></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p><u><span>Toggle via </span><img src="pic/icon-auto-mode.svg?darksrc=invert#icon" alt="Auto Mode"><span>/</span><img src="pic/icon-light-mode.svg?darksrc=invert#icon" alt="Light Mode"><span>/</span><img src="pic/icon-dark-mode.svg?darksrc=invert#icon" alt="Dark Mode"><span> (shortcut </span><kbd><span>D</span></kbd><span>)</span></u></p><p>&nbsp;</p><div class="md-alert md-alert-note note"><p><span class='md-alert-text md-alert-text-note'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</span><br></p><ul><li><p><span>Applies to all documents under same domain, override via </span><a href='#plugin-tuning-parameters'><span>Plugin Tuning Parameters</span></a><span> </span><code>cs</code><span> ;</span></p></li><li><p><span>To disable auto-switching, use </span><a href='https://madmaxchow.github.io/VLOOK/vip.html'><span>VIP Themes</span></a><span>.</span></p></li></ul></div><p><img src="pic/vlook-color-scheme-preview.png?srcset=@2x" alt="Light/Dark Preview"></p><div class="md-alert md-alert-tip tip"><p><span class='md-alert-text md-alert-text-tip'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>Tip</span><br></p><p><span>For better Dark Mode image harmony, try </span><a href='guide-en.md#Image Adaptation for Dark Mode'><span>Dark Mode image adaptation</span></a><span>.</span></p></div><h2 id='gray-mode'><span>Gray Mode</span></h2><p><em><span>Markdown Fans</span><code>Q</code></em><span>「</span><strong><span>Want documents to display in grayscale on memorial days.</span></strong><span>」</span></p><p><em><span>VLOOK</span><code>A</code></em><em><sub><span>T2</span></sub></em><span> Easily enable grayscale display on specified dates.</span></p><blockquote><p><strong><span>Applicable Scope ••• </span><em><code>Editing</code><span>× Not Supported</span></em><em><sub><span>Gy</span></sub></em><span>  </span><em><code>Export HTML</code><span>✓ Supported</span></em><em><sub><span>Gn</span></sub></em></strong></p></blockquote><p><u><span>Specify Gray Mode dates via </span><a href='#plugin-preset-options'><span>Plugin Preset Options</span></a><span> </span><code>vlook-gray-mode</code><span> in YAML Front Matter</span></u></p><p><em><mark><span>Add Gray Mode Dates</span></mark></em></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 37px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 25px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>5</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -25px; width: 25px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">vlook-gray-mode</span><span class="cm-meta">: </span>Month-Day<span class="cm-meta">:</span>Title@LanguageCode</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># Example:</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># 12-13:National Memorial Day@zh;04-05:Tomb-Sweeping Day@zh,ko</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 105px;"></div><div class="CodeMirror-gutters" style="height: 105px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 24px;"></div></div></div></div></pre><blockquote><p><code>Month</code><span> and </span><code>Day</code><span> format: </span><code>12-13</code><span> or </span><code>04-05</code></p><p><code>Title</code><span> optional, date description e.g. </span><code>National Memorial Day</code></p><p><code>LanguageCode</code><span> optional, applicable languages (comma-separated)</span></p><p><sup><span>e.g.: Chinese </span><code>zh</code><span>, Chinese &amp; Korean </span><code>zh,ko</code><span>, English </span><code>en</code></sup></p><hr /><p>&nbsp;</p><ul><li><p><span>Separate multiple dates with semicolons </span><code>;</code></p></li><li><p><span>Temporarily disable via </span><img src="pic/icon-gray.svg?darksrc=invert#icon" alt="Gray Mode"></p></li></ul></blockquote><p><em><sup><span>tab</span></sup></em></p><div class="md-alert md-alert-important important"><p><span class='md-alert-text md-alert-text-important'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>Important</span><br></p><p><span>VLOOK™ pre-configures Gray Mode for &quot;Chinese National Memorial Day/Tomb-Sweeping Day&quot;</span></p></div><div class="md-alert md-alert-note note"><p><span class='md-alert-text md-alert-text-note'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</span><br></p><p><span>For more about YAML Front Matter settings, see </span><a href='#plugin-preset-options'><span>Plugin Preset Options</span></a><span>.</span></p></div><h2 id='browser-theme-color'><span>Browser Theme Color</span></h2><p><span>Supports the browser top bar theme color (brand color) feature on mobile devices, providing a friendlier and more consistent browsing experience.</span></p><p><span>Browser support for </span><code>theme-color</code><span> varies across platforms and versions. Currently, major browsers that support this standard include:</span></p><ul><li><p><strong><span>Safari</span></strong><span> </span><sup><span>for iOS</span></sup></p></li><li><p><strong><span>Chrome</span></strong><span> </span><sup><span>for Android</span></sup></p></li><li><p><span>For more details, see: </span><a href='https://caniuse.com/?search=theme-color'><span>Can I use?</span></a></p></li></ul><p>&nbsp;</p><hr /><p><span>For feedback: </span><a href='https://qm.qq.com/q/O0tNC6WBWe'><img src="pic/feedback-via-email.svg?darksrc=invert#icon" alt="Feedback via Email"><span>  </span><img src="pic/feedback-via-qq.svg?darksrc=invert#icon" alt="Feedback via QQ"></a><span>  </span><a href='https://t.me/vlook_markdown'><img src="pic/feedback-via-telegram.svg#icon" alt="Feedback via Telegram"></a></p><h1 id='°miscellaneous'><span>°Miscellaneous</span></h1><h2 id='plugin-preset-options'><span>Plugin Preset Options</span></h2><blockquote><p><span>Configure Plugin Tuning Parameters</span><strong><span>VLOOK™</span></strong><span> presets via Plugin Tuning Parameters</span><strong><a href='https://yaml.org/'><span>YAML</span></a><span> Front Matter</span></strong><span>:</span></p><ol start='' ><li><p><span>First add YAML content (Typora menu: Paragraph ▸ YAML Front Matter);</span></p></li><li><p><span>Then configure presets, example format:</span></p></li></ol><p><em><mark><span>Configure VLOOK™ Presets via YAML</span></mark></em></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 37px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 25px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>6</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -25px; width: 25px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">&lt;Preset Option 1&gt;</span><span class="cm-meta">: </span>&lt;Content 1&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">&lt;Preset Option 2&gt;</span><span class="cm-meta">: </span>&lt;Content 2&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">...</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">&lt;Preset Option n&gt;</span><span class="cm-meta">: </span>&lt;Content n&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 126px;"></div><div class="CodeMirror-gutters" style="height: 126px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 24px;"></div></div></div></div></pre></blockquote><figure class='table-figure'><table><thead><tr><th><span>Plugin Preset Option</span></th><th style='text-align:center;' ><span>[]Preset in</span><br><span>Custom Theme</span></th><th><span>Description</span></th><th><span>Values &amp; Explanation</span></th></tr></thead><tbody><tr><td><span>YAML Standard Options</span></td><td style='text-align:center;' >&nbsp;</td><td><span>YAML Front Matter standards</span></td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>title</code></td><td style='text-align:center;' >&nbsp;</td><td><span>Title</span></td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>author</code></td><td style='text-align:center;' >&nbsp;</td><td><span>Author</span></td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>keywords</code></td><td style='text-align:center;' >&nbsp;</td><td><span>Keywords</span></td><td>&nbsp;</td></tr><tr><td><code>vlook-doc-lib</code></td><td style='text-align:center;' >&nbsp;</td><td><span>Document library URL</span></td><td><span>Supports multiple, see: </span><a href='#document-library-navigation'><span>Document Library Navigation</span></a></td></tr><tr><td><code>vlook-gray-mode</code></td><td style='text-align:center;' >&nbsp;</td><td><span>Gray Mode dates</span></td><td><span>See: </span><a href='#gray-mode'><span>Gray Mode</span></a></td></tr><tr><td><code>vlook-header-autonum</code></td><td style='text-align:center;' ><span>Y</span></td><td><span>Heading auto-numbering</span></td><td><span>See: </span><a href='guide2-en.md#°Caption'><span>Heading Auto-numbering</span></a><br><sup><span>Disable numbering via custom theme</span></sup></td></tr><tr><td><code>vlook-header-dup</code></td><td style='text-align:center;' >&nbsp;</td><td><span>Allowed duplicate headings</span></td><td><span>• Content exempt from heading duplication checks</span><br><span>• Supports regex</span><br><sup><span>(Literal format e.g. </span><code>/pattern/flags</code><span>)</span></sup><br><sup><span>Separate multiple with semicolons </span><code>;</code></sup></td></tr><tr><td><code>vlook-image-host</code></td><td style='text-align:center;' >&nbsp;</td><td><span>Default image host</span></td><td><span>Mainly for Safari opening local HTML with </span><a href='guide-en.md#Image Silhouette'><span>image silhouettes</span></a><br><span>e.g. </span><code>https://xxx.abc.com/images</code></td></tr><tr><td><code>vlook-welcome</code></td><td style='text-align:center;' >&nbsp;</td><td><span>Custom loading welcome page</span></td><td><span>See: </span><a href='#custom-welcome-page'><span>Custom Welcome Page</span></a></td></tr><tr><td><code>vlook-query</code></td><td style='text-align:center;' ><span>Y</span></td><td><span>Preset Plugin Tuning Parameters</span></td><td><span>See next section: </span><a href='#plugin-tuning-parameters'><span>Plugin Tuning Parameters</span></a></td></tr><tr><td><code>vlook-unpub</code></td><td style='text-align:center;' >&nbsp;</td><td><span>Specify </span><a href='#mark-content-not-to-publish'><span>Content Not to Publish</span></a></td><td><span>Supports regex</span><br><sup><span>(Literal format e.g. </span><code>/pattern/flags</code><span>)</span></sup><br><sup><span>Separate multiple with semicolons </span><code>;</code></sup></td></tr></tbody></table></figure><h2 id='plugin-tuning-parameters'><span>Plugin Tuning Parameters</span></h2><p><span>Configure VLOOK™ features/styles via &quot;Plugin Tuning Parameters&quot;, prioritized in this order when multiple exist:</span></p><ol start='' ><li><p><strong><span>Method 1:</span></strong><span> Via document URL parameters (Query)</span></p></li><li><p><strong><span>Method 2:</span></strong><span> Via Markdown&#39;s YAML Front Matter</span></p></li><li><p><strong><span>Method 3:</span></strong><span> Via </span><a href='vip-en.md'><span>VIP Themes</span></a></p></li></ol><p><em><sup><span>tab</span></sup></em></p><p><em><mark><span>Method 1: URL Parameters</span></mark></em></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="url"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="url"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 38px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>4</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-type">MyDoc.html</span><span class="cm-bracket cm-url-query">?</span><span class="cm-def cm-url-query">Param1</span><span class="cm-bracket cm-url-query">=</span><span class="cm-string cm-url-query">Value</span><span class="cm-bracket cm-url-query">&amp;</span><span class="cm-def cm-url-query">Param2</span><span class="cm-bracket cm-url-query">=</span><span class="cm-string cm-url-query">Value...</span><span class="cm-bracket cm-url-query">&amp;</span><span class="cm-def cm-url-query">ParamN</span><span class="cm-bracket cm-url-query">=</span><span class="cm-string cm-url-query">Value</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-string cm-url-query">(Separate multiple with </span><span class="cm-bracket cm-url-query">&amp;</span><span class="cm-def cm-url-query">)</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span cm-text="" cm-zwsp="">
</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def cm-url-query">Example: MyDoc.html?ws</span><span class="cm-bracket cm-url-query">=</span><span class="cm-string cm-url-query">none</span><span class="cm-bracket cm-url-query">&amp;</span><span class="cm-def cm-url-query">tag</span><span class="cm-bracket cm-url-query">=</span><span class="cm-string cm-url-query">t1</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 84px;"></div><div class="CodeMirror-gutters" style="height: 84px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><p><em><mark><span>Method 2: YAML Parameters</span></mark></em></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="yaml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="yaml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10.5px; left: 37px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 25px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: currentcolor;" role="presentation"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>5</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -25px; width: 25px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-atom">vlook-query</span><span class="cm-meta">: </span>Param1=Value&amp;Param2=Value...&amp;ParamN=Value</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># Separate multiple with &amp;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 16px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-comment"># Example: ws=none&amp;tag=t1</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 16px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span style="padding-right: 0.1px;" role="presentation"><span class="cm-def">---</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 105px;"></div><div class="CodeMirror-gutters" style="height: 105px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 24px;"></div></div></div></div></pre><p><em><mark><span>VLOOK™ Plugin Tuning Parameters</span></mark></em></p><figure class='table-figure'><table><thead><tr><th><span>Parameter</span></th><th><span>Description</span></th><th style='text-align:center;' ><span>Default</span></th><th><span>Values &amp; Explanation</span></th></tr></thead><tbody><tr><td><span>Layout</span></td><td>&nbsp;</td><td style='text-align:center;' >&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>badge</code></td><td><span>Default color for </span><a href='guide2-en.md#Multi-level tag'><span>multi-level tag</span></a></td><td style='text-align:center;' ><code>T1</code></td><td><code>ColorCode</code><span> - Preset colors, </span><a href='guide2-en.md#Multi-level tag'><span>see here</span></a></td></tr><tr><td><span>&gt; </span><code>coating</code></td><td><span>Default color for </span><a href='guide2-en.md#Scratch Card'><span>Scratch Card</span></a></td><td style='text-align:center;' ><code>Gy</code></td><td><code>ColorCode</code><span> - Preset colors, </span><a href='guide2-en.md#Scratch Card'><span>see here</span></a></td></tr><tr><td><span>&gt; </span><code>quote</code></td><td><span>Auto-convert blockquotes to </span><a href='guide-en.md#Blockquote Coloring'><span>colored</span></a></td><td style='text-align:center;' ><code>off</code></td><td><code>off</code><span> - Disable</span><br><code>ColorCode</code><span> - Preset colors, </span><a href='guide-en.md#Blockquote Coloring'><span>see here</span></a></td></tr><tr><td><span>&gt; </span><code>tag</code></td><td><span>Default color for </span><a href='guide2-en.md#Tag'><span>tag</span></a></td><td style='text-align:center;' ><code>T2</code></td><td><span>Preset colors, </span><a href='guide2-en.md#Tag'><span>see here</span></a></td></tr><tr><td><span>Captions</span></td><td>&nbsp;</td><td style='text-align:center;' >&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>capnum</code></td><td><span>Captions are automatically numbered</span></td><td style='text-align:center;' ><code>on</code></td><td><code>off</code><span> - Disable</span><br><code>on</code><span> - Enable</span></td></tr><tr><td><span>&gt; </span><code>capgroup</code></td><td><span>Group caption numbering by chapter</span></td><td style='text-align:center;' ><code>on</code></td><td><code>off</code><span> - Disable</span><br><code>on</code><span> - Enable</span></td></tr><tr><td><span>&gt; </span><code>capmini</code></td><td><span>Only generated caption type, example: Figure 1, Figure 2, etc.</span></td><td style='text-align:center;' ><code>off</code></td><td><code>off</code><span> - Disable</span><br><code>on</code><span> - Enable</span></td></tr><tr><td><span>&gt; </span><code>capblank</code></td><td><span>Whether to insert a blank caption when no caption text is provided.  </span><br><sup><span>Takes effect only with a custom theme</span></sup></td><td style='text-align:center;' ><code>off</code></td><td><span>Specific types:</span><br><code>figure</code><span> - Figure</span><br><code>codeblock</code><span> - Codeblock</span></td></tr><tr><td><span>Tab Group</span></td><td>&nbsp;</td><td style='text-align:center;' >&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>tabcap</code></td><td><span>Display the caption number (e.g., Table 1-2) in Tabs of </span><a href='guide2-en.md#°Tab Group'><span>TabGroup</span></a></td><td style='text-align:center;' ><code>off</code></td><td><code>off</code><span> - Hide</span><br><code>on</code><span> - Show</span></td></tr><tr><td><span>&gt; </span><code>tabico</code></td><td><span>Display content type icon in Tabs of </span><a href='guide2-en.md#°Tab Group'><span>TabGroup</span></a></td><td style='text-align:center;' ><code>line</code></td><td><code>off</code><span> - Hide</span><br><code>line</code><span> - Line Style</span><br><code>solid</code><span> - Solid Style</span><br><code>flat</code><span> - Flat Style</span></td></tr><tr><td><span>Appearance</span></td><td>&nbsp;</td><td style='text-align:center;' >&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>cs</code></td><td><span>Force color scheme</span></td><td style='text-align:center;' ><code>auto</code></td><td><code>light</code><span> - Force Light Mode</span><br><code>dark</code><span> - Force Dark Mode</span><br><code>auto</code><span> - Follow system</span></td></tr><tr><td><span>&gt; </span><code>gray</code></td><td><span>Specify whether to enable </span><a href='#gray-mode'><span>Gray Mode</span></a></td><td style='text-align:center;' ><code>on</code></td><td><code>off</code><span> - Disable</span><br><code>on</code><span> - Enable</span><br><code>force</code><span> - Force enable for preview</span></td></tr><tr><td><span>&gt; </span><code>radius</code></td><td><span>Force corner radius (overrides theme)</span></td><td style='text-align:center;' >&nbsp;</td><td><code>none</code><span> - No rounding</span><br><code>small</code><span> - Small radius</span><br><code>big</code><span> - Large radius</span></td></tr><tr><td><span>&gt; </span><code>sts</code></td><td><span>Status bar display</span></td><td style='text-align:center;' ><code>show</code></td><td><code>hide</code><span> - Hide</span><br><code>show</code><span> - Show</span></td></tr><tr><td><span>&gt; </span><code>vico</code></td><td><span>Specify the icon style of the plugin UI</span></td><td style='text-align:center;' ><code>solid</code></td><td><code>solid</code><span> - Solid Style</span><br><code>flat</code><span> - Flat Style</span></td></tr><tr><td><span>Interaction</span></td><td>&nbsp;</td><td style='text-align:center;' >&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>fold</code></td><td><span>Auto-collapse long content</span><br><sup><span>Separate types with </span><code>+</code></sup></td><td style='text-align:center;' ><code>on</code></td><td><code>off</code><span> - Disable all</span><br><code>on</code><span> - Enable all</span><br><br><span>Specific types:</span><br><code>table</code><span> - Tables</span><br><code>figure</code><span> - Images</span><br><code>codeblock</code><span> - Code</span><br><code>list</code><span> - Lists (unimplemented)</span></td></tr><tr><td><span>&gt; </span><code>tr</code></td><td><span>Default </span><a href='#table-reading-mode'><span>table reading mode</span></a><span> state</span></td><td style='text-align:center;' ><code>off</code></td><td><code>off</code><span> - Disable</span><br><code>on</code><span> - Enable</span></td></tr><tr><td><span>&gt; </span><code>ws</code></td><td><span>Welcome page behavior</span></td><td style='text-align:center;' ><code>auto</code></td><td><code>auto</code><span> - Auto-close after loading</span><br><code>wait</code><span> - Manual close</span><br><code>off</code><span> - Hide</span><br><code>1~60</code><span> - Delay seconds</span></td></tr><tr><td><span>Publishing</span></td><td>&nbsp;</td><td style='text-align:center;' >&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>unpub</code></td><td><span>Handle </span><a href='#mark-content-not-to-publish'><span>unpublished content</span></a></td><td style='text-align:center;' ><code>on</code></td><td><code>off</code><span> - Disable</span><br><code>on</code><span> - Enable</span></td></tr><tr><td><span>&gt; </span><code>xmd</code></td><td><span>Convert </span><code>*.md</code><span> links to new extension</span><br><sup><span>(Globally or per-link)</span></sup></td><td style='text-align:center;' ><code>html</code></td><td><code>off</code><span> - Disable</span><br><code>{ext}</code><span> - Target extension e.g. </span><code>php</code><span> </span><code>htm</code></td></tr><tr><td><span>&gt; </span><code>pdf</code></td><td><span>Activate the &quot;Publish as PDF&quot; for the exported HTML file</span></td><td style='text-align:center;' ><code>on</code></td><td><code>off</code><span> - Disable</span><br><code>on</code><span> - Enable</span></td></tr><tr><td><span>Navigation</span></td><td>&nbsp;</td><td style='text-align:center;' >&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>nav</code></td><td><span>Initial </span><a href='#navigation-center'><span>navigation center</span></a><span> state</span></td><td style='text-align:center;' ><code>auto</code></td><td><code>auto</code><span> - Auto-collapse on cover/expand in content</span><br><code>hide</code><span> - Collapsed</span></td></tr><tr><td><span>&gt; </span><code>toc</code></td><td><span>Initial TOC auto-collapse level</span></td><td style='text-align:center;' ><code>1</code></td><td><code>0</code><span> - Expand all</span><br><code>1~5</code><span> - Collapse to level</span></td></tr><tr><td><span>&gt; </span><code>vdl</code></td><td><span>Library feature toggle</span></td><td style='text-align:center;' ><code>on</code></td><td><code>off</code><span> - Disable</span><br><code>on</code><span> - Enable</span></td></tr><tr><td><span>Debug</span></td><td>&nbsp;</td><td style='text-align:center;' >&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>&gt; </span><code>reset</code></td><td><span>Force reset browser-stored VLOOK data</span></td><td style='text-align:center;' >&nbsp;</td><td><code>true</code></td></tr><tr><td><span>&gt; </span><code>tab</code></td><td><span>Force enable/disable tab groups</span></td><td style='text-align:center;' ><code>on</code></td><td><code>off</code><span> - Disable</span><br><code>on</code><span> - Enable</span></td></tr></tbody></table></figure><h2 id='shortcuts'><span>Shortcuts</span></h2><p><u><span>VLOOK™ features support keyboard shortcuts for efficiency.</span></u></p><p><em><mark><span>Shortcut Summary</span></mark></em></p><figure class='table-figure'><table><thead><tr><th style='text-align:center;' ><span>Category</span></th><th style='text-align:center;' ><span>Function</span></th><th style='text-align:center;' ><span>Shortcut</span></th></tr></thead><tbody><tr><td style='text-align:center;' ><span>Common</span></td><td style='text-align:center;' ><span>Toggle Dark Mode</span></td><td style='text-align:center;' ><kbd><span>D</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Show/hide </span><a href='#navigation-center'><span>Navigation Center</span></a></td><td style='text-align:center;' ><kbd><span>N</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Search navigation content</span></td><td style='text-align:center;' ><kbd><span>/</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Open </span><a href='#link-map'><span>Link Map</span></a></td><td style='text-align:center;' ><kbd><span>M</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Open </span><a href='#link-validation--standardization'><span>Broken Links</span></a></td><td style='text-align:center;' ><kbd><span>E</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Open navigation history</span></td><td style='text-align:center;' ><kbd><span>H</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Publish as PDF</span></td><td style='text-align:center;' ><kbd><span>⌘ command</span></kbd><span> / </span><kbd><span>⌃ Ctrl</span></kbd><span> + </span><kbd><span>P</span></kbd></td></tr><tr><td style='text-align:center;' ><a href='guide2-en.md#°Tab Group'><span>Tab Groups</span></a></td><td style='text-align:center;' ><span>Next tab content</span></td><td style='text-align:center;' ><kbd><span>tab</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Previous tab content</span></td><td style='text-align:center;' ><kbd><span>⇧ Shift</span></kbd><span> + </span><kbd><span>tab</span></kbd></td></tr><tr><td style='text-align:center;' ><a href='#table-reading-mode'><span>Table Reading Mode</span></a></td><td style='text-align:center;' ><span>Move focused cell</span></td><td style='text-align:center;' ><kbd><span>▲</span></kbd><span>  </span><kbd><span>▼</span></kbd><span>  </span><kbd><span>◀</span></kbd><span>  </span><kbd><span>▶</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Expand/collapse </span><a href='guide-en.md#Table Row Grouping &amp; Folding'><span>row groups</span></a></td><td style='text-align:center;' ><kbd><span>Enter ⏎</span></kbd></td></tr><tr><td style='text-align:center;' ><span>Presentation Tools</span><br><span>- </span><a href='#paragraph-roaming'><span>Paragraph Roaming</span></a></td><td style='text-align:center;' ><span>Start paragraph roaming</span></td><td style='text-align:center;' ><kbd><span>J</span></kbd><span> or </span><kbd><span>K</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Next paragraph</span></td><td style='text-align:center;' ><kbd><span>J</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Previous paragraph</span></td><td style='text-align:center;' ><kbd><span>K</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Jump </span><mark><span>5</span></mark><span> paragraphs</span></td><td style='text-align:center;' ><kbd><span>⌘ command</span></kbd><span> / </span><kbd><span>⌃ Ctrl</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Jump </span><mark><span>10</span></mark><span> paragraphs</span></td><td style='text-align:center;' ><kbd><span>⇧ shift</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Exit paragraph roaming</span></td><td style='text-align:center;' ><kbd><span>ESC</span></kbd></td></tr><tr><td style='text-align:center;' ><span>Presentation Tools -</span><br><span> Others</span></td><td style='text-align:center;' ><span>Enable/Disable </span><a href='#spotlight'><span>Spotlight</span></a></td><td style='text-align:center;' ><kbd><span>S</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Adjust spotlight size</span></td><td style='text-align:center;' ><kbd><span>⇧ Shift</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Enable/Disable </span><a href='#laser-pointer'><span>Laser Pointer</span></a></td><td style='text-align:center;' ><kbd><span>P</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Enable/Disable </span><a href='#zen-mode'><span>Zen Mode</span></a></td><td style='text-align:center;' ><kbd><span>Z</span></kbd></td></tr><tr><td style='text-align:center;' ><a href='#font-style'><span>Font Style</span></a></td><td style='text-align:center;' ><span>Select font style</span></td><td style='text-align:center;' ><kbd><span>A</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Exit font selection</span></td><td style='text-align:center;' ><kbd><span>ESC</span></kbd></td></tr><tr><td style='text-align:center;' ><a href='#chapter-navigation'><span>Chapter Navigation</span></a></td><td style='text-align:center;' ><span>Plugin Tuning Parameters</span><strong><span>Previous</span></strong><span> chapter</span></td><td style='text-align:center;' ><kbd><span>◀</span></kbd><span> or </span><kbd><span> , </span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Plugin Tuning Parameters</span><strong><span>Next</span></strong><span> chapter</span></td><td style='text-align:center;' ><kbd><span>▶</span></kbd><span> or </span><kbd><span> . </span></kbd></td></tr><tr><td style='text-align:center;' ><a href='#figure-navigation'><span>Figure Navigation</span></a></td><td style='text-align:center;' ><span>Start Figure Navigation</span></td><td style='text-align:center;' ><kbd><span>I</span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Plugin Tuning Parameters</span><strong><span>Previous</span></strong><span> image</span></td><td style='text-align:center;' ><kbd><span>◀</span></kbd><span> or </span><kbd><span> , </span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Plugin Tuning Parameters</span><strong><span>Next</span></strong><span> image</span></td><td style='text-align:center;' ><kbd><span>▶</span></kbd><span> or </span><kbd><span> . </span></kbd></td></tr><tr><td style='text-align:center;' ><span>:</span></td><td style='text-align:center;' ><span>Exit Figure Navigation</span></td><td style='text-align:center;' ><kbd><span>ESC</span></kbd></td></tr><tr><td style='text-align:center;' ><a href='#table-navigation'><span>Table Navigation</span></a></td><td style='text-align:center;' ><span>Same as described in “</span><strong><span>Figure Navigation</span></strong><span>”</span></td><td style='text-align:center;' ><span>==</span></td></tr></tbody></table></figure><hr /><p><span>For feedback: </span><a href='https://qm.qq.com/q/O0tNC6WBWe'><img src="pic/feedback-via-email.svg?darksrc=invert#icon" alt="Feedback via Email"><span>  </span><img src="pic/feedback-via-qq.svg?darksrc=invert#icon" alt="Feedback via QQ"></a><span>  </span><a href='https://t.me/vlook_markdown'><img src="pic/feedback-via-telegram.svg#icon" alt="Feedback via Telegram"></a></p><h1 id='extended-content'><span>Extended Content</span></h1><h2 id='heading-content-notes'><span>Heading Content Notes</span></h2><ol start='' ><li><p><span>Avoid punctuation in headings (e.g. </span><code>，</code><span> </span><code>、</code><span> </span><code>？</code><span> </span><code>_</code><span> etc.)</span></p><ol start='' ><li><p><span>If necessary, omit them when linking to the heading</span></p></li><li><p><span>Example: For heading &quot;Title、Title？&quot;, link as </span><code>标题标题</code></p></li></ol></li><li><p><span>Avoid spaces in headings - replace with hyphens </span><code>-</code></p></li></ol><h2 id='image-address-extension-notes'><span>Image Address Extension Notes</span></h2><p><em><sup><span>tab</span></sup></em></p><blockquote><p><strong><span>Image Address without Query parameters</span></strong></p><ul><li><p><span>Add </span><code>?</code><span> before URL parameters;</span></p></li><li><p><span>For existing parameters, separate with </span><code>&amp;</code><span>.</span></p></li></ul><p><strong><span>Example-1:</span></strong><span> </span><code>![Caption](xxx.png?darksrc=invert)</code></p><p><strong><span>Example-2:</span></strong><span> </span><code>![Caption](xxx.png?darksrc=invert#icon)</code></p><div class="md-alert md-alert-important important"><p><span class='md-alert-text md-alert-text-important'><svg viewBox="0 0 16 16" version="1.1" width="1em" height="1em" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>Important</span><br></p><p><span>If URL contains anchor (e.g. </span><code>xxx.png#icon</code><span>), add Query parameters before anchor.</span></p></div></blockquote><blockquote><p><strong><span>Image URL Anchors</span></strong></p><ul><li><p><span>Use anchors for quick image formatting, see: </span><a href='guide-en.md#°Image'><span>°Images</span></a></p></li><li><p><span>Multiple anchors allowed, e.g. </span><code>#card#fixmax</code><span> </span></p></li></ul></blockquote><h2 id='color-wheel-schemes'><del><span>Color Wheel Schemes</span></del></h2><figure class='table-figure'><table><thead><tr><th><span>Scheme Example</span></th><th><span>Description</span></th></tr></thead><tbody><tr><td><img src="pic/单色.png?srcset=@2x#logo" alt="Monochromatic"></td><td><mark><span>Monochromatic</span></mark><br><span>Uses dark/medium/light tones of one color</span><br><br><span>Creates lightness hierarchy without color variation.</span><br><span>Always produces reliable results in design.</span></td></tr><tr><td><img src="pic/类比色.png?srcset=@2x#logo" alt="Analogous"></td><td><mark><span>Analogous</span></mark><br><span>Adjacent colors on wheel (e.g. yellow-orange, yellow, orange)</span><br><br><span>Shares common primary colors (yellow/red here).</span><br><span>Creates low-contrast harmony.</span><br><span>Rich and visually pleasing.</span></td></tr><tr><td><img src="pic/补色.png?srcset=@2x#logo" alt="Complementary"></td><td><mark><span>Complementary</span></mark><br><span>Opposite colors on wheel (e.g. red/green)</span><br><br><span>Strong contrast conveys energy/excitement.</span><br><span>Best when one color dominates (e.g. blue area with orange dots).</span></td></tr><tr><td><img src="pic/分裂补色.png?srcset=@2x#logo" alt="Split-Complementary"></td><td><mark><span>Split-Complementary</span></mark><br><span>Base color + analogs of its complement</span><br><br><span>Combines analogous harmony with complementary contrast.</span><br><span>Red stands out more in this example.</span></td></tr><tr><td><img src="pic/二次色.png?srcset=@2x#logo" alt="Triadic"></td><td><mark><span>Triadic</span></mark><br><span>Secondary colors naturally harmonize (green/orange/purple)</span><br><br><span>Any two share one primary color.</span><br><span>All three together create rich, balanced palettes.</span></td></tr><tr><td><img src="pic/原色.png?srcset=@2x#logo" alt="Primary"></td><td><mark><span>Primary</span></mark><br><span>Rare to use all three primaries</span><br><br><span>Red+yellow is popular (fast food/gas stations).</span><br><span>Blue+red works when separated (avoids clash).</span></td></tr></tbody></table></figure><div class='footnotes-area'  ><hr/>
<div class='footnote-line'><span class='md-fn-count'>1</span> <span>Mermaid is a library for drawing flowcharts, state diagrams, sequence diagrams, Gantt charts, etc., using JS for local rendering, widely integrated in many Markdown editors. See </span><a href='https://mermaidjs.github.io'><span>Mermaid Official Site</span></a><span> or VLOOK™ example document &quot;</span><a href='https://madmaxchow.github.io/VLOOK/chart.md'><span>Scripted Charts for Markdown</span></a><span>&quot;</span> <a name='dfref-footnote-1' href='#ref-footnote-1' title='back to document' class='reversefootnote' >↩</a></div>
<div class='footnote-line'><span class='md-fn-count'>2</span> <span>This is a VLOOK™ optimized footnote</span> <a name='dfref-footnote-2' href='#ref-footnote-2' title='back to document' class='reversefootnote' >↩</a></div></div></div></div>
</body>
</html>