mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
10 lines
14 KiB
JavaScript
10 lines
14 KiB
JavaScript
import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/en/guide/markdown/caniuse/","title":"Can I Use | Guide","lang":"en-US","frontmatter":{"title":"Can I Use","createTime":"2025/10/08 14:50:55","icon":"streamline:desktop-help","permalink":"/en/guide/markdown/caniuse/","badge":"New","description":"Overview When writing articles, this feature provides the functionality to embed platform support information for WEB features from can-i-use. This allows for a more intuitive r...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Can I Use\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-12-28T06:00:53.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/markdown/caniuse/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Can I Use"}],["meta",{"property":"og:description","content":"Overview When writing articles, this feature provides the functionality to embed platform support information for WEB features from can-i-use. This allows for a more intuitive r..."}],["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":"2025-12-28T06:00:53.000Z"}],["meta",{"property":"article:modified_time","content":"2025-12-28T06:00:53.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/markdown/caniuse/"}]]},"readingTime":{"minutes":1.25,"words":374},"git":{"createdTime":1743080813000,"updatedTime":1766901653000,"contributors":[{"name":"zhenghaoyang24","username":"zhenghaoyang24","email":"95458562+zhenghaoyang24@users.noreply.github.com","commits":1,"avatar":"https://avatars.githubusercontent.com/zhenghaoyang24?v=4","url":"https://github.com/zhenghaoyang24"},{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":4,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"fe9ee0dbfce9896fdaea72d8f77e7d065577d97d","time":1766901653000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): improve caniuse syntax (#806)"},{"hash":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"},{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"9f99ae3ca72b3085c6cd383a9084f42be299c400","time":1743080813000,"email":"95458562+zhenghaoyang24@users.noreply.github.com","author":"zhenghaoyang24","message":"docs: add en <code>markdown</code> doc (#538)","coAuthors":[{"name":"pengzhanbo","email":"volodymyr@foxmail.com"}]}]},"autoDesc":true,"filePathRelative":"en/guide/markdown/caniuse.md","headers":[],"bulletin":false}`),u={name:`caniuse.md`},d={class:`code-block-title`,"data-title":`.vuepress/config.ts`},f={class:`code-block-title-bar`},p={class:`title`},m={class:`hint-container info`},h={class:`hint-container-title`};function g(c,l,u,g,_,v){let y=t(`VPIcon`),b=t(`VPLink`),x=t(`CanIUseViewer`);return n(),i(`div`,null,[l[8]||=o(`<h2 id="overview" tabindex="-1"><a class="header-anchor" href="#overview"><span>Overview</span></a></h2><p>When writing articles, this feature provides the functionality to embed platform support information for WEB features from <a href="https://caniuse.com/" target="_blank" rel="noopener noreferrer">can-i-use</a>.</p><p>This allows for a more intuitive representation of a feature's support level when describing a specific WEB feature.</p><h2 id="configuration" tabindex="-1"><a class="header-anchor" href="#configuration"><span>Configuration</span></a></h2><p>This feature is disabled by default. You can enable it in the configuration file.</p>`,5),s(`div`,d,[s(`div`,f,[s(`span`,p,[r(y,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[0]||=a(`.vuepress/config.ts`,-1)])]),l[1]||=o(`<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;"> markdownP</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
|
|
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> caniuse</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)]),l[9]||=o(`<p>In your article's markdown file, use the following format:</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;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">feature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div>`,2),s(`p`,null,[l[3]||=a(`For ease of use, the theme provides tool support: `,-1),r(b,{href:`../../../tools/caniuse.md`},{default:e(()=>[...l[2]||=[a(`caniuse Feature Search`,-1)]]),_:1}),l[4]||=a(`. You can use this tool directly to help generate the markdown code.`,-1)]),l[10]||=o(`<h2 id="syntax" tabindex="-1"><a class="header-anchor" href="#syntax"><span>Syntax</span></a></h2><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;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">feature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse{browser_versions}</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">feature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse embed_type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">feature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse embed_type{browser_versions}</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">feature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div>`,2),s(`div`,m,[s(`p`,h,[l[6]||=a(`Using the caniuse tool provided by the theme: `,-1),r(b,{href:`../../../../tools/caniuse.md`},{default:e(()=>[...l[5]||=[a(`caniuse feature search`,-1)]]),_:1}),l[7]||=a(` to help generate markdown code.`,-1)])]),l[11]||=o(`<ul><li><p><code>feature</code></p><p>Required. For correct values, please refer to <a href="https://caniuse-embed.vercel.app/zh-CN" target="_blank" rel="noopener noreferrer">caniuse-embed.vercel.app</a>.</p></li><li><p><code>{browser_period}</code></p><p>Optional. The support status of the current feature across multiple version cycles.</p><p>Default value: <code>{-2,1}</code></p><p>Format: <code>{past,future}</code> with a value range of <code>-5 ~ 3</code></p><ul><li>Values less than <code>0</code> indicate support status in past browser version cycles.</li><li><code>0</code> indicates support status in the current browser version.</li><li>Values greater than <code>0</code> indicate support status in future browser version cycles.</li></ul></li><li><p><code>embed_type</code></p><p>Optional. The type of resource embedding.</p><p>Type: <code>'embed' | 'baseline'</code></p><p>Default value: <code>'embed'</code></p><ul><li><code>embed</code> means embedding as version compatibility data tables similar to <code>caniuse.com</code></li><li><code>baseline</code> means embedding as the baseline support status of a feature. <ul><li><code>Wildly available</code> indicates broad support across all major browsers</li><li><code>Newly available</code> indicates support only in the latest major browsers</li><li><code>limit available</code> indicates that major browsers may offer partial support, but it is limited, or not supported</li><li><code>deprecated</code> indicates that major browsers have marked it as <strong>deprecated</strong> and do not recommend its use</li></ul></li></ul></li></ul><h2 id="examples" tabindex="-1"><a class="header-anchor" href="#examples"><span>Examples</span></a></h2><p><strong>Get the browser support for the CSS pseudo-class selector <code>:dir()</code>:</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;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">css-matches-pseudo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>Result:</p>`,5),r(x,{feature:`css-matches-pseudo`,meta:`nqjpp`,past:2,future:1}),l[12]||=o(`<p><strong>Display baseline support for the CSS pseudo-class selector <code>:dir()</code>:</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;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse baseline</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">css-matches-pseudo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>Result:</p>`,3),r(x,{feature:`css-matches-pseudo`,meta:`xcmsl`,past:2,future:1,baseline:``})])}var _=c(u,[[`render`,g]]);export{l as _pageData,_ as default}; |