vuepress-theme-plume/assets/chat-Buu0f960.js

import{B as e,P as t,_ as n,f as r,g as i,h as a,l as o}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as s}from"./plugin-vue_export-helper-CxTVcLa7.js";var c=JSON.parse(`{"path":"/en/guide/markdown/chat/","title":"Chat Records | Guide","lang":"en-US","frontmatter":{"title":"Chat Records","icon":"cil:chat-bubble","createTime":"2025/10/08 21:40:18","permalink":"/en/guide/markdown/chat/","description":"Preface User B 2025-03-24 10:15:00 User B Putting chat screenshots in the documentation still looks pretty bad, is there a better way? [doge] Sure there is, bro, definitely sure...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Chat Records\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2026-02-14T10:14:19.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/markdown/chat/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Chat Records"}],["meta",{"property":"og:description","content":"Preface User B 2025-03-24 10:15:00 User B Putting chat screenshots in the documentation still looks pretty bad, is there a better way? [doge] Sure there is, bro, definitely sure..."}],["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/chat/"}]]},"readingTime":{"minutes":1.26,"words":377},"git":{"createdTime":1759995965000,"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":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"}]},"autoDesc":true,"filePathRelative":"en/guide/markdown/chat.md","headers":[],"bulletin":false}`),l={name:`chat.md`},u={class:`code-block-title`,"data-title":`.vuepress/config.ts`},d={class:`code-block-title-bar`},f={class:`title`};function p(s,c,l,p,m,h){let g=e(`VPIcon`);return t(),r(`div`,null,[c[2]||=a(`<h2 id="preface" tabindex="-1"><a class="header-anchor" href="#preface"><span>Preface</span></a></h2><div class="vp-chat"><div class="vp-chat-header"><p class="vp-chat-title">User B</p></div><div class="vp-chat-content"><div class="vp-chat-date"><span>2025-03-24 10:15:00</span></div><div class="vp-chat-message user"><div class="vp-chat-message-body"><p class="vp-chat-username">User B</p><div class="message-content"><p>Putting chat screenshots in the documentation still looks pretty bad, is there a better way? [doge]</p></div></div></div><div class="vp-chat-message self"><div class="vp-chat-message-body"><div class="message-content"><p>Sure there is, bro, definitely sure</p></div></div></div><div class="vp-chat-message self"><div class="vp-chat-message-body"><div class="message-content"><p>But is it really okay to post chat records like this?</p></div></div></div><div class="vp-chat-message user"><div class="vp-chat-message-body"><p class="vp-chat-username">User B</p><div class="message-content"><p>Proof of our fiery debates is worth keeping [doge]</p></div></div></div><div class="vp-chat-date"><span>2025-03-24 15:32:00</span></div><div class="vp-chat-message self"><div class="vp-chat-message-body"><div class="message-content"><p>Good news: the docs now support chat records!</p></div></div></div><div class="vp-chat-message self"><div class="vp-chat-message-body"><div class="message-content"><p>Bad news: I&#39;ve used you as the example [doge]</p></div></div></div><div class="vp-chat-message user"><div class="vp-chat-message-body"><p class="vp-chat-username">User B</p><div class="message-content"><p>???</p></div></div></div></div></div><h2 id="overview" tabindex="-1"><a class="header-anchor" href="#overview"><span>Overview</span></a></h2><p>In Markdown, wrapping specially formatted text content within a <code>::: chat</code> container allows you to display <mark>chat records</mark> within the documentation.</p><div class="hint-container warning"><p class="hint-container-title">This is a feature you likely won&#39;t need most of the time.</p><p>Please consider carefully whether you should use it when the need arises. Filter out any private or sensitive content yourself.</p></div><h2 id="enable" tabindex="-1"><a class="header-anchor" href="#enable"><span>Enable</span></a></h2><p>This feature is disabled by default. You need to enable it in the <code>theme</code> configuration.</p>`,7),o(`div`,u,[o(`div`,d,[o(`span`,f,[n(g,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),c[0]||=i(`.vuepress/config.ts`,-1)])]),c[1]||=a(`<div class="language-ts" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-diff vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">    markdown</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      chat</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</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:#999999;--shiki-dark:#666666;">  })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div>`,1)]),c[3]||=a(`<h2 id="usage" tabindex="-1"><a class="header-anchor" href="#usage"><span>Usage</span></a></h2><p>Within a <code>::: chat</code> container, use specific markers to identify the sender and timestamp of messages, which will then render the chat record in the documentation.</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;">::: chat title=&quot;Title&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{:date}     </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- Mark the starting timestamp --&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{username}  </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- Mark the sender --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">xxx         </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- The sender&#39;s message content --&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{.}         </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- Mark as sent by the current user --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">xxx         </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- The current user&#39;s message content --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><ul><li><p><code>{:date}</code> Marks the starting timestamp (Optional). Use the format <code>{:</code> + date + <code>}</code>. <code>date</code> can be in common date formats.</p><p>The theme does not process <code>date</code> in any way; it simply renders it.</p></li><li><p><code>{username}</code> Marks the sender of the subsequent content. Use the format <code>{</code> + username + <code>}</code>. <code>username</code> can be any string.</p></li><li><p><code>{.}</code> Marks the message as sent by the current user.</p></li></ul><h2 id="example" tabindex="-1"><a class="header-anchor" href="#example"><span>Example</span></a></h2><p><strong>Input:</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;">::: chat title=&quot;Title&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{:2025-03-24 10:15:00}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{User 1}</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Message from User 1</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{.}</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Message from the current user</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{User 2}</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Message from User 2</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{.}</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Message from the current user</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></div><p><strong>Output:</strong></p><div class="vp-chat"><div class="vp-chat-header"><p class="vp-chat-title">Title</p></div><div class="vp-chat-content"><div class="vp-chat-date"><span>2025-03-24 10:15:00</span></div><div class="vp-chat-message user"><div class="vp-chat-message-body"><p class="vp-chat-username">User 1</p><div class="message-content"><p>Message from User 1</p></div></div></div><div class="vp-chat-message self"><div class="vp-chat-message-body"><div class="message-content"><p>Message from the current user</p></div></div></div><div class="vp-chat-message user"><div class="vp-chat-message-body"><p class="vp-chat-username">User 2</p><div class="message-content"><p>Message from User 2</p></div></div></div><div class="vp-chat-message self"><div class="vp-chat-message-body"><div class="message-content"><p>Message from the current user</p></div></div></div></div></div>`,9)])}var m=s(l,[[`render`,p]]);export{c as _pageData,m as default};