Markawesome Syntax Support

Syntax highlighting, snippets, and IntelliSense for Markawesome custom Markdown components. Write beautiful, interactive content using simple Markdown-like syntax that transforms into Web Awesome components.

Features

🎨 Syntax Highlighting

All Markawesome component syntax patterns are beautifully highlighted in your Markdown files:

Callouts: :::info, :::success, :::warning, :::danger, :::neutral
Cards: ===, ===filled, ===plain, ===accent
Comparison: |||, |||25
Carousel: ~~~~~~ with parameters like navigation pagination loop
Details: ^^^, ^^^filled start, ^^^plain end
Dialog: ???, ???light-dismiss, ???600px
Tab Groups: ++++++ and +++ for individual tabs
Tags: @@@, @@@brand, @@@success
Copy Buttons: <<<
Badges: !!!, !!!brand
Buttons: %%%, %%%primary
Alternative Syntax: :::wa-component format

⚡ Code Snippets

Quick insertion of component templates with tab stops:

Prefix	Description
`wa-callout-info`	Info callout
`wa-callout-warning`	Warning callout
`wa-card`	Basic card
`wa-card-full`	Card with header, image, and footer
`wa-carousel`	Basic carousel
`wa-carousel-nav`	Carousel with navigation
`wa-comparison`	Image comparison
`wa-dialog`	Modal dialog
`wa-details`	Collapsible details
`wa-tabs`	Tab group with 3 tabs
`wa-tag`	Tag component
`wa-copy`	Copy button
`wa-badge`	Badge component
`wa-button`	Button with link

🧠 IntelliSense

Intelligent autocomplete suggestions as you type:

Type ::: → Get list of component types and callout variants
Type === → Suggests card appearance options
Type ^^^ → Suggests details appearance and icon placement
Type ??? → Suggests dialog parameters
Type @@@ → Suggests tag variants
Type !!! → Suggests badge variants
Type %%% → Suggests button variants
Type ~~~~~~ → Suggests carousel parameters

📖 Hover Documentation

Hover over any component syntax to see:

Component description
Available parameters and options
Usage examples
Link to full documentation

🎯 Command Palette

Access powerful commands via Command Palette (Cmd+Shift+P / Ctrl+Shift+P):

Insert Component

Command: Markawesome: Insert Component
Shortcut: Cmd+Shift+W (Mac) / Ctrl+Shift+W (Windows/Linux)

Quick pick menu to insert any component with guided parameter selection.

Wrap Selection Commands

Markawesome: Wrap in Callout - Wrap selected text in a callout (choose variant)
Markawesome: Wrap in Card - Wrap selected text in a card
Markawesome: Wrap in Tag - Wrap selected text in a tag
Markawesome: Wrap in Details - Wrap selected text in collapsible details

Transform Selection Commands

Markawesome: Convert Images to Comparison - Convert 2 selected images to a comparison component
Markawesome: Convert Images to Carousel - Convert multiple selected images to a carousel

Right-click in a Markdown file to access all commands via the Markawesome submenu.

Installation

From VS Code Marketplace

Open VS Code
Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
Search for "Markawesome"
Click Install

From VSIX building it yourself

npm install -g vsce
vsce package
code --install-extension markawesome-vscode-0.1.0.vsix

Usage Examples

Callouts

:::info
This is an important information callout with **bold text** and [links](https://example.com).
:::

:::warning
Be careful when performing this action!
:::

Cards

===filled
![Hero Image](https://github.com/jannewaren/markawesome-vscode/raw/HEAD/hero.jpg)
# Getting Started
Learn how to use Web Awesome components in your Jekyll site.
[Read More](https://example.com)
===

Comparison

|||25
![Before optimization](https://github.com/jannewaren/markawesome-vscode/raw/HEAD/before.jpg)
![After optimization](https://github.com/jannewaren/markawesome-vscode/raw/HEAD/after.jpg)
|||

Carousel

~~~~~~navigation pagination loop
~~~
![Slide 1](https://github.com/jannewaren/markawesome-vscode/raw/HEAD/slide1.jpg)
~~~
~~~
![Slide 2](https://github.com/jannewaren/markawesome-vscode/raw/HEAD/slide2.jpg)
~~~
~~~
![Slide 3](https://github.com/jannewaren/markawesome-vscode/raw/HEAD/slide3.jpg)
~~~
~~~~~~

Details

^^^filled start
Click to expand this section
>>>
This is the hidden content that can be collapsed and expanded.

- Supports **markdown**
- Including lists
- And [links](https://example.com)
^^^

Dialog

???light-dismiss 600px
Open Dialog
>>>
# Dialog Title

This is the content inside the modal dialog.

[Close](#)
???

Tabs

++++++top
+++ Features
Learn about the key features of our product.
+++
+++ Documentation
Read the comprehensive documentation.
+++
+++ Support
Get help from our support team.
+++
++++++

Tags and Badges

@@@brand
Version 2.0
@@@

!!!success
New
!!!

Copy Button

<<<
npm install markawesome
<<<

Button

%%%primary
[Get Started](https://example.com)
%%%

Component Reference

Callout Types

info - Blue with info icon
success - Green with checkmark
warning - Yellow with warning icon
danger - Red with exclamation
neutral - Gray with gear icon

Card Appearances

outlined - Default outlined appearance (default)
filled - Filled background
plain - Minimal appearance
filled-outlined - Combination style
accent - Emphasis appearance

Details Options

Appearances: outlined, filled, plain, filled-outlined
Icon Placement: start, end

Tab Placements

top - Tabs at top (default)
bottom - Tabs at bottom
start - Tabs on left
end - Tabs on right

Tag/Badge Variants

brand - Primary brand color
success - Success/positive state
warning - Warning/caution state
danger - Error/critical state
neutral - Neutral/informational state

Button Variants

primary - Primary button style
default - Default button style
text - Text-only button
danger - Danger/destructive action

Carousel Parameters

navigation - Show prev/next arrows
pagination - Show dot indicators
loop - Enable infinite loop
autoplay - Auto-advance slides
mouse-dragging - Enable drag to slide
vertical - Vertical orientation
scroll-hint:value - Show scroll hint
aspect-ratio:value - e.g., 16/9, 4/3
slide-gap:value - Gap between slides
slides-per-page:n - Slides visible at once
slides-per-move:n - Slides to move at once

Requirements

VS Code version 1.80.0 or higher
Markdown files (.md, .markdown)
Markawesome gem for transforming Markdown to Web Awesome components

Extension Settings

This extension works out of the box with no configuration needed.

Known Issues

None currently. Please report issues on GitHub.

Release Notes

0.1.0

Initial release:

✨ Syntax highlighting for all component patterns
✨ 20+ code snippets for quick insertion
✨ IntelliSense/autocomplete for component parameters
✨ Hover documentation with examples
✨ Command palette commands for inserting and wrapping
✨ Transform commands for images to comparison/carousel
✨ Context menu integration

Markawesome - The gem that transforms Markdown to Web Awesome components
Web Awesome - The UI component library

Contributing

Contributions are welcome! Please see the GitHub repository for details.

License

This extension is available under the MIT License.

Enjoy creating beautiful content with Markawesome! 🚀

Markawesome (Markdown to Web Awesome)

Janne Warén