Wallapatta Reference

##Headings Headings have the same syntax as --Markdown--. ``#`` for level 1 headings, ``##`` for level 2 headings and so on. The content that belongs to the heading should be indented. ``` #Heading Indented content ##Paragraphs Again, similar to Markdown. Paragraphs are separated by blank lines. ``` Paragraph1 More of paragraph1 Paragraph2 ##Lists Ordered lists begin with ``-`` while un-ordered lists begin with ``*``. Since lists can be structured with indentation, it's easy to have lists within lists. ``` - Introduction - Analyses - Daily analysis - Benford's law - Timeseries analysis - Visualizations * Treemap * Bar charts * Dashboard >>> - Introduction - Analyses - Daily analysis - Benford's law - Timeseries analysis - Visualizations * Treemap * Bar charts * Dashboard ##Images Images can be added with ``!``. >>> !https://d13yacurqjgara.cloudfront.net/users/161539/screenshots/1789209/logo.png ``` !https://d13yac... Inline images can be added by surrounding the image URL with double square brackets (``[[`` and ``]]``). ``` This is a sentence which contains an [[https://d13yac....]] inline image. >>> This is a sentence which contains an [[https://d13yacurqjgara.cloudfront.net/users/161539/screenshots/1789209/logo.png]] inline image. ###Options ``` !IMAGE(ALT_TEXT)(WIDTH_PERCENTAGE)(FLOAT) CONTENT * ``IMAGE``: image url * ``ALT_TEXT``: alternate text if the image cannot be displayed * ``WIDTH_PERCENTAGE``: maximum width of the image as a percentage of the document width * ``FLOAT``: where to place the image; ``>`` moves image to right and``<`` move the image to lest * ``CONTENT``: content related to image; content gets wrapped around the image if the image is floating (``<``, ``>``) !https://static.pexels.com/photos/6547/sky-night-space-galaxy-large.jpeg(sample)(50) --Content inside this is centered below the image >>> 50% image width ``` !https://sta...(sample)(50) !https://static.pexels.com/photos/6547/sky-night-space-galaxy-large.jpeg(sample)(50)(>) This text is wrapped around the image. The image is moved to right with ``>``. * You can have any content in this section >>> Wrapping text around the image ``` !https://sta...(sample)(50)(>) blah blah ##Side Notes Side notes can be added by ``>>>``. It is possible to have any other component inside side notes. The content for to the side note is identified from indentation. ``` >>> This is a **side note** containing text, a list and an image. - One - Two - Three !https://d13yac... >>> This is a **side note** containing text, a list and an image. - One - Two - Three !https://d13yacurqjgara.cloudfront.net/users/161539/screenshots/1789209/logo.png ##Special Blocks This is similar to block quotes in Markdown. Special blocks are specified by ``+++``. The content is identified using indentation. ``` +++ **This is a special segment. Can have all the other things like images. !https://d13yac... +++ **This is a special segment. Can have all the other things like images. !https://d13yacurqjgara.cloudfront.net/users/161539/screenshots/2365282/dashboard-white.png ##Code Blocks Code blocks are identified by three backtick quotes (`). To enable syntax highlighting, specify the language after the three backtick quotes. ``` ```javascript function test() { var i = 10 } ```javascript function test() { var i = 10 } ##Formatted code blocks These are code blocks with formatting. The content inside these can be formatted using normal wallapatta formatting. Formatted code blocks are identified by ``<<<wallapatta``. ``` <<<wallapatta **for** i := 0 **to** n S += A__i__ * B__i__ <<<wallapatta **for** i := 0 **to** n S += A__i__ * B__i__ ##Tables Tables can be specified with ``|||``, and cells can be separated by ``|``. The content of to the table are identified from indentation. Headers can be specified by following any row of cells with three equal signs (``===``). ``` ||| Header 1 | Header 2 | 3rd Header === Cell 1 | Cell 2 | Third Cell Cell 4 | Cell 5 | Sixth Cell >>> It's possible to have empty cells, multiple header rows, and spanned columns. ||| Header 1 | Header 2 | 3rd Header === Cell 1 | Cell 2 | Third Cell Cell 4 | Cell 5 | Sixth Cell And here's an example of a table with spanned columns: ``` ||| Name | | Age First | Last | === Foo | Bar | 25 Baz | Fib | 19 ||| Name | | Age First | Last | === Foo | Bar | 25 Baz | Fib | 19 ##HTML Blocks HTML blocks are identified by ``<<<``. ``` <<< <blockquote class="twitter-tweet" lang="en"... <script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script> Here's a tweet embedded with an HTML block. <<< <blockquote class="twitter-tweet" lang="en"><p>Wallapatta <a href="http://t.co/iaPELYc7RL">http://t.co/iaPELYc7RL</a> Alternative to <a href="https://twitter.com/hashtag/markdown?src=hash">#markdown</a> written in <a href="https://twitter.com/hashtag/coffeescript?src=hash">#coffeescript</a></p>— Varuna Jayasiri (@vpj) <a href="https://twitter.com/vpj/status/532035802578944003">November 11, 2014</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> >>> This won't work in online editor since the twitter script will not load ##JavaScript Blocks JavaScript blocks are identified by ``<<<js``. The code is evaluated and the html code returned is rendered. ``` <<<js "<strong>" + (7 * 100) + "</strong>" >>> <<<js "<strong>" + (7 * 100) + "</strong>" ##CoffeeScript Blocks CoffeeScript blocks are identified by ``<<<coffee``. The code is evaluated and the html code returned is rendered. ```coffeescript <<<coffee "<strong>#{7 * 100}</strong>" >>> <<<coffee "<strong>#{7 * 100}</strong>" ##Weya Blocks Weya blocks are identified by ``<<<weya``. The code is evaluated and the html code returned is rendered. >>> <<https://github.com/vpj/weya(Weya on Github)>> ```coffeescript <<<weya G = 1.618 H = 13 order = [2, 4, 1, 0, 3] heights = (H * Math.pow G, i for i in order) @svg width: 250, height: 250, -> @g transform: "translate(2, 154)", -> for h, i in heights @g ".bar", transform: "translate(#{i * 50}, 0)", -> @rect y: -h * G, width: 46, height: h * G, fill: '#4a4a4a' @rect width: 30.67, height: h,fill: '#98ff98' @rect x: 30.67, width: 15.33, height: h, fill: '#8bea8b' >>> It generates the <<https://www.forestpin.com(Forestpin)>> Logo <<<weya G = 1.618 H = 13 order = [2, 4, 1, 0, 3] heights = (H * Math.pow G, i for i in order) @svg width: 250, height: 250, -> @g transform: "translate(2, 154)", -> for h, i in heights @g ".bar", transform: "translate(#{i * 50}, 0)", -> @rect y: -h * G, width: 46, height: h * G, fill: '#4a4a4a' @rect width: 30.67, height: h,fill: '#98ff98' @rect x: 30.67, width: 15.33, height: h, fill: '#8bea8b' ##Fullwidth Blocks Full width blocks are identified by ``<!>``. They create content that takes up the full width of the document; i.e. taking up the space reserved for side notes. ``` <!> !https://static.pexels.com/photos/6547/sky-night-space-galaxy-large.jpeg <!> !https://static.pexels.com/photos/6547/sky-night-space-galaxy-large.jpeg <!> !https://d13yacurqjgara.cloudfront.net/users/161539/screenshots/2365282/dashboard-white.png(sample)(50)(<) This text is wrapped around the image, in a full width section. The image is moved to left with ``<``. See **Images** syntax for details on wrapping text around images. ##Bold Text can be made bold with ``**``. ``` **This is bold** and this is not. **This entire paragraph is bold. Still the same paragraph. >>> **This is bold** and this is not. **This entire paragraph is bold. Still the same paragraph. ##Italics Text can be italicized with ``--``. ``` --This is italics-- and this is not --This entire paragraph is in italics. Still the same paragraph >>> --This is in italics-- and this is not --This entire paragraph is in italics. Still the same paragraph ##Superscripts and Subscripts Superscripts are wrapped inside ``^^ ^^`` and subscripts are wrapped inside ``__ __``. ``` * 2^^2^^ = 4 * CO__2__ >>> * 2^^2^^ = 4 * CO__2__ ##Inline Code Inline code is identified by two backticks (`). ``` Click ``apply`` to save changes. >>> Click ``apply`` to save changes. ##Links Links are wrapped inside ``<< >>``. The link text can be specified within brackets. ``` * <<http://www.twitter.com/vpj(My Twitter Account)>> * <<http://blog.varunajayasiri.com>> >>> * <<http://www.twitter.com/vpj(My Twitter Account)>> * <<http://blog.varunajayasiri.com>> ##Comments Comments can be specified with three forward slashes (``///``). All text typed inside a comment will be ignored, along with any other components or formatting used inside. ``` This is a sentence. ///This is a **comment** with some text, which won't appear And this is yet another sentence. >>> This is a sentence. ///This is a **comment** with some text, which won't appear And this is yet another sentence.