MarkdownPlus

Div-Blocks ( @@@ )

Renders a <div> block to which you can apply ID, CLASS and further attributes.

@@@ .myclass	    // ←  <div class='myclass'>
Some text...
@@@			    // ← </div>

HTML output:

<div  class='myclass'>
<p>Some text&hellip;</p>
</div><!--  class='myclass' -->

Note:
If you use HTML <div>…</div> within a markdown file, the content between these tags will not be markdown-compiled.
(To be precise, that holds true for any block-level elements but not for inline elements.) Thus, results can be confusing.

Using Div-Blocks avoids this problem.

Marker Characters

By default, characters @ and % are configured to serve as markers for DIV-blocks.

Use config option divblockChars to override, e.g. (in site/config/config.php)

'usility.markdownplus.options' => [
    'divblockChars' => '@%$:',  // ← '@', '%', '$' and ':'
],

Chaining

For consecutive DIV blocks, you may omit the closing marker

@@@ .myclass
Some text...

@@@ .other-class		// <-- no closing marker here
Some more text...

@@@

HTML output:

<div  class='myclass'>
<p>Some text&hellip;</p>
</div><!--  class='myclass' -->

<div  class='other-class'>
<p>Some more text&hellip;</p>
</div><!--  class='myclass' -->

Nesting

DIV blocks can be nested. In that case tags need to have different lengths or markers.

Example:

%%% #wrapper
@@@ #outer
@@@@ #inner
Some text…
@@@@
@@@
%%%

HTML output:

<div  id='wrapper'>
  <div  id='outer'>
    <div  class='inner'>
      <p>Some text&hellip;</p>
    </div><!--  class='inner' -->
  </div><!--  id='outer' -->
</div><!--  id='wrapper' -->

Remember:
Characters serving as markers are @ and % –modify if necessary, see above.

Styling

@@@ background:yellow
Lorem ipsum
@@@

Lorem ipsum

Adding Attributes

@@@ aria-hidden=true
Lorem ipsum
@@@

HTML Output:

<div aria-hidden='true'>
Lorem ipsum
</div>

Specifying the HTML Tag

@@@ <article
Lorem ipsum
@@@

HTML Output:

<article>
  <p>Lorem ipsum</p>
</article>

Mixing

@@@ <article .class1.class2  #id3 background:yellow  aria-hidden=true
Lorem ipsum
@@@

Result:

HTML Output:

<article  id='id3' class='class1 class2' style='background:yellow;' aria-hidden='true'>
  <p>Lorem ipsum</p>
</article>

Note:
As you can see in the last example, you can use a combination of such instructions.

Div-Block Meta-Commands

Meta-commands can be applied to DIV-blocks. They are processed at compile time.

Available Meta-Commands:

  • !off
    → hides the block (with style='display:none')
  • !lang=xy
    → omits the block unless given language is active
  • !inline
    → compiles the block as inline-markdown (aka not block level)
  • !literal
    → renders text as stated (i.e. included in HTML output as is)
  • !showfrom=ISO-Timestamp
    → omits the block until time is reached
  • !showtill=ISO-Timestamp
    → omits the block after time has passed
  • !visible={criteria}
    → omits the block if admission criteria not met

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

 

Security Considerations:

  • 'hide' (as in !off) means 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.

!off

@@@ !off
Some text&hellip;
@@@

Some text…

Output: (invisible)

<div style="display:none;">
<p>Some text&hellip;</p>
</div>

!inline

To see the effect, look at this comparison:

Markdown HTML Comment
@@@ .box
a*b*c

xyz @@@ 
<div class="box">
<p>a<em>b</em>c</p>
<p>xyz</p>
</div>
← <p> tag
@@@ .box !inline
a*b*c

xyz @@@ 
<div class="box">
a<em>b</em>c

xyz
</div>
← NO <p> tag

→ in the second example, no block-level elements were compiled. "xyz" is not in <p> tags.

!literal

@@@ !literal
1. Lorem 
    2. Ipsum
        3. Dolor

@@@

Output

1. Lorem 2. Ipsum 3. Dolor

→ rendered HTML will look exactly like the source.

!showfrom=ISO-Timestamp

@@@ !showfrom=2022-12-31
Visible after time has past.
@@@

Visible after time has past.

!showtill=ISO-Timestamp

@@@ !showtill=2025-12-31
Visible until time has arrived.
@@@

→ no output at this time

!lang=xy 

@@@ !lang=en
Only visible while language en is active.
@@@

Currenty active language: fr

Vous lisez une phrase en français.

→ Try it out: [ en English de Deutsch fr Français ]

!visibility={criteria}

@@@ !visibility=localhost|loggedin
Visible only if on localhost or logged in.
@@@

MarkdownPlus