Custom HTML attributes

This is an example of a Markdown paragraph with custom HTML attributes: class, id, and attribute='value'.

Placement

This is a Markdown paragraph with a custom class attribute named .LongFoo. It also has a custom id attribute named #next-line so that you can directly link to it. These attributes are specified on the next line.

This is a Markdown paragraph with a custom class attribute named .LongFoo. It also has a custom id attribute named #same-line so that you can directly link to it. These attributes are specified on the same line.

This Markdown paragraph doesn't contain custom attributes. There are custom attributes specified in the following paragraph, but they will not be applied to this paragraph because they are preceded by a blank line. The following paragraph has a class attribute named .LongFoo. It also has a custom id attribute named #blank-line, but it won't directly link to it.

Code spans

This code span has a custom class attribute named .CSFoo that immediately follows the closing backtick without a space in between.

Code blocks

The following is an example of a custom id attribute named #mysample in a code block so you can directly link to it:

print('hello world')

Headings

To apply a custom attribute to a heading (or any element other than a paragraph), place the attribute at the end of the line.

Heading with class attribute

This heading has a custom class attribute named .customClass that is specified on the same line as the heading.

Heading with named anchor

This heading has a custom id attribute named #named-heading that is also specified on the same line as the heading so you can directly link to it.

Links

This is an example of an inline link with a title attribute. The tooltip Now you see me appears when you hover over the link.

This is an example of another inline link that doesn't have a title attribute. No text appears when you hover over the link.

Lists

The following is an example of a list that uses custom attributes:

• This list item has a custom class attribute named .ListFoo and a custom id attribute named #first-item.
• This list item has a custom id attribute named #second-item.

The custom id for each list item lets you link to the first list item and the second list item directly.

Tables

This table has a custom class attribute named .TableFoo at the end of the header row.

This multi-line table has a custom id attribute named #multi-line at the end of the header row so you can link to the table directly.