ComboStrap UI - WebCode

About

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).

Example

HTML

• This example will output: One emoji Smiley (1F600) in a webcode

<webcode>
This is the HTML
<code html>
<span style="font-size:30pt">&#x1F600;</span>
</code>
Output:
</webcode>

• Result

This is the HTML

<span style="font-size:30pt">&#x1F600;</span>

Output:

Javascript

webcode supports javascript and captures the console call (log ¹⁾ and table ²⁾) 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

console.table ³⁾ 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>

• This markup will output:

        let tabularData = [
            {name: "foo", short: "f"},
            {name: "bar", short: "b"}
        ];
        console.table(tabularData);
    

Across section

You can use webcode across section (ie with heading)

Example:

• the following markup

<webcode>
===== Javascript =====
```javascript
var colors = [ "blue", "green" ];
for (const [index, value] of colors.entries()) {
  console.log(index+", "+value+"\n");
}
```
===== Result =====
</webcode>

• will output:

Syntax

Webcode Syntax

<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>

Webcode attributes

The allowed webcode attributes are:

• type:
  • story (default): The rendering will output the content inside the webcode elements and add the result after the closing webcode code.
  • result: The rendering will suppress the content inside the webcode elements and will show only the result after the closing webcode code.
  • inject: The HTML and Javascript will be injected on the page
• the following attributes of the iframe element
  • name. It will be added as a suffix
  • frameborder (default to 0)
  • width (default to 100%)
  • height (The height is automatically adjusted if not set)
  • scrolling

External resources

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>

code attributes

The supported code block syntax is

<code lang filePath [display="none"]>
</code>

where:

• lang can be:
  • html
  • xml (will be seen as XHTML)
  • css
  • javascript or babel (but not both in a webcode)
  • dw (for dokuwiki)
• display=“none” will not display the code block (in this case file name and other attributes should not be used)

Security

To save this syntax, you need to be:

• an admin
• or a Designer

Language Support

Babel

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.

Support

Parsing problem?

The characters ''<, >, ", ', \, and &'' should be escaped in string literals.

Example:

• In the below literal, the character / should be escaped

let fragment = '</script>';

• The right way is to write it:

let fragment = '<\/script>';

Why? Because the code is executed on the HTML page, they will interfere with the HTML parser.