index.html

<!doctype html>
<html lang="en-US" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="generator" content="VuePress 2.0.0-rc.23" />
    <meta name="theme" content="VuePress Theme Hope 2.0.0-rc.88" />
    <style>
      :root {
        --vp-c-bg: #fff;
      }

      [data-theme="dark"] {
        --vp-c-bg: #1b1b1f;
      }

      html,
      body {
        background: var(--vp-c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
      const systemDarkMode =
        window.matchMedia &&
        window.matchMedia("(prefers-color-scheme: dark)").matches;

      if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
        document.documentElement.setAttribute("data-theme", "dark");
      }
    </script>
    <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","name":"Home"}</script><meta property="og:url" content="https://theme-hope.vuejs.press/"><meta property="og:site_name" content="vuepress-theme-hope"><meta property="og:title" content="Home"><meta property="og:type" content="website"><meta property="og:locale" content="en-US"><meta property="og:locale:alternate" content="zh-CN"><meta property="og:updated_time" content="2025-05-08T06:08:23.000Z"><meta property="article:modified_time" content="2025-05-08T06:08:23.000Z"><link rel="alternate" hreflang="zh-cn" href="https://theme-hope.vuejs.press/zh/"><link rel="alternate" type="application/atom+xml" href="https://theme-hope.vuejs.press/atom.xml" title="vuepress-theme-hope Atom Feed"><link rel="alternate" type="application/json" href="https://theme-hope.vuejs.press/feed.json" title="vuepress-theme-hope JSON Feed"><link rel="alternate" type="application/rss+xml" href="https://theme-hope.vuejs.press/rss.xml" title="vuepress-theme-hope RSS Feed"><link rel="icon" href="https://theme-hope-assets.vuejs.press/icon/chrome-mask-512.png" type="image/png" sizes="512x512"><link rel="icon" href="https://theme-hope-assets.vuejs.press/icon/chrome-mask-192.png" type="image/png" sizes="512x512"><link rel="icon" href="https://theme-hope-assets.vuejs.press/icon/chrome-512.png" type="image/png" sizes="192x192"><link rel="icon" href="https://theme-hope-assets.vuejs.press/icon/chrome-192.png" type="image/png" sizes="192x192"><meta name="theme-color" content="#46bd87"><link rel="apple-touch-icon" href="https://theme-hope-assets.vuejs.press/icon/apple-icon-152.png"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="google-site-verification" content="qG3soux9jAKB4Q_DYf7yj1p5cEIuib6yG4zDhpmv2_E"><link rel="icon" href="/favicon.ico"><title>Home | vuepress-theme-hope</title><meta name="description" content="A VuePress theme with tons of features✨">
    <link rel="preload" href="/assets/style-DkX5q0Ye.css" as="style"><link rel="stylesheet" href="/assets/style-DkX5q0Ye.css">
    
    
  </head>
  <body>
    <div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content" class="vp-skip-link sr-only">Skip to main content</a><!--]--><div class="theme-container no-sidebar external-link-icon" vp-container><!--[--><header id="navbar" class="vp-navbar" vp-navbar><div class="vp-navbar-start"><button type="button" class="vp-toggle-sidebar-button" title="Toggle Sidebar"><span class="icon"></span></button><!--[--><a class="route-link vp-brand" href="/" aria-label="Take me home"><img class="vp-nav-logo" src="https://theme-hope-assets.vuejs.press/logo.svg" alt><!----><!----></a><!--]--></div><div class="vp-navbar-center"><!--[--><nav class="vp-nav-links"><div class="vp-nav-item hide-in-mobile"><a class="route-link auto-link" href="/get-started/" aria-label="Get Started"><!--[--><i class="vp-icon fas fa-signs-post" sizing="height"></i><!--]-->Get Started<!----></a></div><div class="vp-nav-item hide-in-mobile"><a class="route-link auto-link" href="/guide/" aria-label="Guide"><!--[--><i class="vp-icon fas fa-lightbulb" sizing="height"></i><!--]-->Guide<!----></a></div><div class="vp-nav-item hide-in-mobile"><a class="route-link auto-link" href="/config/" aria-label="Config"><!--[--><i class="vp-icon fas fa-gears" sizing="height"></i><!--]-->Config<!----></a></div><div class="vp-nav-item hide-in-mobile"><a class="route-link auto-link" href="/faq/" aria-label="FAQ"><!--[--><i class="vp-icon fas fa-circle-question" sizing="height"></i><!--]-->FAQ<!----></a></div><div class="vp-nav-item hide-in-mobile"><a class="route-link auto-link" href="/demo/" aria-label="Demos"><!--[--><i class="vp-icon fas fa-splotch" sizing="height"></i><!--]-->Demos<!----></a></div><div class="vp-nav-item hide-in-mobile"><div class="vp-dropdown-wrapper"><button type="button" class="vp-dropdown-title" aria-label="Others"><!--[--><i class="vp-icon fas fa-circle-info" sizing="height"></i>Others<!--]--><span class="arrow"></span><ul class="vp-dropdown"><li class="vp-dropdown-item"><h4 class="vp-dropdown-subtitle">Cookbook</h4><ul class="vp-dropdown-subitems"><li class="vp-dropdown-subitem"><a class="route-link auto-link" href="/cookbook/markdown/" aria-label="Markdown Introduction"><!--[--><i class="vp-icon fab fa-markdown fa-fw" sizing="both"></i><!--]-->Markdown Introduction<!----></a></li><li class="vp-dropdown-subitem"><a class="route-link auto-link" href="/cookbook/vuepress/" aria-label="About VuePress"><!--[--><i class="vp-icon fab fa-vuejs fa-fw" sizing="both"></i><!--]-->About VuePress<!----></a></li></ul></li><li class="vp-dropdown-item"><h4 class="vp-dropdown-subtitle">Project</h4><ul class="vp-dropdown-subitems"><li class="vp-dropdown-subitem"><a class="route-link auto-link" href="/changelog.html" aria-label="Changelog"><!--[--><i class="vp-icon fas fa-clock fa-fw" sizing="both"></i><!--]-->Changelog<!----></a></li><li class="vp-dropdown-subitem"><a class="route-link auto-link" href="/contribution.html" aria-label="Contribution Guide"><!--[--><i class="vp-icon fas fa-lightbulb fa-fw" sizing="both"></i><!--]-->Contribution Guide<!----></a></li></ul></li></ul></button></div></div></nav><!--]--></div><div class="vp-navbar-end"><!--[--><div class="vp-nav-item"><div class="vp-dropdown-wrapper"><button type="button" class="vp-dropdown-title" aria-label="Select language"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon i18n-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="i18n icon" name="i18n" style="width:1rem;height:1rem;vertical-align:middle;"><path d="M379.392 460.8 494.08 575.488l-42.496 102.4L307.2 532.48 138.24 701.44l-71.68-72.704L234.496 460.8l-45.056-45.056c-27.136-27.136-51.2-66.56-66.56-108.544h112.64c7.68 14.336 16.896 27.136 26.112 35.84l45.568 46.08 45.056-45.056C382.976 312.32 409.6 247.808 409.6 204.8H0V102.4h256V0h102.4v102.4h256v102.4H512c0 70.144-37.888 161.28-87.04 210.944L378.88 460.8zM576 870.4 512 1024H409.6l256-614.4H768l256 614.4H921.6l-64-153.6H576zM618.496 768h196.608L716.8 532.48 618.496 768z"></path></svg><!--]--><span class="arrow"></span><ul class="vp-dropdown"><li class="vp-dropdown-item"><a class="route-link route-link-active auto-link" href="/" aria-label="English"><!---->English<!----></a></li><li class="vp-dropdown-item"><a class="route-link auto-link" href="/zh/" aria-label="简体中文"><!---->简体中文<!----></a></li><li class="vp-dropdown-item"><a class="auto-link external-link" href="https://theme-hope-ru.vuejs.press/https:/theme-hope-ru.vuejs.press/:route" aria-label="Русский" rel="noopener noreferrer" target="_blank"><!---->Русский<!----></a></li></ul></button></div></div><div class="vp-nav-item vp-action"><a class="vp-action-link" href="https://t.me/vuepressthemehope" target="_blank" rel="noopener noreferrer" aria-label="telegram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="width:1.25rem;height:1.25rem;vertical-align:middle"><path d="m417.28 795.733 11.947-180.48L756.907 320c14.506-13.227-2.987-19.627-22.187-8.107L330.24 567.467 155.307 512c-37.547-10.667-37.974-36.693 8.533-55.467l681.387-262.826c31.146-14.08 61.013 7.68 49.066 55.466L778.24 795.733c-8.107 38.827-31.573 48.214-64 30.294L537.6 695.467l-84.907 82.346c-9.813 9.814-17.92 17.92-35.413 17.92Z" fill="currentColor"/></svg></a></div><div class="vp-nav-item vp-action"><a class="vp-action-link" href="https://github.com/vuepress-theme-hope/vuepress-theme-hope" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="github icon" name="github" style="width:1.25rem;height:1.25rem;vertical-align:middle;"><path d="M511.957 21.333C241.024 21.333 21.333 240.981 21.333 512c0 216.832 140.544 400.725 335.574 465.664 24.49 4.395 32.256-10.07 32.256-23.083 0-11.69.256-44.245 0-85.205-136.448 29.61-164.736-64.64-164.736-64.64-22.315-56.704-54.4-71.765-54.4-71.765-44.587-30.464 3.285-29.824 3.285-29.824 49.195 3.413 75.179 50.517 75.179 50.517 43.776 75.008 114.816 53.333 142.762 40.79 4.523-31.66 17.152-53.377 31.19-65.537-108.971-12.458-223.488-54.485-223.488-242.602 0-53.547 19.114-97.323 50.517-131.67-5.035-12.33-21.93-62.293 4.779-129.834 0 0 41.258-13.184 134.912 50.346a469.803 469.803 0 0 1 122.88-16.554c41.642.213 83.626 5.632 122.88 16.554 93.653-63.488 134.784-50.346 134.784-50.346 26.752 67.541 9.898 117.504 4.864 129.834 31.402 34.347 50.474 78.123 50.474 131.67 0 188.586-114.73 230.016-224.042 242.09 17.578 15.232 33.578 44.672 33.578 90.454v135.85c0 13.142 7.936 27.606 32.854 22.87C862.25 912.597 1002.667 728.747 1002.667 512c0-271.019-219.648-490.667-490.71-490.667z"></path></svg></a></div><div class="vp-nav-item hide-in-mobile"><button type="button" class="vp-appearance-button" tabindex="-1" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon outlook-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="outlook icon" name="outlook"><path d="M224 800c0 9.6 3.2 44.8 6.4 54.4 6.4 48-48 76.8-48 76.8s80 41.6 147.2 0 134.4-134.4 38.4-195.2c-22.4-12.8-41.6-19.2-57.6-19.2C259.2 716.8 227.2 761.6 224 800zM560 675.2l-32 51.2c-51.2 51.2-83.2 32-83.2 32 25.6 67.2 0 112-12.8 128 25.6 6.4 51.2 9.6 80 9.6 54.4 0 102.4-9.6 150.4-32l0 0c3.2 0 3.2-3.2 3.2-3.2 22.4-16 12.8-35.2 6.4-44.8-9.6-12.8-12.8-25.6-12.8-41.6 0-54.4 60.8-99.2 137.6-99.2 6.4 0 12.8 0 22.4 0 12.8 0 38.4 9.6 48-25.6 0-3.2 0-3.2 3.2-6.4 0-3.2 3.2-6.4 3.2-6.4 6.4-16 6.4-16 6.4-19.2 9.6-35.2 16-73.6 16-115.2 0-105.6-41.6-198.4-108.8-268.8C704 396.8 560 675.2 560 675.2zM224 419.2c0-28.8 22.4-51.2 51.2-51.2 28.8 0 51.2 22.4 51.2 51.2 0 28.8-22.4 51.2-51.2 51.2C246.4 470.4 224 448 224 419.2zM320 284.8c0-22.4 19.2-41.6 41.6-41.6 22.4 0 41.6 19.2 41.6 41.6 0 22.4-19.2 41.6-41.6 41.6C339.2 326.4 320 307.2 320 284.8zM457.6 208c0-12.8 12.8-25.6 25.6-25.6 12.8 0 25.6 12.8 25.6 25.6 0 12.8-12.8 25.6-25.6 25.6C470.4 233.6 457.6 220.8 457.6 208zM128 505.6C128 592 153.6 672 201.6 736c28.8-60.8 112-60.8 124.8-60.8-16-51.2 16-99.2 16-99.2l316.8-422.4c-48-19.2-99.2-32-150.4-32C297.6 118.4 128 291.2 128 505.6zM764.8 86.4c-22.4 19.2-390.4 518.4-390.4 518.4-22.4 28.8-12.8 76.8 22.4 99.2l9.6 6.4c35.2 22.4 80 12.8 99.2-25.6 0 0 6.4-12.8 9.6-19.2 54.4-105.6 275.2-524.8 288-553.6 6.4-19.2-3.2-32-19.2-32C777.6 76.8 771.2 80 764.8 86.4z"></path></svg><div class="vp-appearance-dropdown"><!----></div></button></div><!--[--><div id="docsearch-container" style="display:none;"></div><div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"><svg width="15" height="15" class="DocSearch-Control-Key-Icon"><path d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953" stroke-width="1.2" stroke="currentColor" fill="none" stroke-linecap="square"></path></svg></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--><!--]--><button type="button" class="vp-toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false" aria-controls="nav-screen"><span><span class="vp-top"></span><span class="vp-middle"></span><span class="vp-bottom"></span></span></button></div></header><!----><!--]--><!----><div class="toggle-sidebar-wrapper"><span class="arrow start"></span></div><aside id="sidebar" class="vp-sidebar" vp-sidebar><!----><ul class="vp-sidebar-links"></ul><!----></aside><!--[--><main id="main-content" class="vp-page vp-project-home" aria-labelledby="main-title"><!----><header class="vp-hero-info-wrapper" style="min-height:600px;"><!--[--><div class="vp-hero-mask light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/6-light.svg);background-attachment:fixed;"></div><div class="vp-hero-mask dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/6-dark.svg);background-attachment:fixed;"></div><!--]--><div class="vp-hero-info"><!--[--><!--[--><img class="vp-hero-image" src="https://theme-hope-assets.vuejs.press/logo.svg" alt="vuepress-theme-hope"><canvas id="hero-logo" style="display:none;opacity:0;"></canvas><!--]--><!--]--><div class="vp-hero-infos"><h1 id="main-title" class="vp-hero-title">VuePress Theme Hope</h1><div id="main-description">A VuePress theme with tons of features✨</div><p class="vp-hero-actions"><a class="route-link auto-link vp-hero-action primary no-external-link-icon" href="/get-started/" aria-label="Get Started"><!--[--><i class="vp-icon fas fa-signs-post fa-fw" sizing="both"></i><!--]-->Get Started<!----></a><a class="route-link auto-link vp-hero-action default no-external-link-icon" href="/guide/" aria-label="Guide"><!--[--><i class="vp-icon fas fa-lightbulb fa-fw" sizing="both"></i><!--]-->Guide<!----></a><a class="route-link auto-link vp-hero-action default no-external-link-icon" href="/demo/" aria-label="Demos"><!--[--><i class="vp-icon fas fa-star fa-fw" sizing="both"></i><!--]-->Demos<!----></a></p></div></div><!----></header><!----><!--[--><div class="vp-highlight-wrapper" style=""><div class="vp-highlight-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/3-light.svg);"></div><div class="vp-highlight-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/3-dark.svg);"></div><div class="vp-highlight"><!--[--><img class="vp-highlight-image" src="/assets/image/box.svg" alt><!----><!--]--><!--[--><div class="vp-highlight-info-wrapper"><div class="vp-highlight-info"><h2 class="vp-highlight-header">Easy to install</h2><!----><ul class="vp-highlights"><li class="vp-highlight-item-wrapper"><div class="vp-highlight-item"><h3 class="vp-highlight-title"><!----><span>Run <code>pnpm create vuepress-theme-hope hope-project</code> to create a new project with this theme.</span></h3><!----></div></li><li class="vp-highlight-item-wrapper"><div class="vp-highlight-item"><h3 class="vp-highlight-title"><!----><span>Run <code>pnpm create vuepress-theme-hope add .</code> in your project root to create a new project with this theme.</span></h3><!----></div></li></ul></div></div><!--]--></div></div><div class="vp-feature-wrapper"><div class="vp-feature-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/2-light.svg);background-repeat:repeat;background-size:initial;"></div><div class="vp-feature-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/2-dark.svg);background-repeat:repeat;background-size:initial;"></div><div class="vp-feature" style=""><!--[--><img class="vp-feature-image" src="/assets/image/markdown.svg" alt><!----><!--]--><!--[--><h2 class="vp-feature-header">Add things you want in markdown</h2><div class="vp-feature-description">We extended the standard commonMark specification and added tons of new features for you.</div><!--]--><div class="vp-features"><a class="route-link vp-feature-item link" href="/guide/markdown/others.html#link-check" aria-label="Links Check"><h3 class="vp-feature-title"><i class="vp-icon fas fa-clipboard-check" sizing="height"></i><span>Links Check</span></h3><div class="vp-feature-details">Check markdown links</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/stylize/hint.html" aria-label="Hint box"><h3 class="vp-feature-title"><i class="vp-icon fas fa-box-archive" sizing="height"></i><span>Hint box</span></h3><div class="vp-feature-details">Decorate Markdown content with styles</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/stylize/alert.html" aria-label="GFM alerts"><h3 class="vp-feature-title"><i class="vp-icon fas fa-bell" sizing="height"></i><span>GFM alerts</span></h3><div class="vp-feature-details">GFM alert box</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/content/tabs.html" aria-label="Tabs"><h3 class="vp-feature-title"><i class="vp-icon fas fa-table-columns" sizing="height"></i><span>Tabs</span></h3><div class="vp-feature-details">Group similar content with tabs and switch them together</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/code/code-tabs.html" aria-label="Code Tabs"><h3 class="vp-feature-title"><i class="vp-icon fas fa-code" sizing="height"></i><span>Code Tabs</span></h3><div class="vp-feature-details">Group similar codes with tabs</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/stylize/align.html" aria-label="Custom Align"><h3 class="vp-feature-title"><i class="vp-icon fas fa-align-center" sizing="height"></i><span>Custom Align</span></h3><div class="vp-feature-details">Let you decide to align paragraphs in the way you like</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/stylize/attrs.html" aria-label="Attrs"><h3 class="vp-feature-title"><i class="vp-icon fas fa-code" sizing="height"></i><span>Attrs</span></h3><div class="vp-feature-details">Allow you to add attributes for Markdown content</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/stylize/sup-sub.html" aria-label="Superscript and subscript"><h3 class="vp-feature-title"><i class="vp-icon fas fa-superscript" sizing="height"></i><span>Superscript and subscript</span></h3><div class="vp-feature-details">Inserting superscript and subscript</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/content/footnote.html" aria-label="Footnote"><h3 class="vp-feature-title"><i class="vp-icon fas fa-quote-left" sizing="height"></i><span>Footnote</span></h3><div class="vp-feature-details">Your Markdown now support footnotes</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/stylize/mark.html" aria-label="Mark"><h3 class="vp-feature-title"><i class="vp-icon fas fa-highlighter" sizing="height"></i><span>Mark</span></h3><div class="vp-feature-details">Mark and highlight contents</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/stylize/spoiler.html" aria-label="Spoiler"><h3 class="vp-feature-title"><i class="vp-icon fas fa-eraser" sizing="height"></i><span>Spoiler</span></h3><div class="vp-feature-details">Mark spoiler contents</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/grammar/tasklist.html" aria-label="Tasklist"><h3 class="vp-feature-title"><i class="vp-icon fas fa-square-check" sizing="height"></i><span>Tasklist</span></h3><div class="vp-feature-details">Use tasklist in Markdown</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/grammar/image.html" aria-label="Image syntax"><h3 class="vp-feature-title"><i class="vp-icon fas fa-image" sizing="height"></i><span>Image syntax</span></h3><div class="vp-feature-details">improve syntax to specify size and color scheme</div></a><a class="route-link vp-feature-item link" href="/guide/component/grammar.html" aria-label="Component Support"><h3 class="vp-feature-title"><i class="vp-icon fas fa-puzzle-piece" sizing="height"></i><span>Component Support</span></h3><div class="vp-feature-details">Easily insert components in Markdown</div></a><a class="route-link vp-feature-item link" href="/guide/component/built-in.html" aria-label="Components"><h3 class="vp-feature-title"><i class="vp-icon fas fa-puzzle-piece" sizing="height"></i><span>Components</span></h3><div class="vp-feature-details">Common components out fo box</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/chart/chartjs.html" aria-label="Chart Support"><h3 class="vp-feature-title"><i class="vp-icon fas fa-chart-simple" sizing="height"></i><span>Chart Support</span></h3><div class="vp-feature-details">Display charts in Markdown</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/chart/flowchart.html" aria-label="Flowchart Support"><h3 class="vp-feature-title"><i class="vp-icon fas fa-route" sizing="height"></i><span>Flowchart Support</span></h3><div class="vp-feature-details">Create your flowchart in Markdown</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/chart/mermaid.html" aria-label="Mermaid Support"><h3 class="vp-feature-title"><i class="vp-icon fas fa-chart-pie" sizing="height"></i><span>Mermaid Support</span></h3><div class="vp-feature-details">Add mermaid diagram in Markdown</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/chart/plantuml.html" aria-label="Plantuml Support"><h3 class="vp-feature-title"><i class="vp-icon fas fa-diagram-project" sizing="height"></i><span>Plantuml Support</span></h3><div class="vp-feature-details">Add plantuml in Markdown</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/grammar/math.html" aria-label="Tex Support"><h3 class="vp-feature-title"><i class="vp-icon fas fa-square-root-variable" sizing="height"></i><span>Tex Support</span></h3><div class="vp-feature-details">Markdown now have Tex Support so you can write your formula</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/content/include.html" aria-label="Include snippet Support"><h3 class="vp-feature-title"><i class="vp-icon fab fa-markdown" sizing="height"></i><span>Include snippet Support</span></h3><div class="vp-feature-details">split your docs with different parts and import them in Markdown</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/code/playground.html" aria-label="Playground Support"><h3 class="vp-feature-title"><i class="vp-icon fas fa-code" sizing="height"></i><span>Playground Support</span></h3><div class="vp-feature-details">You can add playground in Markdown files</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/code/kotlin-playground.html" aria-label="Kotlin playground Support"><h3 class="vp-feature-title"><i class="vp-icon fab fa-kickstarter" sizing="height"></i><span>Kotlin playground Support</span></h3><div class="vp-feature-details">Reactive kotlin playground</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/code/vue-playground.html" aria-label="Vue playground Support"><h3 class="vp-feature-title"><i class="vp-icon fab fa-vuejs" sizing="height"></i><span>Vue playground Support</span></h3><div class="vp-feature-details">Show living vue component in playground</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/code/sandpack.html" aria-label="Sandpack playground Support"><h3 class="vp-feature-title"><i class="vp-icon fas fa-code" sizing="height"></i><span>Sandpack playground Support</span></h3><div class="vp-feature-details">A live coding environment driven by Sandpack.</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/code/demo.html" aria-label="Code Demo Support"><h3 class="vp-feature-title"><i class="vp-icon fas fa-laptop-code" sizing="height"></i><span>Code Demo Support</span></h3><div class="vp-feature-details">You can insert code demo easily</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/content/revealjs.html" aria-label="Presentation Support"><h3 class="vp-feature-title"><i class="vp-icon fas fa-person-chalkboard" sizing="height"></i><span>Presentation Support</span></h3><div class="vp-feature-details">Insert presentation in Markdown files via Reveal.js</div></a></div></div></div><div class="vp-highlight-wrapper" style=""><div class="vp-highlight-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/9-light.svg);"></div><div class="vp-highlight-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/9-dark.svg);"></div><div class="vp-highlight"><!--[--><img class="vp-highlight-image" src="/assets/image/ui.svg" alt><!----><!--]--><!--[--><div class="vp-highlight-info-wrapper"><div class="vp-highlight-info"><h2 class="vp-highlight-header">Customizable UI</h2><div class="vp-highlight-description">Customizable outlook with full a11y support.</div><ul class="vp-highlights"><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/interface/darkmode.html" aria-label="Dark Mode"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-circle-half-stroke vp-highlight-icon" sizing="height"></i><span>Dark Mode</span></h3><div class="vp-highlight-details">Switch between light and dark modes freely</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/interface/theme-color.html" aria-label="Customizable Theme Color"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-palette vp-highlight-icon" sizing="height"></i><span>Customizable Theme Color</span></h3><div class="vp-highlight-details">Set theme color with the brand color and even a picker</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/interface/others.html" aria-label="More"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-ellipsis vp-highlight-icon" sizing="height"></i><span>More</span></h3><div class="vp-highlight-details">RTL layout, print support, fullscreen button, etc.</div></a></li></ul></div></div><!--]--></div></div><div class="vp-highlight-wrapper" style=""><div class="vp-highlight-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/5-light.svg);"></div><div class="vp-highlight-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/5-dark.svg);"></div><div class="vp-highlight"><!--[--><img class="vp-highlight-image" src="/assets/image/layout.svg" alt><!----><!--]--><!--[--><div class="vp-highlight-info-wrapper"><div class="vp-highlight-info"><h2 class="vp-highlight-header">Improved layouts</h2><div class="vp-highlight-description">An awesome responsive layout</div><ul class="vp-highlights"><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/layout/navbar.html" aria-label="Navbar"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-window-maximize vp-highlight-icon" sizing="height"></i><span>Navbar</span></h3><div class="vp-highlight-details">Fully customizable navbar with improved mobile support</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/layout/sidebar.html" aria-label="Sidebar"><h3 class="vp-highlight-title"><i class="vp-icon fas fas fa-window-maximize fa-rotate-270 vp-highlight-icon" sizing="height"></i><span>Sidebar</span></h3><div class="vp-highlight-details">Generate sidebar based on page headings and file structure</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/layout/slides.html" aria-label="Slide Page"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-person-chalkboard vp-highlight-icon" sizing="height"></i><span>Slide Page</span></h3><div class="vp-highlight-details">Adding slide pages to display things you like</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/layout/" aria-label="Other Layout Improvement"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-object-group vp-highlight-icon" sizing="height"></i><span>Other Layout Improvement</span></h3><div class="vp-highlight-details">Improved page nav and new breadcrumb, footer and toc. We also bring you a brand new homepage.</div></a></li></ul></div></div><!--]--></div></div><div class="vp-feature-wrapper"><div class="vp-feature-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/1-light.svg);"></div><div class="vp-feature-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/1-dark.svg);"></div><div class="vp-feature" style=""><!--[--><img class="vp-feature-image" src="/assets/image/features.svg" alt><!----><!--]--><!--[--><h2 class="vp-feature-header">New features</h2><!----><!--]--><div class="vp-features"><a class="route-link vp-feature-item link" href="/guide/feature/catalog.html" aria-label="Catalog Page"><h3 class="vp-feature-title"><i class="vp-icon fas fa-network-wired" sizing="height"></i><span>Catalog Page</span></h3><div class="vp-feature-details">Auto generating catalog page and out of box catalog component</div></a><a class="route-link vp-feature-item link" href="/guide/feature/comment.html" aria-label="Pageviews and Comments"><h3 class="vp-feature-title"><i class="vp-icon fas fa-comment-dots" sizing="height"></i><span>Pageviews and Comments</span></h3><div class="vp-feature-details">Pageview statistics and comment support with 4 comment service</div></a><a class="route-link vp-feature-item link" href="/guide/feature/page-info.html" aria-label="Article Information"><h3 class="vp-feature-title"><i class="vp-icon fas fa-circle-info" sizing="height"></i><span>Article Information</span></h3><div class="vp-feature-details">Add author, writing date, reading time, word count and other information to your article</div></a><a class="route-link vp-feature-item link" href="/guide/feature/encrypt.html" aria-label="Article Encryption"><h3 class="vp-feature-title"><i class="vp-icon fas fa-lock" sizing="height"></i><span>Article Encryption</span></h3><div class="vp-feature-details">Encrypt you articles based on page links, so that only the one you want could see them</div></a><a class="route-link vp-feature-item link" href="/guide/feature/search.html" aria-label="Search"><h3 class="vp-feature-title"><i class="vp-icon fas fa-search" sizing="height"></i><span>Search</span></h3><div class="vp-feature-details">Support docsearch and client search</div></a><a class="route-link vp-feature-item link" href="/guide/markdown/code/fence.html" aria-label="Code Block"><h3 class="vp-feature-title"><i class="vp-icon fas fa-code" sizing="height"></i><span>Code Block</span></h3><div class="vp-feature-details">Customize code block themes, line number, highlight lines, copy button, etc.</div></a><a class="route-link vp-feature-item link" href="/guide/feature/photo-swipe.html" aria-label="Image Preview"><h3 class="vp-feature-title"><i class="vp-icon fas fa-image" sizing="height"></i><span>Image Preview</span></h3><div class="vp-feature-details">Support viewing, zooming, sharing your page images like a gallery</div></a></div></div></div><div class="vp-highlight-wrapper" style=""><div class="vp-highlight-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/5-light.svg);"></div><div class="vp-highlight-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/5-dark.svg);"></div><div class="vp-highlight"><!--[--><img class="vp-highlight-image" src="/assets/image/blog.svg" alt><!----><!--]--><!--[--><div class="vp-highlight-info-wrapper"><div class="vp-highlight-info"><h2 class="vp-highlight-header">Blogging</h2><div class="vp-highlight-description">Create personal blog with theme</div><ul class="vp-highlights"><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/blog/intro.html" aria-label="Blog features"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-blog vp-highlight-icon" sizing="height"></i><span>Blog features</span></h3><div class="vp-highlight-details">Listing your articles with their dates, tags and categories</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/blog/home.html" aria-label="Blog homepage"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-blog vp-highlight-icon" sizing="height"></i><span>Blog homepage</span></h3><div class="vp-highlight-details">New blog homepage</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/blog/blogger.html" aria-label="Blogger info"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-circle-info vp-highlight-icon" sizing="height"></i><span>Blogger info</span></h3><div class="vp-highlight-details">Customize avatar, name, slogan, introduction and social links</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/blog/timeline.html" aria-label="Timeline"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-clock vp-highlight-icon" sizing="height"></i><span>Timeline</span></h3><div class="vp-highlight-details">Read through blog posts in a timeline</div></a></li></ul></div></div><!--]--></div></div><div class="vp-highlight-wrapper" style=""><div class="vp-highlight-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/4-light.svg);"></div><div class="vp-highlight-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/4-dark.svg);"></div><div class="vp-highlight"><!--[--><img class="vp-highlight-image" src="/assets/image/advanced.svg" alt><!----><!--]--><!--[--><div class="vp-highlight-info-wrapper"><div class="vp-highlight-info"><h2 class="vp-highlight-header">Advanced</h2><div class="vp-highlight-description">Advanced features to improve site SEO and user experience</div><ul class="vp-highlights"><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/advanced/seo.html" aria-label="SEO Enhancement"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-dumbbell vp-highlight-icon" sizing="height"></i><span>SEO Enhancement</span></h3><div class="vp-highlight-details">Optimize pages for search engines</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/advanced/sitemap.html" aria-label="Sitemap"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-sitemap vp-highlight-icon" sizing="height"></i><span>Sitemap</span></h3><div class="vp-highlight-details">Generate a Sitemap for your site</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/advanced/feed.html" aria-label="Feed"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-rss vp-highlight-icon" sizing="height"></i><span>Feed</span></h3><div class="vp-highlight-details">Generate feed to allow users to subscribe it</div></a></li><li class="vp-highlight-item-wrapper link"><a class="route-link vp-highlight-item link" href="/guide/advanced/pwa.html" aria-label="PWA"><h3 class="vp-highlight-title"><i class="vp-icon fas fa-mobile-screen vp-highlight-icon" sizing="height"></i><span>PWA</span></h3><div class="vp-highlight-details">Make your site more like an APP</div></a></li></ul></div></div><!--]--></div></div><!--]--><div class="" vp-content><!----><div id="markdown-content"></div><!----><!----><!----></div></main><!--]--><footer class="vp-footer-wrapper" vp-footer><div class="vp-footer"><a href="https://www.netlify.com" target="_blank">
  <img src="https://www.netlify.com/img/global/badges/netlify-light.svg" alt="Deploys by Netlify" data-mode="lightmode-only">
  <img src="https://www.netlify.com/img/global/badges/netlify-dark.svg" alt="Deploys by Netlify" data-mode="darkmode-only">
</a>
<br/>
Theme by <a href="https://theme-hope.vuejs.press" target="_blank">VuePress Theme Hope</a> | MIT Licensed, Copyright © 2019-present Mr.Hope
</div><!----></footer></div><!--]--><!--[--><!----><!--[--><!--]--><!--]--><!--]--></div>
    <script type="module" src="/assets/app-BPgIfE2C.js" defer></script>
  </body>
</html>