PageFactory (Kirby Plugin)

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.

Attributes

  • <tagspecifies the HTML tag to be injected (where possible/applicable)
  • #idapplies ID
  • .classapplies Class
  • "text"applies 'text' into the element (where possible/applicable)
  • x:yapplies a styling rule like style='margin:none;'
  • x=yapplies attribute of type aria-hidden='true'
  • !x=yapplies a "meta-command"

Meta-Commands

  • !offhides the element (i.e. apply style='display:none;')
  • !lang=xyomits the element unless specified language is active
  • !inlinecompiles the block as inline-markdown (aka not block level)
  • !literalrenders text unmodified
  • !showtill=ISO-timeomits the block until time is reached
  • !showfrom=ISO-timeomits 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:

English Title