A framework-agnostic Ruby library that transforms custom Markdown syntax into Web Awesome HTML components. Use it with Jekyll, Hugo, Middleman, or any static site generator that processes Markdown.

Used as the transformation engine for the jekyll-webawesome plugin.

• 🎯 Framework Agnostic - Works with any static site generator or Ruby application
• 🚀 Simple Syntax - Clean, intuitive Markdown extensions
• ⚙️ Configurable - Customize icons, variants, and component behavior

Layout utilities use :::: (quadruple colon) syntax to wrap content in CSS layout containers. Inner content is not markdown-converted, so component ::: syntax inside layouts works normally.

All layouts support these key:value attributes:

• gap:SIZE — Sets spacing (0, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl)
• align:VALUE — Align items (start, end, center, stretch, baseline)
• justify:VALUE — Justify content (start, end, center, space-between, space-around, space-evenly)

• Grid: min:CSS_VALUE — Minimum column size (e.g., min:200px)
• Split: row or column — Direction modifier
• Flank: start or end — Position modifier; size:CSS_VALUE, content:PCT
• Frame: landscape, portrait, or square — Aspect ratio; radius:SIZE (s, m, l, pill, circle, square)

Add this line to your application's Gemfile:

gem 'markawesome'

And then execute:

bundle install

Or install it yourself as:

gem install markawesome

require 'markawesome'

markdown = <<~MD
  !!!brand
  New Feature
  !!!

  :::info
  This is an informational callout
  :::
MD

html = Markawesome::Transformer.process(markdown)

Configure Markawesome globally to customize icon names and add custom components:

Markawesome.configure do |config|
  # Customize callout icons
  config.callout_icons = {
    info: 'circle-info',
    success: 'circle-check',
    neutral: 'gear',
    warning: 'triangle-exclamation',
    danger: 'circle-exclamation'
  }

  # Add custom components (for future extensibility)
  config.custom_components = {
    'my-component' => 'MyComponent'
  }
end

Transform images into clickable dialogs:

markdown = '![Diagram](diagram.png)'

# Enable image dialog transformation
html = Markawesome::Transformer.process(markdown, image_dialog: true)

# Or with configuration
html = Markawesome::Transformer.process(markdown, image_dialog: { default_width: '80vw' })

Bug reports and pull requests are welcome on GitHub at https://github.com/jannewaren/markawesome.

The gem is available as open source under the terms of the MIT License.