docs: update code-group example with new icon syntax #5953
Conversation
📝 WalkthroughWalkthroughThis pull request adds icon positioning functionality to the CodeGroup component. The component now supports an Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@docs/content/docs/4.typography/code-group.md`:
- Around line 68-106: MD018 is triggered by the new '#code' MDC slot marker
which must be written without a leading space; suppress MD018 locally around
that marker by wrapping the affected block with markdownlint directives. Insert
<!-- markdownlint-disable MD018 --> immediately before the ::code-group / `#code`
region containing the '#code' slot marker and add <!-- markdownlint-enable MD018
--> immediately after that region so the '#code' line (and its surrounding
fenced MDC block) remain unchanged while the linter is disabled only for that
snippet.
🧹 Nitpick comments (1)
src/runtime/components/prose/CodeGroup.vue (1)
48-70: Consider narrowing and normalizingiconPosition.This gives better TS hints and avoids typos silently falling back to left alignment.
♻️ Suggested refinement
-const items = computed<{ +const items = computed<{ index: number label: string icon: string - iconPosition: string + iconPosition?: 'left' | 'right' component: any }[]>(() => { @@ return { label: slot.props?.filename || slot.props?.label || `${index}`, icon: slot.props?.icon, - iconPosition: slot.props?.iconPosition, + iconPosition: slot.props?.iconPosition === 'right' ? 'right' : 'left', component: slot } }
| ## Icon Position | ||
|
|
||
| Use the `iconPosition` attribute to position the icon on the right side of the label. | ||
|
|
||
| ::code-preview{class="[&>div]:_:my-0 [&>div]:_:w-full"} | ||
|
|
||
| :::code-group | ||
|
|
||
| ```ts [Script|logos:typescript|right] | ||
| console.log("Hello World"); | ||
| ``` | ||
|
|
||
| ```vue [Component|logos:vue] | ||
| <template> | ||
| <h1>Hello World</h1> | ||
| </template> | ||
| ``` | ||
|
|
||
| ::: | ||
|
|
||
| #code | ||
|
|
||
| ````mdc | ||
| ::code-group | ||
| ```ts [Script|logos:typescript|right] | ||
| console.log('Hello World') | ||
| ``` | ||
| ```vue [Component|logos:vue] | ||
| <template> | ||
| <h1>Hello World</h1> | ||
| </template> | ||
| ``` | ||
| :: | ||
| ```` | ||
|
|
||
| :: |
There was a problem hiding this comment.
Fix MD018 for the new #code slot marker.
markdownlint flags the new #code line. If the no-space form is required for MDC slots, suppress the rule locally to avoid CI failures.
✅ Suggested fix
+<!-- markdownlint-disable-next-line MD018 -->
`#code`🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
88-88: No space after hash on atx style heading
(MD018, no-missing-space-atx)
🤖 Prompt for AI Agents
In `@docs/content/docs/4.typography/code-group.md` around lines 68 - 106, MD018 is
triggered by the new '#code' MDC slot marker which must be written without a
leading space; suppress MD018 locally around that marker by wrapping the
affected block with markdownlint directives. Insert <!-- markdownlint-disable
MD018 --> immediately before the ::code-group / `#code` region containing the
'#code' slot marker and add <!-- markdownlint-enable MD018 --> immediately after
that region so the '#code' line (and its surrounding fenced MDC block) remain
unchanged while the linter is disabled only for that snippet.
commit: |
2 participants
📚 Description
This PR adds support for displaying icons in
CodeGroup
tabs using the new metadata syntax [filename|icon|position].
Changes:
Updated
CodeGroup.vue
to handle icon and iconPosition props.
Updated documentation with examples demonstrating the new icon syntax using TypeScript and Vue code blocks.