omponent, you can embedded snippet of Javascript, Html and Css script and render their output.",
"pa... le": "Render web code in a your page (javascript, html, ...)"
}
---
====== ComboStrap UI - WebCode ====... that permits to render the output of code such as HTML, Javascript or CSS.
By enclosing [[docs:block:co... e last ''webcode'' tag).
===== Example=====
==== HTML ====
* This example will output: One emoji [[u
ubar:brand|brand]] is now a [[docs:marki|superset html component]] and allows all styling.
==== Grid ====
* New: The ''automatic'' [[do... tility:webcode|webcode]] is less than the default html element height of 150, the padding of the first d... element would end up in the margin of the iframe html element.
* Webcode was deleting the first p an
o define a ''ratio''
* extended with the [[docs:styling:styling|styling attributes]]
<code dw>
{{[ ]path?WxH&ratio=w:h&nolink&att=value[ ]}}
</code>
where:
* ''path'' ... ement of the image (left, center, or right [[docs:styling:float|float]])
* ''nolink'' will not add a [[#i
h alternated background
* New: added the [[docs:styling:background|background component]] to manage the b... elease:deprecated:slide|slide]])
* New : [[docs:styling:clickable|clickable attribute]]: make a whole sur... oaded by the admin and by a group of users.
==== Styling / Theme ====
* New: [[docs:styling:shadow|Elevation]] is also now known as the [[docs:styling:shadow|sha
: "1meei51mjm83femowsehx"
}
---
====== ComboStrap Styling - Marki Language ======
===== About =====
''Comb... ki'' language. It's a simplified version of the ''HTML'' language and follows the same rules.
Below, we... /component>
</code>
where:
* ''type'' is the [[.styling:type|type of component]]. Not every component has... * specific to this component
* the [[#styling|styling attributes]]
* or the [[#html|html
is shown in ''red''. You can even use the [[docs:styling:styling|styling attributes]]
* Example:
<webcode name="Default" frameborder=0>
<code dw>
Links to [[#|existing ... y a ''wikiName'' (ie website name)
Syntax:
<code html>
wikiName>path?query#fragment
</code>
For instan
card
A ''card'':
* is a [[docs:marki|superset HTML component]] and permits then all kind of [[docs:styling:styling|styling]]
* can be laid out in tile with the [[docs:lay
tstrap-custom|custom stylesheet]]
* The [[:docs:styling:scale|font size]] `Rem` configuration
* The min... t:grid|grid]], a ''cell'' now supports the [[docs:styling:clickable|clickable attribute]]
* A ''grid'' is... ocated in the center of the page.
* The [[:docs:styling:hero|Hero]] attribute that permits to create easi... nditional number of cells by line
* The [[:docs:styling:dimension|width]] can now be defined conditionall
===== Example =====
==== Line numbers ====
''HTML'' code in a [[docs:block:code|code component]] wi... bcode name="Default" frameborder="0">
```dw
<code html line-numbers="true">
<p class="hey">Type some... ==== Line Highlight ====
This example shows an ''HTML'' code in a [[docs:block:code|code component]] wh... '
are highlighted
Example:
<webcode>
```dw
<code html line-numbers="true" line-highlight="1-3, 5">
de>
</webcode>
==== Spacing ====
* With [[docs:styling:spacing|spacing]]
<webcode name="Button">
<code d... ode>
</webcode>
==== Colors ====
* With [[docs:styling:color|colors]]
<webcode name="Button">
<code dw>
... >
where:
* ''type'' defines the [[#type|default styling]]
* ''size'' defines its [[#size]]
* ''skin''... ton'' component is a fully [[docs:marki|super set HTML component]]
</note>
A ''button'' can be used:
ation when the mouse is over a component
=== Advanced ===
Every component is a [[docs:marki|html superset]] and you can therefore use the [[class|class]] for advanced styling.
r HTML ====
As ''hr'' is a [[docs:marki|superset HTML component]], you can use all [[docs:styling:styling|styling attributes]] such as [[docs:styling:spacing|spacing]]
<webcode name="Default" >
<code dw>
Lorem ipsum dolo
"0qtqv8lgs1ygj9rax9vck"
}
---
====== ComboStrap Styling - Spacing (Margin, Padding) ======
===== About ... nt space outside the box (not filled with [[docs:styling:background#color|the background color]])
* ''pa... is the space inside the box (filled with [[docs:styling:background#color|the background color]])
<note>... ] with:
* ''p-3'': a ''padding'' with a [[docs:styling:scale|scale value of 3]] (blue color)
* ''m-5''
]] |
| width | 250-550px | 550px | same as [[docs:styling:dimension|width]] (maximum width of the rendered ... tweet with the value true/false]]</note>
===== HTML =====
If you accepts HTML in your page via a HTMLOk Plugin, you can embedded them directly.
<note>
Th... not the recommended way because:
* you allows ''html'' and opens the door to cross site attack (XSS)