Dokuwiki - WebCode Plugin

1 - About

This plugin will render the result of CSS and HTML block code that are enclosed between two webcode tags.

2 - Installation, Syntax, Development and Bugs

3 - Dokuwiki Plugin Web Page

4 - Example

4.1 - HTML and CSS

4.1.1 - The original Wiki Syntax

<webcode frameborder=1 width=100% height=250px>
  * The (Xml|HTML) Code 
<code xml>
<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>

4.1.2 - The Wiki output

  • 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;
 }

4.2 - HTML and Javascript

4.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>

4.2.2 - The Output

var myHeading = document.querySelector("h1");
myHeading.textContent = "Hello "+myHeading.textContent+"!";
<h1>Nico</h1>

5 - Just for me

5.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>

5.1.1 - May be for later

6 - Documentation / Reference

  • Bookmark "Dokuwiki - WebCode Plugin" at del.icio.us
  • Bookmark "Dokuwiki - WebCode Plugin" at Digg
  • Bookmark "Dokuwiki - WebCode Plugin" at Ask
  • Bookmark "Dokuwiki - WebCode Plugin" at Google
  • Bookmark "Dokuwiki - WebCode Plugin" at StumbleUpon
  • Bookmark "Dokuwiki - WebCode Plugin" at Technorati
  • Bookmark "Dokuwiki - WebCode Plugin" at Live Bookmarks
  • Bookmark "Dokuwiki - WebCode Plugin" at Yahoo! Myweb
  • Bookmark "Dokuwiki - WebCode Plugin" at Facebook
  • Bookmark "Dokuwiki - WebCode Plugin" at Yahoo! Bookmarks
  • Bookmark "Dokuwiki - WebCode Plugin" at Twitter
  • Bookmark "Dokuwiki - WebCode Plugin" at myAOL
dokuwiki/webcode.txt ยท Last modified: 2016/10/28 22:24 by gerardnico