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

<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

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:

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

Webcode attributes

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.

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)

Language Support

Javascript Console

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

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.

Security

To save this syntax, you need to be:

Powered by ComboStrap