Attribute Injection {: }

It is possible to inject attributes into HTML-tags such as ID, CLASSES or indeed any HTML attributes.

In addition, there are a couple of meta-commands that control the rendering process.

Note:
Attribute injection unfortunately is a feature on which there seems to be particularly little consense in the Markdown universe. Different flavors of Markdown use different syntaxes, e.g. {#id}, [[#id]] or {:#id} etc. Hopefully, someday a quasi-standard will evolve.

For the time being, MarkdownPlus adopts the syntax of kramdown as it should clash the least with regular content.

Example:

## Title {: .myclass }

Generated Code

<h2 class='myclass'>Title </h2>

Note:

How attributes are applied depends on the position:

At end of a line:

→ applied to previous element

## Title {: .myclass }  ∕∕ applied to previous element

Output:

<h2 class="myclass">Title </h2>

At start of a line:

→ applied to next element

{: .myclass }     ∕∕ applied to next element
- one
- two

Output:

<ul class='myclass'>
<li>one</li>
<li>two</li>
</ul>

Above examples slightly modified:

- one
- two {: .myclass }     ∕∕ applied to 2ne li element

Output:

<ul>
<li>one</li>
<li class='myclass'>two</li>
</ul>

Syntax

Use special brackets {: } to inject attributes and more.

The first character of each argument defines the functionality.

Hint:

If you can't memorize the syntax, just remember that you can get help with the following code:

@@@ !help
@@@

Attributes

• <tag

  specifies the HTML tag to be injected (where possible/applicable)
• #id

  applies ID
• .class

  applies Class
• "text"

  applies 'text' into the element (where possible/applicable)
• x:y

  applies a styling rule like style='margin:none;'
• x=y

  applies attribute of type aria-hidden='true'
• !x=y

  applies a "meta-command"

Meta-Commands

• !off

  hides the element (i.e. apply style='display:none;')
• !lang=xy

  omits the element unless specified language is active
• !inline

  compiles the block as inline-markdown (aka not block level)
• !literal

  renders text unmodified
• !showtill=ISO-time

  omits the block until time is reached
• !showfrom=ISO-time

  omits the block after time has passed

ISO-time: YYYY-MM-DD or YYYY-MM-DDTHH:MM:SS (e.g. 2023-01-06T14:23)

Security Considerations:

• 'hide' (as in !off) means that given block is present in the HTML source, but not displayed by the browser – it could still be made visible by JS.
• 'omit' means given block is NOT present in HTML source.

Note: This is the same syntax as used in DivBlocks.

Examples

Paragraph with class applied:

Lorem ipsum {: .myclass }

HTML output:

<p class="myclass">Lorem ipsum </p>

Paragraph with styling directly applied:

Lorem ipsum {: color:blue }

Output:

Lorem ipsum

Language Specific Output:

## English Title {: !lang=en}
## Deutscher Titel {: !lang=de}

Output: