5The [Webcode component](https://combostrap.com/webcode) renders the output of:
7 * CSS
8 * HTML
10 * Dokuwiki
14By enclosing code block by a `<webcode>` block, the plugin will add the result after the last webcode tag.
16See the [webcode documentation](https://combostrap.com/webcode)
20See the plugin in action [here](https://combostrap.com/webcode).
24![The illustration](images/webcode_plugin_illustration.png "Webcode Illustration")
28Install the plugin using:
30 * the [Plugin Manager](https://www.dokuwiki.org/plugin:plugin)
31 * [manually](https://www.dokuwiki.org/plugin:Plugins) with the [download URL](http://github.com/gerardnico/dokuwiki-plugin-webcode/zipball/master), which points to latest version of the plugin.
35## Road map
39<iframe name="result" allow="midi *; geolocation *; microphone *; camera *; encrypted-media *;"
40sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-top-navigation-by-user-activation" allowfullscreen="" allowpaymentrequest="" frameborder="0" src="">
43 * More language with:
44 * [sphere-engine](https://developer.sphere-engine.com/api/compilers) - Online example: https://ideone.com
45 * or [codingground](https://www.tutorialspoint.com/codingground.htm
46 * [Glot.io](https://github.com/prasmussen/glot)
47 * [Mermaid Graph Library](https://mermaidjs.github.io) as language
48 * Add the console after initial rendering to not select console element via css
52Technically, the plugin:
54 * parses the content between the two `<webcode>` tag,
56 * adds after the last webcode tag an [iframe](https://docs.webplatform.org/wiki/html/elements/iframe),
57 * and a button that permits to play with the code on [JsFiddle](https://jsfiddle.net)
64 * The bar (`rendered by` and `Try the code`) are now less prominent and follows the [prism style](https://prismjs.com/plugins/toolbar/)
65 * The documentation has moved to ComboStrap.
69 * Added the possibility to show dokuwiki code if the language extension is dw
71 * Bug: trElement was declared two times in two different scope causing problem
72 * Added the possibility to cache a code block
73 * Webcode has been restructured (with the use of addPattern) and can now wrap headers (level, section). It can then be used for a howto page.
74 * Automatic test and travis has been added
78 * Firebug console was not added when the language was Babel
79 * The output on the console log is now escaped for HTML entities and can then render HTML
80 * There was a bug with the declaration of a variable
85 * New publication date on Dokuwiki
89 * Added a `renderingMode` argument to be able to show only the result
90 * Added a promotion link
91 * The links are now after the result.
94 * The 'console.table' function is partially supported
95 * The 's' variable leaked from the window.console.log function of the webCodeConsole.js
99 * The height of the Iframe is now dynamically calculated. No need to give this attribute anymore if you want to see the whole output.
103 * Added [Babel](https://babeljs.io/) support
104 * Bugs (Https call to Fiddle in place of Http, externalAttributes Resources in the action bar in place of include, Xml was not replaced by HTML code)
105 * Cache bursting implementation for the weCodeConsole.(js|css) file so that they are not cached for an new version.
108 * [JSFiddle bug 726](https://github.com/jsfiddle/jsfiddle-issues/issues/726) makes the resources order not consistent. Solution: More than one resources will be then added in the HTML script element.
110 * Two block of the same code are now concatenated
112 * XML is now seen as HTML
113 * The ''name''