##Vivid
A simple and elegant markup language that compiles to HTML & XML (and soon JSON). Vivid is clear markup that looks like an outline, just like something written with a permanent marker ;)
###How to use the converter
- Vivid files can be created in any text editor of your choice, but at this stage should be encoded in Unicode, preferably UTF-8.
- At the moment you need Python 2+ installed to make use of the script.
- Simply download 'xconverter.py' and the 'markdown' directory to the directory of your choice.
- Open a command-line and enter 'python [path to converter]\xconverter.py [path to vivid file][filename of your vivid file] [path to html file][filename of the html file you want to output]' e.g. 'python c:\vivid\xconverter.py c:\documents\example.vivid c:\website\example.html'
- If you don't enter the filename for the html file, it will default to the name of vivid file (e.g. example.vivid -> example.html)
- That's it!
###Syntax - XML & HTML
####Starting out, tags, whitespace and nesting tags
Vivid uses indentation (tab or spaces) much like an outlining tool to organise the DOM rather than start and end tags. Here is a simple example:
div div p div p
will automatically nest the tags and convert to:
<div> <div> <p></p> </div> <div> <p></p> </div> </div>
much as you'd expect it to.
Whichever indentation regime you prefer will be supported as long as you are consistent; tab-spaces, 2-space and 4-space and other schemes that use multiples of a space are all supported and automatically detected.
The output is currently tab-spaced only.
####Text
Text is designated with a leading # or between two ##s:
p #Based on ideal line length 50-75 characters. p ##As you can see... blah blah blah this is a multi-line block## p ## This is another multi line block that I have created ##
converts to:
<p>Based on ideal line length 50-75 characters.</p> <p> As you can see... blah blah blah<br /> this is a multi-line block </p> <p> This is another multi line block<br /> that I have created </p>
If you have a single line of text and want to put it on the same line as the tag it belong to you can:
table tr th#First Name th#Surname th#Age tr td#Adam td#Adamsen td#40 tr td#Mavis td#Withers td#92
will turn into:
<table> <tr> <th>First Name</th> <th>Surname</th> <th>Age</th> </tr> <tr> <td>Adam</td> <td>Adamsen</td> <td>40</td> </tr> <tr> <td>Mavis</td> <td>Withers</td> <td>92</td> </tr> </table>
####Attributes (eg id, class, type)
Assigning attributes (such as id or class) is easy; on a new line after a tag, just add an extra indent with the syntax attribute:value as follows:
div id:kafka class:blocktext data-category:3
which will turn into:
<div id="kafka" class="blocktext" data-category="3"></div>
You can also use attributes on multiple lines by using 'attribute:', indenting the values you want to use and putting a semicolon at the end, like so:
div id: kafka blocktext menu;
which turns into:
<div id="kafka blocktext menu"></div>
####Tags you can use
You can use whichever tags you like as long as they don't start with '#' or contain ':'
hello these are some tags
ie
<hello> <these> <are></are> <some></some> </these> <tags></tags> </hello>
####Markdown
Note: Markdown blocks automatically get wrapped in a 'p' tag so do not need to be preceded by one (see below).
Markdown is supported (courtesy of The Python Markdown Project, see copyright/licence details below), starting and ending with '#markdown#':
div #markdown# Here is some **Markdown** for your viewing pleasure: * A list perhaps? * I think that sounds grand! *Spectacular*, if I do say so myself! #markdown#
converts to:
<div> <p>Here is some <strong>Markdown</strong> for your viewing pleasure:</p> <ul> <li><p>A list perhaps?</p></li> <li><p>I think that sounds grand!</p></li> </ul> <p><em>Spectacular</em>, if I do say so myself!</p> </div>
Indentation not as nice but I'm working on it!
Markdown project and syntax available at Daring Fireball
####Putting it all together: a complex example
Here is a particularly involved example (example.vivid and example.html):
html lang:en head meta charset:utf-8 title #Ideal line lengths by font script src://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js script src:linelength.js link rel:stylesheet href:linelength.css body div id:heading h1 #Ideal Line Lengths by Font div id:intro p #Based on ideal line length 50-75 characters. p ##As you can see... blah blah blah this is a multi-line block## p ## This is another multi line block that I have created ## #markdown# Here is some **Markdown** for your viewing pleasure: * A list perhaps? * I think that sounds grand! *Spectacular* #markdown# p#This works too div id:tester h2 #Test it out here: input type:range id:charsperline max:75 min:50 step:1 value:62 class:kafka ul class: fiddle kafka buttons; li#An item class:firstitem li#Another item li
converts to:
<html lang="en"> <head> <meta charset="utf-8"></meta> <title>Ideal line lengths by font</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="linelength.js"></script> <link rel="stylesheet" href="linelength.css"></link> </head> <body> <div id="heading"> <h1>Ideal Line Lengths by Font</h1> </div> <div id="intro"> <p>Based on ideal line length 50-75 characters.</p> <p> As you can see... blah blah blah<br /> this is a multi-line block </p> <p> This is another multi line block<br /> that I have created </p> <p>Here is some <strong>Markdown</strong> for your viewing pleasure:</p> <ul> <li><p>A list perhaps?</p></li> <li><p>I think that sounds grand!</p></li> </ul> <p><em>Spectacular</em></p> <p>This works too</p> </div> <div id="tester" class="kafka"> <h2>Test it out here:</h2> <input type="range" id="charsperline" max="75" min="50" step="1" value="62"></input> </div> <ul class="fiddle kafka buttons"> <li class="firstitem">An item</li> <li>Another item</li> <li></li> </ul> </body> </html>
Have fun!
###Credits & Licence information
####Vivid
Vivid is licenced under The MIT License (MIT)
Copyright © 2013 Vivid Project
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
####Markdown module courtesy of The Python Markdown Project:
Copyright 2007, 2008 The Python Markdown Project (v. 1.7 and later)
Copyright 2004, 2005, 2006 Yuri Takhteyev (v. 0.2-1.6b)
Copyright 2004 Manfred Stienstra (the original version)
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
- Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
- Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
- Neither the name of the <organization> nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE PYTHON MARKDOWN PROJECT ''AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL ANY CONTRIBUTORS TO THE PYTHON MARKDOWN PROJECT BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.