Skip to content

docs: replace VitePress :::key directives with GitHub-style alerts#2336

Open
Aniket-lodh wants to merge 1 commit intowxt-dev:mainfrom
Aniket-lodh:docs/fix-github-alert-syntax
Open

docs: replace VitePress :::key directives with GitHub-style alerts#2336
Aniket-lodh wants to merge 1 commit intowxt-dev:mainfrom
Aniket-lodh:docs/fix-github-alert-syntax

Conversation

@Aniket-lodh
Copy link
Copy Markdown

@Aniket-lodh Aniket-lodh commented May 7, 2026

Overview

Replace all VitePress-specific :::key container directives (:::warning, :::tip, :::info, :::danger, :::details) with GitHub-compatible alternatives across all documentation .md files.

Changes:

  • :::warning> [!WARNING]
  • :::tip> [!TIP]
  • :::info> [!NOTE]
  • :::danger> [!CAUTION]
  • :::details — converting to HTML <details> breaks VitePress builds because Vue's template compiler parses JSX/HTML inside code fences as real elements.

These render correctly on both GitHub's markdown preview and VitePress 1.5+ (GitHub-flavored alerts).

Related Issue

This PR closes #2334

@Aniket-lodh Aniket-lodh requested a review from aklinker1 as a code owner May 7, 2026 03:51
@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for creative-fairy-df92c4 ready!

Name Link
🔨 Latest commit 74879d6
🔍 Latest deploy log https://app.netlify.com/projects/creative-fairy-df92c4/deploys/69fc12652179e10008ab0204
😎 Deploy Preview https://deploy-preview-2336--creative-fairy-df92c4.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@Aniket-lodh Aniket-lodh force-pushed the docs/fix-github-alert-syntax branch from 8143611 to d68b6b3 Compare May 7, 2026 04:06
@smashedr
Copy link
Copy Markdown
Contributor

smashedr commented May 7, 2026

Just a quick heads up, you can't have text on the same line as the annotation type [!TYPE]. Example:

> [!TIP] Need to lookup the full import path of an API?
> Open up your project's `.wxt/types/imports-module.d.ts` file.

[!TIP] Need to lookup the full import path of an API?
Open up your project's .wxt/types/imports-module.d.ts file.


That won't render on GitHub, they all need to be split like this:

> [!TIP]  
> Need to lookup the full import path of an API?
> Open up your project's `.wxt/types/imports-module.d.ts` file.

Tip

Need to lookup the full import path of an API?
Open up your project's .wxt/types/imports-module.d.ts file.

Copy link
Copy Markdown
Collaborator

@PatrykKuniczak PatrykKuniczak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix also :::code-group and :::details across all files.
And also <<< @/../packages/browser/src/index.mjs#snippet doesn't work let's fix it also there.

Let's use search in IDE and look for ::: then let's fix ALL of that.

And take a look on files before you'll push your changes.

Comment on lines +60 to +61

:::
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why, IDE on save?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

:::keys for .md doesn't work

3 participants