webcode is a component that permits to render the output of code such as HTML, Javascript or CSS.
By enclosing code blocks by a webcode block, the plugin will add the result at the end (after the last webcode tag).
<webcode>
This is the HTML
<code html>
<span style="font-size:30pt">😀</span>
</code>
Output:
</webcode>
This is the HTML
<span style="font-size:30pt">😀</span>
Output:
webcode supports javascript and captures the console call (log 1) and table 2)) to print them on the web page in a console area (Gray box).
Example:
<webcode>
* in a javascript code block
<code javascript>
console.log("Javascript Code block");
</code>
* and also in html code block
<code html>
<script>console.log("Html code block");</script>
</code>
* The output of the console is also printed on the page.
</webcode>
The result is:
console.log("Javascript Code block");
<script>console.log("Html code block");</script>
console.table 3) is supported with an array of objects or primitives. There is no second argument.
Example:
<webcode>
<code javascript>
let tabularData = [
{name: "foo", short: "f"},
{name: "bar", short: "b"}
];
console.table(tabularData);
</code>
</webcode>
let tabularData = [
{name: "foo", short: "f"},
{name: "bar", short: "b"}
];
console.table(tabularData);
You can use webcode across section (ie with heading)
Example:
<webcode>
===== Javascript =====
```javascript
var colors = [ "blue", "green" ];
for (const [index, value] of colors.entries()) {
console.log(index+", "+value+"\n");
}
```
===== Result =====
</webcode>
<webcode type name="A Name" width=100% height=250px>
<!-- wiki syntax with css or html block code. -->
All syntax are permitted between blocks
<!-- css code block -->
<code css>
</code>
<!-- html code block -->
<code html>
</code>
<!-- javascript or babel code block -->
<code javascript> <!-- or <code babel> -->
</code>
<!-- Wiki Markup -->
<code dw>
<!-- Code Block not displayed-->
<code language [display="none"]>
</code>
</webcode>
The allowed webcode attributes are:
For external resources such as Css or Js file, this is recommended to put them in a hidden HTML code block.
Example with Bootstrap:
<code html display="none">
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</code>
The supported code block syntax is
<code lang filePath [display="none"]>
</code>
where:
To save this syntax, you need to be:
When a code block use Babel as language, the plugin will add the babel.min.js version 6 to the external resources.
You cannot have a Babel and a Javascript Block in the same webcode block.
The characters ''<, >, ", ', \, and &'' should be escaped in string literals.
Example:
let fragment = '</script>';
let fragment = '<\/script>';
Why? Because the code is executed on the HTML page, they will interfere with the HTML parser.