mirror of
https://github.com/xoofx/markdig.git
synced 2026-07-08 18:16:21 +00:00
74f429c427
Create a full Lunet-based documentation site in site/ with: - Site config, navigation, landing page with hero section - Core docs: getting started, usage guide, CommonMark reference - Extension docs: 19 pages covering all 30+ extensions - Developer guide: AST, pipeline, creating extensions, block/inline parsers, renderers, performance - API reference generation via lunet-io/templates - Remove obsolete parsing-*.md files (content revised into docs/) - Update AGENTS.md with website build instructions - Add site/AGENTS.md with site-specific guidance
2.1 KiB
2.1 KiB
title
| title |
|---|
| Generic attributes |
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.
Important
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
{.table}
| 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
{.rounded width="200"}
Emphasis
**Important text**{.text-danger}
HTML output
A paragraph. {.lead #intro}
Produces:
<p class="lead" id="intro">A paragraph.</p>