JodaStyle Header 1

JodaStyle will

[<icon: bi bi-emoji-smile>]

JodaShorts

Wrap Markdown content like [i .bi bi-pen] in <i class="bi bi-pen"></i>.

Split Sections

JodaStyle will split flat h1,h2,h3 Sections into a tree-like dom structure.

Original

Pre Text











# Section 1

Section content














## Section 2

Section Content









### SubSection1.1.1

Section Content














### SubSection1.1.1

Section Content















## Section1.1

Section Content

After Split

<div class="">
<section class="section-h1pre">
<div class="content">

Pre Text

<p class="">

<section class="section-h1">
<div class="content">

Section 1
<h1 class="">

Section content

<p class="">

<section class="section-h2">
<div class="content">

SubSection1.1
<h2 class="">

Section Content

<p class="">

<div class="children">
<div class="section-h3">
<div class="content">

SubSubSection1.1.1
<h3 class="">

Section Content

<p class="">

<div class="section-h3">
<div class="content">

SubSubSection1.1.1
<h3 class="">

Section Content

<p class="">

<section class="section-h2">
<div class="content">

SubSection1.1
<h2 class="">

Section Content

<p class="">

CSSPlus

Modify DOM Structure with CSSPlus.

Command Description
--joda-wrap: @class1; Wrap the element in a div with class1
--joda-wrap: #id; Wrap the element in slot element of template with id
--joda-container: @class; Create Contaier for all Sub-Elements
--joda-group: @row; Wrap element and siblings with same wrap-row into this element
--joda-class: @col; Add a Class to this element
--roda-replace-by: @class; Replace the entire Element with this element
--joda-use: method(<json layout>); Wrap this element with interactive Wrapper function. It will evaluate --layout-<name> Variables
--joda-unwrap: true; Remove this element from the DOM

Minitemplate

Minitemplates will replace any occurence of [mini_tpl_name: value] with the tempates value.

Examples

Shorts in Markdown

Hello World [bi: bi-emoji-smile]

Grouping elements with CSSPlus

Create a wrapper Element <div class="row"> around all elements with class column.

.column {
    --joda-group: @row;
}