ComboStrap UI - WebCode

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

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

A webcode with Javascript code.

<webcode>
  * The javascript
<code javascript>
var colors = [ "blue", "green" ];
for (const [index, value] of colors.entries()) {
  console.log(index+", "+value+"\n");
}
</code>
  * Output:
</webcode>

The result is:

• The javascript

var colors = [ "blue", "green" ];
for (const [index, value] of colors.entries()) {
  console.log(index+", "+value+"\n");
}

• Output:

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:

<webcode name="A Name" width=100% frameborder=0 height=250px externalResources="//d3js.org/d3.v3.min.js,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- wiki syntax with css or html block code. -->
    Full dokuwiki syntax are permitted between blocks

    <!-- css code block -->
    <code css>
    </code>

    <!-- html code block -->
    <code html>
    </code>

    <!-- An xml block may be use in place of an html one -->
    <code xml>
    </code>

    <!-- javascript or babel code block -->
    <code javascript> <!-- or <code babel> -->
    </code>
    
    <!-- Dokuwiki Code -->
    <code dw> 
    
    <!-- Code Block not displayed-->
    <code language [display="none"]>
    </code>

</webcode>

The allowed webcode attributes are:

• 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
• externalResources: a comma separated list of external resources. (Ie an URL of a Css or Js file, generally a CDN)
• renderingMode:
  • story (default): The rendering will output the content inside the webcode elements and add the result after the closing webcode code.
  • onlyResult: The rendering will suppress the content inside the webcode elements and will show only the result after the closing webcode code.

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)

• The console.log function will be rendered and therefore visible in a console area (Gray box).
• The console.table function is supported only for a collection of objects or primitives. There is no second argument.

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.

To save this syntax, you need to be:

• an admin
• or a member of the svgUploadGroupName