Custom Attributes on Markdown Tags

A common question related to Markdown is:

How do I add custom styling or attributes to my Markdown Tags?

Markdown doesn't support custom Tags

Markdown natively doesn't support custom tags on rendered Markdown expressions.

Markdown is intended to be a very simple text based format and it relies on common, semantic styling to provide formatting for your rendered Markdown generated HTML output.

However, on occasion it's quite useful to have custom functionality. For example, it can be difficult to have a one size fits all image size that works both for large and small images, or perhaps you need to assign an linkable ID to a header or assign a custom class to bit of text.

There are a couple of ways how you can get custom attributes to render:

  • Use Raw HTML instead of Markdown
  • Use the Generic Attributes Markdown Extension

Although these solutions exist and will render just fine in Markdown Monster, they are not part of standard Markdown!

You have to make sure you check and see that these extensions are available on the Markdown renderer used to render on your Web site or site generator. For example, GitHub's Markdown Parser supports some raw HTML features, but does not support Generic Attributes.

Raw HTML

Markdown is meant to be a superset of HTML so you can actually use raw HTML inside of your Markdown documents. If your need for custom attributes or styling is rare this is a reasonable option as it's easy enough to embed custom HTML into a Markdown document.

Here's an example:

### Header
This is a custom <a href="https://markdownmonster.west-wind.com" target="_blank" style="font-size: 1.1em">Web Site link</a> that is rendered as raw HTML.

Here's what **this looks like**:

<img src="image.png" style="width: 5rem" />

And on we go.

As you can see you can mix and match Markdown and HTML. There are some special rules about how Markdown works inside of HTML blocks so you have to experiment a bit to see what works.

Configuration Setting
Markdown Monster supports turning off raw HTML rendering as an option, but it is enabled by default. You can find it in the Settings Window under No Html in the Markdown section.

Markdown.NoHtml": false

Generic Attributes Extension

The Generic Attributes extension is a common Markdown extension that allows you attach custom attributes and styles to a Markdown expression by embedding it immediately after the Markdown expression.

### Licensing Information{#License .header3}
Here's a screenshot of the full license document:

![](image.png){style="max-width: 300px"}

You can use CSS style formatting for ids, classes and attributes, or you can explicitly add HTML tags directly into the {...} block immediately following the Markdown expressions you want to amend.

Configuration Setting
The configuration setting is called Generic Attributes in the Settings Window's Markdown section, and can be found under this configuration key:

Markdown.GenericAttributes: true

Only works if your Markdown Parser supports it!

Again - both raw HTML and Generic Attributes are custom Markdown extensions and they will only work if the Markdown Engine you are using to render your HTML from Markdown supports it.

Markdown Monster happily supports both of these formats and will render them correctly in the preview, but that's no guarantee that your final Markdown renderer also supports.

Make sure you test any extension on your live site before committing to using any custom Markdown extensions.


© West Wind Technologies, 1996-2021 • Updated: 05/01/21
Comment or report problem with topic