marcup

A simple markup language that allows you to write a modified form of HTML in CoffeeScript.

npm install marcup
3 downloads in the last week
12 downloads in the last month

Marcup

Marcup is a simple markup language that runs within CoffeeScript.

Installation

To use marcup you can either include the builder file, or use npm. To use npm simple use npm install marcup or sudp npm install -g marcup (to install globally).

Execution

This program can be used in two different ways. The first is by requiring the main file manually and executing in one file:

Marcup = require(path_to_file).Marcup

output = new Marcup(root).parse ->
#Marcup code here

Or you can execute from a given coffeescript file:

data.coffee:

#Marcup code here

executor.coffee

fs = require('fs');
Marcup = require("marcup").Marcup

ARGV = process.argv[2..]

readFile = "./#{ARGV[0]}"
writeFile = "./#{ARGV[1]}" or "./output.html"

output = new Marcup(root).parse ->
  require(readFile)

fs.writeFile(writeFile, output)

And then run in terminal: coffee executor.coffee data.coffee #{path_to_output_file}

The Language

There are two ways to run each command. The first is inline and the second is as a block. To produce inline html you execute commands like:

p "This is a paragraph"

Which will produce:

<p>This is a paragraph</p>

On the other hand, to produce a block, you would use the same command but as a block in coffee script:

p ->
    text "This is a paragraph""

Which will produce:

<p>
    This is a paragraph
</p>

Adding Attributes

To add attributes to a tag in Marcup, you simply pass objects to a block.

To do this inline do:

div class: "A class", style: "The style", "This goes in the div"

Which will return:

<div class="A class" style="The style">This goes in the div</div>

To do this as a block you would:

div class: "Class", ->
    text "Inside the div"

Note that the last comma is important, so don't leave this out!

This will produce:

<div class="class">
    Inside the div
</div>

Marcup Unique Syntax

To do links in Marcup you use the link tag and pass it a to attribute:

link to: "http://google.com", "Google"

Or as a block:

link to:"http://google.com", ->
    text "Google"

Which produces:

<a href="http://google.com">Google</a>

Or:

<a href="http://google.com">
    Google
</a>

respectively.

Lists

To create lists in Marcup you use the list tag and pass it a type attribute with either "ordered" or "unordered" as the value. This will specify weather the list should be ordered or not and will default to unordered if no value is given. Additionally, each list item is distinguished by an item tag. This will look something like:

list type: "unordered", class: "Class", ->
    item "Item 1"
    for i in [2..10]
        item "Item #{i}"

Which will produce:

<ul class="Class">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
 <li>Item 7</li>
 <li>Item 8</li>
 <li>Item 9</li>
 <li>Item 10</li>
</ul>
npm loves you