mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
31 lines
9.9 KiB
JavaScript
31 lines
9.9 KiB
JavaScript
import{P as e,f as t,h as n}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as r}from"./plugin-vue_export-helper-CxTVcLa7.js";var i=JSON.parse(`{"path":"/en/guide/markdown/container/","title":"Tip Containers | Guide","lang":"en-US","frontmatter":{"title":"Tip Containers","icon":"mdi:message-text-outline","createTime":"2025/11/29 14:53:21","permalink":"/en/guide/markdown/container/","description":"Tip containers help you highlight important information in your documentation, making the content hierarchy clearer. Tip containers define different information display styles t...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Tip Containers\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2026-02-14T10:14:19.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/markdown/container/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Tip Containers"}],["meta",{"property":"og:description","content":"Tip containers help you highlight important information in your documentation, making the content hierarchy clearer. Tip containers define different information display styles t..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2026-02-14T10:14:19.000Z"}],["meta",{"property":"article:modified_time","content":"2026-02-14T10:14:19.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/markdown/container/"}]]},"readingTime":{"minutes":0.6,"words":181},"git":{"createdTime":1764559833000,"updatedTime":1771064059000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":2,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"5930c6046224ee0b95a4f05fb60bf3e6e5b7957f","time":1771064059000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: improve docs"},{"hash":"db8a46eb4cdc6c4bcb15f0e38a5aacfef565975a","time":1764559833000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: optimize and completion docs (#766)"}]},"autoDesc":true,"filePathRelative":"en/guide/markdown/container.md","headers":[],"bulletin":false}`),a={name:`container.md`};function o(r,i,a,o,s,c){return e(),t(`div`,null,[...i[0]||=[n(`<div class="hint-container tip"><p class="hint-container-title">Tip containers help you highlight important information in your documentation, making the content hierarchy clearer.</p></div><p>Tip containers define different information display styles through type, title, and content.</p><h2 id="default-title-styles" tabindex="-1"><a class="header-anchor" href="#default-title-styles"><span>Default Title Styles</span></a></h2><p><strong>Input Example:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: note</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is a note container</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: info</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is an info container</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: tip</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is a tip container</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: warning</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is a warning container</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: caution</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is a danger warning container</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: details</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is a details collapsible container</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Actual Effect:</strong></p><div class="hint-container note"><p class="hint-container-title">Note</p><p>This is a note container</p></div><div class="hint-container info"><p class="hint-container-title">Info</p><p>This is an info container</p></div><div class="hint-container tip"><p class="hint-container-title">Tips</p><p>This is a tip container</p></div><div class="hint-container warning"><p class="hint-container-title">Warning</p><p>This is a warning container</p></div><div class="hint-container caution"><p class="hint-container-title">Caution</p><p>This is a danger warning container</p></div><details class="hint-container details"><summary>Details</summary><p>This is a details collapsible container</p></details><h2 id="custom-title-settings" tabindex="-1"><a class="header-anchor" href="#custom-title-settings"><span>Custom Title Settings</span></a></h2><p>You can easily set custom titles by adding text after the container type.</p><p><strong>Input Example:</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: caution STOP</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Danger zone, do not proceed</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: details Click to view code</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">js</span></span>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Hello, VitePress!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><p><strong>Actual Effect:</strong></p><div class="hint-container caution"><p class="hint-container-title">STOP</p><p>Danger zone, do not proceed</p></div><details class="hint-container details"><summary>Click to view code</summary><div class="language-js" data-highlighter="shiki" data-ext="js" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-js"><span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Hello, VuePress Plume!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div></details>`,19)]])}var s=r(a,[[`render`,o]]);export{i as _pageData,s as default}; |