ComboStrap UI - WebCode
Table of Contents
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">😀</span>
</code>
Output:
</webcode>
- Result
This is the HTML
<span style="font-size:30pt">😀</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:
- an admin
- or a member of the svgUploadGroupName