# MD Composer extras

**URL:** https://meta.discourse.org/t/md-composer-extras/118912
**Category:** Theme component
**Created:** [May 28, 2019, 8:08pm UTC](https://meta.discourse.org/t/md-composer-extras/118912 "2019-05-28T20:08:37Z")
**Posts on this page:** 1
**Showing post:** 10

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [September 2, 2019, 8:28pm UTC](https://meta.discourse.org/t/md-composer-extras/118912/10 "2019-09-02T20:28:38Z")

</div>

A tag like `[center]` will still require a plugin but you’re correct @Steven 👍

At the time of this component’s creation you had to use HTML `<div>` tags. However, you can now use `[wrap="foo"][/wrap]` in themes / components.

You can read more about that here

> [@Generic bbcode wrapper for theme components](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516):
>
> I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

Here’s a simple example

```plaintext
[wrap="center"] 
Some center aligned text 
[/wrap]

```

would create this markup when the post is cooked

```plaintext
<div class="d-wrap" data-wrap="center">
  <p>Some center aligned text</p>
</div>

```

which you can then target with a [CSS attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) like so

```plaintext
[data-wrap="center"] {
  text-align: center;
}

```

and that would create something like this in both the composer preview and the rendered post

 ![center001](https://global.discourse-cdn.com/meta/original/3X/2/8/282cd67d2c9b4ab2ff10901016bc14e0a81e9fa9.png)

or

```plaintext
[wrap="right"] 
Some right aligned text 
[/wrap]

```

and that would result in this cooked markup

```plaintext
<div class="d-wrap" data-wrap="right">
  <p>Some center aligned text</p>
</div>

```

You can then add this CSS

```plaintext
[data-wrap="right"] {
  text-align: right;
}

```

for this result

 ![center0002](https://global.discourse-cdn.com/meta/original/3X/6/8/683a101cb6b416fba6785852ee29527e77fac76e.png)

Since the component currently uses the HTML `align` attribute, this change should be 100% backwards compatible.

Give it a go whenever you have the time and feel free to PM me if you have any questions about that.

---

_[View the full topic](https://meta.discourse.org/t/md-composer-extras/118912)._