ComboStrap UI - WebCode

1 - 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 after the last webcode tag.

Integrated since version 1.12

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

  • Result
  • This is the HTML

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

  • Output:

Others example can be found at github:

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

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

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

4.2 - Language Support

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

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

Powered by ComboStrap