Dokuwiki - WebCode Plugin
Table of Contents
1 - About
I have made the plugin <Webcode>
to renders the result of HTML, CSS and Javascript code on a web page while I was learning this languages.
Why ? Because:
- it gives much more appeal when you can see directly the result.
- it's also part of a good reading experience to be able to see the result directly after the code
- it was a beautiful challenge
To render the code on Dokuwiki, you have just to enclose you dokuwiki code block between two <webcode>
tags.
You will find:
- the plugin on Dokuwiki > Webocde DokuWiki Plugin Page with the installation instruction
- the source on github > gerardnico/dokuwiki-plugin-webcode
- the documentation on github gerardnico/dokuwiki-plugin-webcode
2 - Example
2.1 - HTML and CSS
2.1.1 - Wiki Syntax
In the below block, you can see:
- an
html
block<code html>
- a
CSS
block<code css>
Because this whole content is enclosed between two <webcode>
tag, the two code blocks will be rendered after.
<webcode frameborder=1 width=100% height=250px> * The (Xml|HTML) Code <code html> <div> <blockquote> <p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p> <cite>- Groucho Marx</cite> </blockquote> </div> </code> * The Css Code <code css> blockquote { width: 125px; height: 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black } cite { display: block; text-align: right; border: none } div { width: 100px; height: 100px; border: thin solid red; } </code> </webcode>
Advertising
2.1.2 - The Wiki output
This section shows the output of the above dokuwiki syntax.
- The (Xml|HTML) Code
<div> <blockquote> <p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p> <cite>- Groucho Marx</cite> </blockquote> </div>
- The Css code
blockquote { width: 125px; height: 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black } cite { display: block; text-align: right; border: none } div { width: 100px; height: 100px; border: thin solid red; }
- The output:
2.2 - HTML and Javascript
2.2.1 - The dokuwiki Syntax
<webcode frameborder=1 width=100% height=80px > <code javascript> var myHeading = document.querySelector("h1"); myHeading.textContent = "Hello "+myHeading.textContent+"!"; </code> <code html> <h1>Nico</h1> </code> </webcode>
2.2.2 - The Output
var myHeading = document.querySelector("h1"); myHeading.textContent = "Hello "+myHeading.textContent+"!";
<h1>Nico</h1>
Advertising
3 - Just for me
This section are notes that I preserve for later.
3.1 - HTML Page Creation
<!DOCTYPE html> <html {IF CLASSES}class="classes"{/IF}> <head> <meta charset="UTF-8"> {IF PRIVATE} <meta name="robots" content="noindex"> {ELSE} <!-- MIT License --> {/IF} <title>{TITLE}</title> {STUFF FOR <HEAD>} <link rel="stylesheet" href="{CSS RESET CHOICE}"> {EXTERNAL CSS} <style> {EDITOR CSS} </style> {PREFIX FREE (if enabled)} {MODERNIZR (if enabled)} </head> <body> {EDITOR HTML} {JS Library (if chosen)} {EXTERNAL JS} <script> {EDITOR JS} //@ sourceURL=pen.js </script> </body> </html>
3.1.1 - May be for later
3.1.2 - rextester.com integration for others languages
Restfull api is supported (POST only) at http://rextester.com/rundotnet/api.
3.1.3 - Node
3.1.4 - Print statement
- helper function to output formatted results.
function print(value) { document.write(value + '<br>'); }
Advertising