ComboStrap UI - WebCode Support

1 - About

webcode is a component that permits to render the output of web language such as HTML, Javascript or CSS.

By enclosing code blocks by a webcode block, the plugin will add the result after the last webcode tag.

This component is not bundled by default and you should install it separately if you want to use it. This component is available here and can be installed via the extension manager

2 - Example

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


  • This is the HTML



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


  • Output:

Others example can be found at github:

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


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

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

3.2 - Language Support

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

3.2.2 - Babel

When a code block use [Babel](https://babeljs.io/) 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.