<!doctype html> <html lang="en-US" dir="ltr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Markdown Extension Examples | News Analzye Docs</title> <meta name="description" content="The documentation for news analyze the project." /> <meta name="generator" content="VitePress v1.6.3" /> <link rel="preload stylesheet" href="/docs/assets/style.DuOwLuGy.css" as="style" /> <link rel="preload stylesheet" href="/docs/vp-icons.css" as="style" /> <script type="module" src="/docs/assets/app.Da36Cfp3.js"></script> <link rel="preload" href="/docs/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="" /> <link rel="modulepreload" href="/docs/assets/chunks/theme.u6X5xXdX.js" /> <link rel="modulepreload" href="/docs/assets/chunks/framework.WowTybjF.js" /> <link rel="modulepreload" href="/docs/assets/markdown-examples.md.OYFiuX35.lean.js" /> <script id="check-dark-mode"> (() => { const e = localStorage.getItem("vitepress-theme-appearance") || "auto", a = window.matchMedia("(prefers-color-scheme: dark)").matches; (!e || e === "auto" ? a : e === "dark") && document.documentElement.classList.add("dark"); })(); </script> <script id="check-mac-os"> document.documentElement.classList.toggle( "mac", /Mac|iPhone|iPod|iPad/i.test(navigator.platform), ); </script> </head> <body> <div id="app"> <div class="Layout" data-v-5d98c3a5> <!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span ><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53 >Skip to content</a ><!--]--><!----> <header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad> <div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345> <div class="wrapper" data-v-6aa21345> <div class="container" data-v-6aa21345> <div class="title" data-v-6aa21345> <div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4 > <a class="title" href="/docs/" data-v-1168a8e4 ><!--[--><!--]--><!----><span data-v-1168a8e4 >News Analzye Docs</span ><!--[--><!--]--></a > </div> </div> <div class="content" data-v-6aa21345> <div class="content-body" data-v-6aa21345> <!--[--><!--]--> <div class="VPNavBarSearch search" data-v-6aa21345> <!----> </div> <nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963 > <span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963 > Main Navigation </span ><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/" tabindex="0" data-v-dc692963 data-v-e56f3d57 ><!--[--><span data-v-e56f3d57>Home</span ><!--]--></a ><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/docs/markdown-examples.html" tabindex="0" data-v-dc692963 data-v-e56f3d57 ><!--[--><span data-v-e56f3d57>Examples</span ><!--]--></a ><!--]--><!--]--> </nav> <!----> <div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767 > <button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3 > <span class="check" data-v-1d5665e3 ><span class="icon" data-v-1d5665e3 ><!--[--><span class="vpi-sun sun" data-v-5337faa4 ></span ><span class="vpi-moon moon" data-v-5337faa4></span ><!--]--></span ></span > </button> </div> <div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406 > <!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5 ><span class="vpi-social-github"></span></a ><!--]--> </div> <div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2 > <button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2 > <span class="vpi-more-horizontal icon" data-v-cf11d7a2 ></span> </button> <div class="menu" data-v-cf11d7a2> <div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113> <!----><!--[--><!--[--><!----> <div class="group" data-v-bb2aa2f0> <div class="item appearance" data-v-bb2aa2f0> <p class="label" data-v-bb2aa2f0>Appearance</p> <div class="appearance-action" data-v-bb2aa2f0> <button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3 > <span class="check" data-v-1d5665e3 ><span class="icon" data-v-1d5665e3 ><!--[--><span class="vpi-sun sun" data-v-5337faa4 ></span ><span class="vpi-moon moon" data-v-5337faa4 ></span ><!--]--></span ></span > </button> </div> </div> </div> <div class="group" data-v-bb2aa2f0> <div class="item social-links" data-v-bb2aa2f0> <div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406 > <!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5 ><span class="vpi-social-github"></span></a ><!--]--> </div> </div> </div> <!--]--><!--]--> </div> </div> </div> <!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c > <span class="container" data-v-e5dd9c1c ><span class="top" data-v-e5dd9c1c></span ><span class="middle" data-v-e5dd9c1c></span ><span class="bottom" data-v-e5dd9c1c></span ></span> </button> </div> </div> </div> </div> <div class="divider" data-v-6aa21345> <div class="divider-line" data-v-6aa21345></div> </div> </div> <!----> </header> <div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e > <div class="container" data-v-a6f0e41e> <button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e > <span class="vpi-align-left menu-icon" data-v-a6f0e41e></span ><span class="menu-text" data-v-a6f0e41e>Menu</span> </button> <div class="VPLocalNavOutlineDropdown" style="--vp-vh: 0px" data-v-a6f0e41e data-v-8a42e2b4 > <button data-v-8a42e2b4>Return to top</button ><!----> </div> </div> </div> <aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6> <div class="curtain" data-v-319d5ca6></div> <nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6 > <span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6 > Sidebar Navigation </span ><!--[--><!--]--><!--[--> <div class="no-transition group" data-v-c40bc020> <section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8 > <div class="item" role="button" tabindex="0" data-v-b3fd67f8> <div class="indicator" data-v-b3fd67f8></div> <h2 class="text" data-v-b3fd67f8>Examples</h2> <!----> </div> <div class="items" data-v-b3fd67f8> <!--[--> <div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8 > <div class="item" data-v-b3fd67f8> <div class="indicator" data-v-b3fd67f8></div> <a class="VPLink link link" href="/docs/markdown-examples.html" data-v-b3fd67f8 ><!--[--> <p class="text" data-v-b3fd67f8>Markdown Examples</p> <!--]--></a ><!----> </div> <!----> </div> <div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8 > <div class="item" data-v-b3fd67f8> <div class="indicator" data-v-b3fd67f8></div> <a class="VPLink link link" href="/docs/api-examples.html" data-v-b3fd67f8 ><!--[--> <p class="text" data-v-b3fd67f8>Runtime API Examples</p> <!--]--></a ><!----> </div> <!----> </div> <!--]--> </div> </section> </div> <!--]--><!--[--><!--]--> </nav> </aside> <div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186 > <div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8 > <!--[--><!--]--> <div class="container" data-v-39a288b8> <div class="aside" data-v-39a288b8> <div class="aside-curtain" data-v-39a288b8></div> <div class="aside-container" data-v-39a288b8> <div class="aside-content" data-v-39a288b8> <div class="VPDocAside" data-v-39a288b8 data-v-3f215769> <!--[--><!--]--><!--[--><!--]--> <nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30 > <div class="content" data-v-a5bbad30> <div class="outline-marker" data-v-a5bbad30></div> <div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30 > On this page </div> <ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997 > <!--[--><!--]--> </ul> </div> </nav> <!--[--><!--]--> <div class="spacer" data-v-3f215769></div> <!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--> </div> </div> </div> </div> <div class="content" data-v-39a288b8> <div class="content-container" data-v-39a288b8> <!--[--><!--]--> <main class="main" data-v-39a288b8> <div style="position: relative" class="vp-doc _docs_markdown-examples" data-v-39a288b8 > <div> <h1 id="markdown-extension-examples" tabindex="-1"> Markdown Extension Examples <a class="header-anchor" href="#markdown-extension-examples" aria-label='Permalink to "Markdown Extension Examples"' ></a > </h1> <p> This page demonstrates some of the built-in markdown extensions provided by VitePress. </p> <h2 id="syntax-highlighting" tabindex="-1"> Syntax Highlighting <a class="header-anchor" href="#syntax-highlighting" aria-label='Permalink to "Syntax Highlighting"' ></a > </h2> <p> VitePress provides Syntax Highlighting powered by <a href="https://github.com/shikijs/shiki" target="_blank" rel="noreferrer" >Shiki</a >, with additional features like line-highlighting: </p> <p><strong>Input</strong></p> <div class="language-md vp-adaptive-theme"> <button title="Copy Code" class="copy"></button ><span class="lang">md</span> <pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" ><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```js{4}</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">export default {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data () {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> return {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: 'Highlighted!'</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```</span></span></code></pre> </div> <p><strong>Output</strong></p> <div class="language-js vp-adaptive-theme"> <button title="Copy Code" class="copy"></button ><span class="lang">js</span> <pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" ><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Highlighted!'</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre> </div> <h2 id="custom-containers" tabindex="-1"> Custom Containers <a class="header-anchor" href="#custom-containers" aria-label='Permalink to "Custom Containers"' ></a > </h2> <p><strong>Input</strong></p> <div class="language-md vp-adaptive-theme"> <button title="Copy Code" class="copy"></button ><span class="lang">md</span> <pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" ><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: info</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">This is an info box.</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: tip</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">This is a tip.</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: warning</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">This is a warning.</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: danger</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">This is a dangerous warning.</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: details</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">This is a details block.</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span></code></pre> </div> <p><strong>Output</strong></p> <div class="info custom-block"> <p class="custom-block-title">INFO</p> <p>This is an info box.</p> </div> <div class="tip custom-block"> <p class="custom-block-title">TIP</p> <p>This is a tip.</p> </div> <div class="warning custom-block"> <p class="custom-block-title">WARNING</p> <p>This is a warning.</p> </div> <div class="danger custom-block"> <p class="custom-block-title">DANGER</p> <p>This is a dangerous warning.</p> </div> <details class="details custom-block"> <summary>Details</summary> <p>This is a details block.</p> </details> <h2 id="more" tabindex="-1"> More <a class="header-anchor" href="#more" aria-label='Permalink to "More"' ></a > </h2> <p> Check out the documentation for the <a href="https://vitepress.dev/guide/markdown" target="_blank" rel="noreferrer" >full list of markdown extensions</a >. </p> </div> </div> </main> <footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d> <!--[--><!--]--><!----> <nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d > <span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d >Pager</span > <div class="pager" data-v-e257564d><!----></div> <div class="pager" data-v-e257564d> <a class="VPLink link pager-link next" href="/docs/api-examples.html" data-v-e257564d ><!--[--><span class="desc" data-v-e257564d >Next page</span ><span class="title" data-v-e257564d >Runtime API Examples</span ><!--]--></a > </div> </nav> </footer> <!--[--><!--]--> </div> </div> </div> <!--[--><!--]--> </div> </div> <!----><!--[--><!--]--> </div> </div> <script> window.__VP_HASH_MAP__ = JSON.parse( '{"api-examples.md":"B5cbNgMl","index.md":"ZzqtzDg7","markdown-examples.md":"OYFiuX35"}', ); window.__VP_SITE_DATA__ = JSON.parse( '{"lang":"en-US","dir":"ltr","title":"News Analzye Docs","description":"The documentation for news analyze the project.","base":"/docs/","head":[],"router":{"prefetchLinks":true},"appearance":true,"themeConfig":{"nav":[{"text":"Home","link":"/"},{"text":"Examples","link":"/markdown-examples"}],"sidebar":[{"text":"Examples","items":[{"text":"Markdown Examples","link":"/markdown-examples"},{"text":"Runtime API Examples","link":"/api-examples"}]}],"socialLinks":[{"icon":"github","link":"https://github.com/vuejs/vitepress"}]},"locales":{},"scrollOffset":134,"cleanUrls":false}', ); </script> </body> </html>