Skip to content

Conversation

@mrnasil
Copy link

@mrnasil mrnasil commented Jan 27, 2026

Summary

  • Add support for icon syntax in code block meta: [filename|icon|position]
  • Parse icon and iconPosition from code block syntax
  • Pass icon props to ProsePre component
  • Add basic icon/filename header rendering

Syntax

python [Script|logos:python|right]
print("test")
Format Description
[filename|icon] Filename with icon on left (default)
[filename|icon|right] Filename with icon on right
[|icon|position] Icon only, no filename
[filename] Backward compatible, no icon

Test plan

  • Unit tests for icon parsing added
  • All existing tests pass (61/61)
  • Playground example added

Notes

For full icon rendering support with @nuxt/ui, a separate PR to nuxt/ui is needed to handle iconPosition in CodeGroup.vue.

Add support for icon syntax in code block meta:
- `[filename|icon]` - filename with icon on left
- `[filename|icon|right]` - filename with icon on right
- `[|icon|position]` - icon only without filename

Changes:
- Update parseThematicBlock to extract icon and iconPosition
- Pass icon props to ProsePre component
- Add basic icon/filename header rendering in ProsePre
- Add comprehensive tests for icon parsing

Syntax example:
```python [Script|logos:python|right]
print("test")
```
@mrnasil
Copy link
Author

mrnasil commented Jan 27, 2026

I've opened a PR in nuxt/ui that implements the UI side of this feature: nuxt/ui#5953. Also waiting for this to be merged to fully unlock the functionality. Thanks!

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.

1 participant