Dokuwiki - WebCode Plugin

> DokuWiki

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:

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:
Rendered by WebCode
Made with ❤ by Nico

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>
Rendered by WebCode
Made with ❤ by Nico

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

  • helper function to output formatted results.
function print(value) {
    document.write(value + '<br>');
}
Advertising

4 - Documentation / Reference