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.

Get it from the VSCode Marketplace: markawesome-vscode

Features

Code Snippets

Quick insertion of component templates with tab stops:

IntelliSense

Intelligent autocomplete suggestions as you type:

• Type ::: → Get list of component types and callout variants (and :::wa-icon)
• Type :::warning → Suggests callout size, appearance, and icon family/variant/animation
• Type === → Suggests card appearance and orientation options
• Type ^^^ → Suggests details appearance and icon placement
• Type ////// → Suggests accordion appearance, mode, icon placement, and heading:; /// suggests item expanded/disabled/icon:
• Type ??? → Suggests dialog parameters
• Type @@@ → Suggests tag variants and the xs–xl size scale
• Type !!! → Suggests badge variants
• Type %%% → Suggests button variants, the xs–xl size scale, and link target/download
• Type <<< → Suggests copy-button placement, tooltip:full|copy|none mode, labels, duration, and from
• Type ~~~~~~ → Suggests carousel parameters (including autoplay-interval)
• Type &&& → Suggests popover placement and options
• Type ((( → Suggests tooltip placement and distance:
• Type $$$ → Inline icon hint; :::wa-icon <name> suggests family/variant/animation

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):

• Markawesome: Insert Component - Insert a new component with guided parameter selection
• 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
• Markawesome: Wrap in Accordion - Wrap selected text in a multi-section accordion (choose appearance and mode)
• 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
• Markawesome: Wrap in Popover - Wrap selected text in a popover with placement selection
• Markawesome: Wrap in Tooltip - Wrap selected text as a tooltip anchor with placement selection

Context Menu

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

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!
:::

:::warning shake
This callout's icon animates (no Pro kit required).
:::

Icons

Inline, decorative icons sit mid-prose like the $$$gear icon here.

:::wa-icon bell shake
Notifications
:::

Inline $$$name icons are name-only and decorative. The :::wa-icon block takes the name first, then optional family/variant/animation attributes, and an optional body that becomes the icon's accessible label.

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)
^^^

Accordion

//////filled single
/// What is Web Awesome?
A library of framework-agnostic web components.
///
/// expanded Is it free?
The core library is free and open source.
///
/// icon:star Featured
This item uses a custom expand icon and may contain **markdown** and other components.
///
//////

The container fence is ////// (6 slashes); each item is a /// block (3 slashes) with an explicit /// close. Container tokens: appearance (outlined/filled/filled-outlined/plain), mode (multiple/single/single-collapsible), icon placement (start/end), and heading:N (1–6 or none). Item tokens (leading): expanded, disabled, and icon:name; the rest of the header line is the label.

Dialog

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

This is the content inside the modal dialog.

[Close](#)
???

Popover

&&&top
Hover for info
>>>
This is the popover content with **markdown** support.
&&&

&&&bottom link
Learn more
>>>
Detailed explanation with [links](https://example.com) and **formatting**.
&&&

Tooltip

Styling is handled by (((CSS >>> Cascading Style Sheets))) on the web.

The order of leading tokens doesn't matter: (((bottom distance:8 API >>> Application Programming Interface))).

:::wa-tooltip right
SFTP
>>>
SSH File Transfer Protocol
:::

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

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

%%%brand _blank
[Open in a new tab](https://webawesome.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

Sizes: xs, s, m, l, xl (Web Awesome 3.x scale) plus legacy small, medium, large

Icon attributes: override the callout icon's family (classic, sharp, duotone, sharp-duotone, brands), variant weight (thin, light, regular, solid), and animation (beat, fade, beat-fade, bounce, flip, shake, spin, spin-pulse, spin-reverse). Animation needs no Pro kit.

Icon

• Inline: $$$name — name-only, decorative
• Block: :::wa-icon name family? variant? animation? with an optional body that becomes the accessible label
• Families: classic, sharp, duotone, sharp-duotone, brands
• Variants (Font Awesome weight): thin, light, regular, solid
• Animations: beat, fade, beat-fade, bounce, flip, shake, spin, spin-pulse, spin-reverse

Card Appearances

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

Orientation: vertical (default) or horizontal (media and content side-by-side)

Details Options

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

Accordion Options

Container (////// … //////, or :::wa-accordion … :::):

• Appearances: outlined (default), filled, filled-outlined, plain
• Modes: multiple (default — several open at once), single (one open at a time, one always stays open), single-collapsible (one open at a time, all can be closed)
• Icon Placement: start, end (default)
• Heading level: heading:N where N is 1–6 or none

Items (/// header line, with an explicit /// close):

• Flags (leading): expanded (open on load), disabled (cannot be toggled)
• Icon: icon:name adds a custom expand icon as the item's first child
• The rest of the header line is the item label (plain text)

wa-accordion is experimental in Web Awesome, but everything here is declarative and static-site-safe.

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

Tag sizes: xs, s, m, l, xl (Web Awesome 3.x scale) plus legacy small, medium, large

Button Variants and Options

• Variants: brand, success, neutral, warning, danger
• Appearances: accent, filled, outlined, filled-outlined, plain
• Sizes: xs, s, m, l, xl (Web Awesome 3.x scale) plus legacy small, medium, large
• Flags: pill, caret, loading, disabled
• Link target/download (link-form buttons only): _blank, _self, _parent, _top set the anchor target (_blank auto-adds rel="noopener noreferrer"); download downloads the linked file

Popover Options

• top - Popover appears above trigger (default)
• bottom - Popover appears below trigger
• left - Popover appears to the left
• right - Popover appears to the right
• link - Renders trigger as underlined text instead of button
• without-arrow - Hides the popover arrow
• distance:N - Custom distance in pixels (e.g., distance:10)

Tooltip Options

• top - Tooltip appears above the anchor (default)
• bottom - Tooltip appears below the anchor
• left - Tooltip appears to the left
• right - Tooltip appears to the right
• distance:N - Custom distance from the anchor in pixels (e.g., distance:10)

Leading placement/distance:N tokens go before the anchor term. Tip text is plain text (HTML-escaped); use \n for line breaks. There is no link/without-arrow (Web Awesome <wa-tooltip> has no without-arrow).

Carousel Parameters

• navigation - Show prev/next arrows
• pagination - Show dot indicators
• loop - Enable infinite loop
• autoplay - Auto-advance slides
• autoplay-interval:value - Milliseconds between auto-advances (e.g., 5000; default 3000)
• 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

Copy Button Parameters

• top / right / bottom / left - Tooltip placement (default top)
• tooltip:full|copy|none - Tooltip mode: full (default — hover/focus + copy feedback), copy (feedback only), none (no tooltip)
• 2000 - A bare number sets the success-feedback duration in milliseconds
• disabled - Disable the copy button
• copy-label="…" - Tooltip text before copying
• success-label="…" - Tooltip text after a successful copy
• error-label="…" - Tooltip text when copying fails
• from="…" - Copy from another element by ID (also from="input.value", from="link[href]")

Layout Gap Scale

0, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl, 5xl

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.

Related Projects

• 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.