Generic attributes

Enable with .UseGenericAttributes() (included in UseAdvancedExtensions()).

This extension allows attaching CSS classes, IDs, and arbitrary HTML attributes to nearly any Markdown element using {...} syntax. Inspired by PHP Markdown Extra — Special Attributes.

UseGenericAttributes() should be the last extension added to the pipeline, as it modifies other parsers to recognize attribute syntax.

Syntax

Place {...} after a Markdown element:

# Heading {#custom-id .special-class}

A paragraph with attributes. {.lead}

[A link](https://example.com){target="_blank" rel="noopener"}

Supported attribute types

Syntax	Meaning	Example
`#value`	HTML `id`	`{#my-id}`
`.value`	CSS class	`{.my-class}`
`key=value`	HTML attribute	`{data-count=5}`
`key="value"`	Quoted attribute	`{title="Hello World"}`

Multiple attributes can be combined:

A paragraph. {#intro .highlight data-section="overview"}

Applying to blocks

Headings

## My Section {#section-1 .special}

Renders as: <h2 id="section-1" class="special">My Section</h2>

Paragraphs

Place the attributes at the end of the paragraph:

This is a styled paragraph. {.lead .text-center}

Code blocks

```csharp {.highlight-lines}
var x = 42;
```

Blockquotes

> A styled blockquote {.fancy-quote}

Tables

The .table class is commonly used to apply Bootstrap-style table formatting:

{.table .table-striped}
| A | B |
|---|---|
| 1 | 2 |

Applying to inlines

Links

[Click me](https://example.com){.btn .btn-primary}

Images

![Photo](photo.jpg){.rounded width="200"}

Emphasis

**Important text**{.text-danger}

HTML output

A paragraph. {.lead #intro}

Produces:

<p class="lead" id="intro">A paragraph.</p>