---json
{
    "description": "With the `web code` component, you can embedded snippet of Javascript, Html and Css script and render their output.",
    "page_id": "8fe6ahwh2hf8ikqs7m12j",
    "title": "Render web code in a your page (javascript, html, ...)"
}
---

====== ComboStrap UI - WebCode ======



===== About =====
''webcode'' is a component that permits to render the output of code such as HTML, Javascript or CSS.

By enclosing [[docs:block:code|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 [[unicode>1F600|Smiley (1F600)]] in a webcode
<file html>
<webcode>
This is the HTML
<code html>
<span style="font-size:30pt">&#x1F600;</span>
</code>
Output:
</webcode>
</file>
  * Result
<webcode name="Default">
This is the HTML
<code html>
<span style="font-size:30pt">&#x1F600;</span>
</code>
Output:
</webcode>

==== Javascript ====
''webcode'' supports javascript and captures the console call (log (([[https://developer.mozilla.org/en-US/docs/Web/API/Console/log|console.log function]])) and table (([[https://developer.mozilla.org/en-US/docs/Web/API/Console/table|console.table function]]))) to print them on the web page in a console area (Gray box).

Example:
<file html>
<webcode>
  * in a javascript code block
<code javascript>
console.log("Javascript Code block");
</code>
  * and also in html code block
<code html>
<script>console.log("Html code block");</script>
</code>
  * The output of the console is also printed on the page.
</webcode>
</file>

\\
\\
The result is:
<box border-color="gray" spacing="pt-3">
<webcode>
  * in a javascript code block
<code javascript>
console.log("Javascript Code block");
</code>
  * and also in html code block
<code html>
<script>console.log("Html code block");</script>
</code>
  * The output of the console is also printed on the page.
</webcode>
</box>







==== Console.table ====

''console.table'' (([[https://developer.mozilla.org/en-US/docs/Web/API/Console/table|console.table function]])) is supported with an array of objects or primitives. There is no second argument.


Example:
<webcode>
```dw
<webcode>
    <code javascript>
        let tabularData = [
            {name: "foo", short: "f"},
            {name: "bar", short: "b"}
        ];
        console.table(tabularData);
    </code>
</webcode>
```
  * This markup will output:
</webcode>
==== Across section ====

You can use webcode across section (ie with [[docs:content:heading|heading]])

Example:
  * the following markup
<webcode iframe>
<code dw iframe>
<webcode>
===== Javascript =====
```javascript
var colors = [ "blue", "green" ];
for (const [index, value] of colors.entries()) {
  console.log(index+", "+value+"\n");
}
```
===== Result =====
</webcode>
</code>
  * will output:
</webcode>




===== Syntax =====

==== Webcode Syntax ====

<file html>
<webcode type name="A Name" width=100% height=250px>

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

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

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

    <!-- javascript or babel code block -->
    <code javascript> <!-- or <code babel> -->
    </code>

    <!-- Wiki Markup -->
    <code dw>

    <!-- Code Block not displayed-->
    <code language [display="none"]>
    </code>

</webcode>
</file>

====  Webcode attributes ====


The allowed ''webcode'' attributes are:
   * [[:docs:styling:type|type]]:
      * ''story'' (default): The rendering will output the content inside the ''webcode'' elements and add the result after the closing ''webcode'' code.
      * ''result'': The rendering will **suppress** the content inside the ''webcode'' elements and will show only the result after the closing ''webcode'' code.
      * ''inject'': The HTML and Javascript will be injected on the page
   * the following attributes of the [[https://docs.webplatform.org/wiki/html/elements/iframe|iframe element]]
      * name. It will be added as a suffix
      * frameborder (default to 0)
      * width (default to 100%)
      * height (<inote>The height is automatically adjusted if not set</inote>)
      * scrolling


=== External resources ===

For external resources such as Css or Js file, this is recommended to put them in a hidden HTML code block.

Example with Bootstrap:
```html
<code html display="none">
<!-- CSS  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</code>
```
=== code attributes ===


The supported [[docs:block:code|code]] block syntax is

<file html>
<code lang filePath [display="none"]>
</code>
</file>
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)

==== Security ====

To save this syntax, you need to be:
  * an ''admin''
  * or a [[:docs:app:designer|Designer]]

==== Language Support ====



=== Babel ===


When a code block use [[https://babeljs.io/|Babel]] as language, the plugin will add the
[[https://unpkg.com/babel-standalone@6/babel.min.js|babel.min.js]] version 6 to the external resources.

You cannot have a Babel and a Javascript Block in the same webcode block.


===== Support =====

==== Parsing problem? ====

The characters %%''<, >, ", ', \, and &''%% should be escaped in string literals.

Example:
  * In the below literal, the character ''/'' should be escaped
<code javascript>
let fragment = '</script>';
</code>
  * The right way is to write it:
<code javascript>
let fragment = '<\/script>';
</code>

Why? Because the code is executed on the HTML page, they will
interfere with the HTML parser.