Slideit

What is it

This is a single-file self-contained HTML slide-show document. It can be put on a static web server or shared by mail. Graphics are embedded as in-line SVG, Javascript doesn't require any external libraries. Fonts or bitmaps are embedded as base64 encoded chunks. So any recent browser should be able to open it.

Keys

Spacebar or Enter toggles fly mode
p toggles printable/navigable document
w creates watermark on print view

Slideit

Create

The contents of this presentation can be written using a text editor in various formats:

pure html+css+js
markit which is a light-weight html syntax, giving access to the full potential of html5 but easier to write than html
wikit which is a wiki syntax giving access to html5 recent tags such as article, section,header,footer.
sketchit which is a block-diagram generator based on ascii-art
python which is an easy to use scripting language
Any combination of the above is welcome

The source file(s) is(are) processed by a one step operation to generate the single file presentation.

Slideit

Install

Dependencies

python interpreter 2.6,2.7 or 3.4
All other dependencies js,html,python are in the project's directory

Install

Install Python3 if you don't have it already
Check-out markit folder

Quick start

Goto the markit folder
Edit src/mydoc.mi and paste this:

_# My doc
Hello World !

python markit.py src/mydoc.mi doc/mydoc.html
Navigate to file://..../mydoc.html

Slideit

Execution Flow

`1`	Include directives	Many to Single file
`2`	Plugins execution	Python to any: wiki,markit,html,svg
`3`	Wiki search and replace	Wiki syntax to: markit,html,svg
`4`	Markit resolution	Markit to html,svg

Wikit

Wikit

_# heading 1

_## heading 2

_### heading 3

_#### heading 4

_##### heading 5

_###### heading 6

A word can be *Bold* or /Italic/ or Fixed width

A bullet list:

item1 ← * item1
item2 ← * item2
item3 ← * item3

Wikit

Tables

|||Table |||Col1 |||Col2 |||
|||Row1  || ABC  || DEF  ||
|||Row2  || 123  || 456  ||

Table	Col1	Col2
Row1	ABC	DEF
Row2	123	456

Blocks

Code Blocks delimiters: _== xxx ==_

for i in range(3):
   print "Hip"
print "Houra"

Quoted block delimiters _" xxx "_

I am happy !

Header

Open new article

 ____________ optional attrs

Open new section

 =========== optional attrs

Decorate section


 Header
 ^^^^^^


 vvvvvv
 Footer

Wikit

Style

[style: scoped]
    .sunset {color: yellow; }
[:style]
[span: class="sunset"]

* One
* Two 
* Three

One
Two
Three

Wikit

In-line

Code

Or

[pre:eol] Cicle
[svg:nol width="100" height="100"]
[circle. cx="50" cy="50" r="20" style="stroke:black"]

Render

 Circle

Sketchit

Intro

Sketchit is a plugin turning ascii-art into svg

Syntax

In this example below, 2 is the scale ( optional)

_{sketchit 2

  A @-> B@-+
  ^        |
  +- C <---+

}_

Render

Sketchit

Lines

Lines made of | - + are detected. Groups of 4 lines forming rectangles are drawn as rectangles, all other lines are drawn as separate elements. Special characters ^ v < > @ are replaced by instances of bubbles and arrows terminators.

                                       A               B
   ------    | ^ | ^ ^ @                 +------------+      @       
             | | | | | |   ---+          |            |      | 
   <-----    | | | | | |      |          |            |   +--v----+
             | | | | | |      +---->     |            |   |       | 
   @---->    | | | | | |      |          |            |   | Hello | 
             | | v v @ v      +---->     +------------+   +-------+      
                                        D              C

Sketchit

Polygons

In the perimeter of a rectangle contains dots, it is considered as a bonding box of a polygon. If only one dot is found an ellipse is drawn, else the dots are connected.

  +--.-----.-+               
  |          |              
  .          .              
  |    Pol   |              
  |        +-+---.------+   
  |        . |          |   
  |        | |          |   
  +---.----+.+          .-> Exit 
           |            |       
           .---------.--+

Sketchit

Style

Style can be applied, as on any other element.

[style: scoped]
    .mystyle rect {
        fill: rgba(0, 0, 200, 0.8);
        stroke: rgba(100,100,150, 1);
        stroke-linejoin: round;
        stroke-width: 5;
        }
[:style]
[div: class="mystyle"]
_{sketchit 0.75

  +----------+                  
  |          |
  +----------+                  

}_
[:div]

Sketchit

Example

     +--------+ +--------+ +--------+
     | Block1 | | Block2 | | Block3 |
     +-----^--+ +------^-+ +------^-+
           |           |          |
        <--@-----------@----------@-->
            .-+        |          |
        A --> . +------v-+ +------v-+
            | +-> Block6 | | Block7 |
        B --> . +--------+ +--------+
            .-+

Sketchit

Example

                       +----------+
                   +---+ Feedback <--+
                   |   +----------+  |
                   |                 @-->
   +---------+   .-v-+   +--------+  |
   | Stimuli +---> Op+---> Action +--+
   +---------+   +---+   +--------+

_{directives}_

directives

file inclusion

_{include %(sys)s/inc/mystyle.mi }_

Path must be absolute, but can be built from the absolute variables:
src : path of the top-level input file
sys : path of the markit engine

font embedding

_{embed.font myname %(sys)s/fonts/mywebfont.woff }_
[style:]
html body { font-family:myname,sans-serif;  }
[:style]

directives

image as background

_{embed.background .bckexample %(src)s/sky.png }_

image embedding

_{embed.image %(src)s/alien.png }_

_{embed.image %(src)s/leaf.svg }_

directives

In-line python injection

_{py
for _ in range(3):
    print "* Hello"
}_

Hello
Hello
Hello

Directives are performed before wiki or markit interpretation

directives

Data injection


_!{py
import json
file = "sample.json" 
print("Reading _=%s=_..."%(file))
data = json.load( open( dirs["src"]+"/"+file )) 
for k,v in data.items():
  print("||%r||%r||"%(k,v))
 }_

Reading sample.json...

'Item1'	'Hello'
'Item3'	45
'Item2'	[1, 34, 56, 78]

directives

Custom plugin

Write a file .../plugins/myfunc.py containing:

def myfunc(txt):
   msg = "-->"+txt+"<--"
   return msg

Call from ./doc_sources/mydoc.mi with syntax:
```
_{myfunc bla bla
bla bla bla bla }_ 
```

Render in doc ./doc/mydoc.html
```
--> bla bla
bla bla bla bla<-- 
```

directives

Custom plugin cont'd

More than one function, can be put in a module

Call function myfunc1 from file mylib.py

_{mylib.myfunc1 bla bla
bla bla bla bla }_

directives

Variables

_{py 
v={}
v["myint"]= 12
v["mystr"]= "ABC"
}_
My integer equals _{py print v["myint"] }_

My string equals _{py print v["mystr"] }_

My integer equals 12

My string equals ABC

directives

Drawing charts

bars={"ABC":12,"DEF":25,"GHI":10,"IJK":12}

directives

Call graphviz

_{graph.dotdot 
digraph G { 
bgcolor="transparent"
Hello->World
Hello->You
}
}_

_{graph.dotdot %(src)s\sample.dot }_

Note: dot command line must be installed separately from http://www.graphviz.org

directives

Call plantUML

_\{graph.plantuml %(src)s/sample.plantuml}_

_\{graph.plantuml
Bob->Alice : hello;
Alice->Bob : bye;
}_

Note: java must be installed

[markit:]

Markit

Intro

mark-it is something in between mark-down and mark-up. It is a syntax intended to be an intermediate format before conversion into full-blown html/svg. It is easier to read and write by both humans and computers. Possible applications are:

Manual writing of html, thanks to a syntax easier to read and to maintain.
Automatic writing of documents. Generators can post contents, keeping track of open tags and closing them is taken care of by the markit engine.
Simple mapping of a wiki syntax onto mark-it tags that acts as an intermediate step toward html generation.

Markit

Basic Syntax

Tags can opened and closed: [tag: attributes] contents [:tag]
This will be translated into <tag attributes> contents </tag>

Tags that have no contents can be written: [tag. attributes]
This will be translated into <tag attributes></tag>

But most of the magic comes from the fact that tags don't need to be closed manually, i.e. the [:tag] can be omitted and will be added by the markit engine.

Markit

Example

Markit	HTML	Render
[ul:nol] [li:] item1 [li:] item2 [li:] item2	<ul> <li> item1 </li><li> item2 </li><li> item3 </li></ul>	item1 item2 item3

Explanation

the first 2 <li> elements are autoclosed on siblings.
the <ul> element is autoclosed because of the blank line.
the 3rd <li> element is autoclosed because of parent closing.

Markit

Autoclose ...

On Sibling : `[tag:]...[tag:]`

A tag is autoclosed just before a tag of same type is open.

Example: [li:] item 1 [li:] item 2 [:li] ( 1st item is closed by 2sd )

Markit

Autoclose ...

On Parent : `[tag1:][tag2:]...[:tag1]`

Open tags are autoclosed just before a parent tag is closed.

Example: [p:] Please welcome [b:] John [:p] ( b tag is closed by p )

Markit

Autoclose

On End of file : `[tag:]...eof`

Open tags are autoclosed just before the end of file.

Example: [html:] [body:] ... ( html and body will be closed at the end )

Markit

Autoclose

On End of line `[tag:eol]...eol`

A tag can schedule to be closed just before end of line.

Example: [h1:eol] my title

Markit

Autoclose

On Blank lines `[tag:]...eof eof`

A tag can schedule to be closed just before an empty line.

Example: [ul:nol] [li:] item1 [li:] item2 (eol)(eol) ( ul list closed by blank line )

Markit

Autoclose

On Target tag `[tag:tag2]...[tag2:]`

A tag can schedule to be closed just before a tag of a specific type is open.

Example: [head:body] ... [body:] ... ( head is closed by body )

Markit

Manual close

Any tag `[:tag]`

Current tag `[:]`

Last opened tag can be closed.

Example: [div:][p:]][b:][:][:][:]

Markit

No autoclose `[tag:noa]`

Sibling autoclose can be disabled.

Example: [div:noa id="indented"][div:] abc [div:] def [:][:] <div class="spacer"></div>

What is it

Keys

Create

Install

Dependencies

Install

Quick start

Execution Flow

_# heading 1

_## heading 2

_### heading 3

_#### heading 4

_##### heading 5

_###### heading 6

Tables

Blocks

Open new article

Open new section

Decorate section

Style

In-line

Code

Or

Render

Intro

Syntax

Render

Lines

Polygons

Style

Example

Example

file inclusion

font embedding

image as background

image embedding

In-line python injection

Data injection

Custom plugin

Custom plugin cont'd

Variables

Drawing charts

Call graphviz

Call plantUML

Intro

Basic Syntax

Example

Explanation

Autoclose ...

On Sibling : [tag:]...[tag:]

Autoclose ...

On Parent : [tag1:][tag2:]...[:tag1]

Autoclose

On End of file : [tag:]...eof

Autoclose

On End of line [tag:eol]...eol

Autoclose

On Blank lines [tag:]...eof eof

Autoclose

On Target tag [tag:tag2]...[tag2:]

Manual close

Any tag [:tag]

Current tag [:]

No autoclose [tag:noa]

On Sibling : `[tag:]...[tag:]`

On Parent : `[tag1:][tag2:]...[:tag1]`

On End of file : `[tag:]...eof`

On End of line `[tag:eol]...eol`

On Blank lines `[tag:]...eof eof`

On Target tag `[tag:tag2]...[tag2:]`

Any tag `[:tag]`

Current tag `[:]`

No autoclose `[tag:noa]`