Markline

Timeline via Markdown

• Sample repository on hotoo' life, and demo here.

Install

via npm:

$ npm install markline -g

via spm:

$ spm install markline --save

Usage

for Command Line Interface(CLI):

$ markline server data.md
Server Started 127.0.0.1:8000

$ markline server -p 80 data.md
Server Started 127.0.0.1:80

$ markline server -w data.md
Server Started 127.0.0.1:8000

$ markline build data.md

$ markline build data.md --dist _site

build pages in dist directory by default, you can set --dist argument for custom.

for Web:

var Markline = require('markline');
var $ = require("jquery");

$.get("./data/timeline.md", function(markdown){
  var line = new Markline("#timeline", markdown);
  line.render();
});

API

Markline(Object element, String markdown)

Markline Constuctor.

Params:

• Object element: markline container element, Need HTMLElement, jQuery Object, or Selector.
• String markdown: markdown content.

markline.render()

Render timeline into container.

Markdown

Markdown is so easy, and so powerful, you can use it to build the timeline graph.

Markline use subsets of markdown now:

Dates

* 1986 for year.
* 1986/06 for month.
* 1986/06/28 is a good day.
* 1986-06-28 you also can use this date formart.

Date Ranges

* 2012~2014 year to year.
* 2012~2014/02 year to year.
* 1986/06/28~1986/08/14 from date to another date.
* 2012~ year to now.

Header

# title

## h2 group name
### h3 group name
#### h4 group name
##### h5 group name
###### h6 group name

Meta

Between title and group or lines, we can set meta data in markdown by key-value pair.

# title

- age: show
- date: 2014/01/01
- author: @hotoo
- mention: https://twitter.com/{@mention}

----

# Group 1

* 2014 line 1.

Now we support meta data:

• age: show age after year in top header line. default is hide, if want show, set:

  - age: show
  

• mention: set mention enable, and mention base url. default mention is disable.

  # @Mention Demo
  
  - mention: https://github.com/{@mention}
  
  ----
  
  - 2014 @hotoo mention @lizzie
  

  {@mention} is placeholder for mention name.

• hashtag: custom hashtag styles.

  # #HashTag Demo
  
  - hashtag:
    - tag-name: text-color, background-color
    - life: yellow, #f00
    - job: rgb(255,255,255), rgba(255,0,0,0.5)
  
  ----
  
  - 2014 this is my #life
  

following meta data support come soon.

• theme: set different theme, by build-in theme name, or theme css file url.

  - theme: light
  - theme: http://www.example.com/theme.css
  

• year-length: set date column width.

• date-type: show date type by year, month, or date

• author: set author information.

List

* 2014 list item
  * 2014/01 sub list item

- 2014 another list item
  - 2014/01 another sub list item

Horizontal

for anonymous group.

* 2014 line 1

----

* 2015 line 2

Link

* 2014 this is a  [link](url)

Image

* 2014 this is an image: ![alt](image-url)

Strong

* 2014 this is **strong** text.
* 2014 this is __another strong__ text.

Emphasized

* 2014 this is _emphasized_ text.
* 2014 this is *another emphasized* text.

Delete

* 2014 this is ~delete~ text.
* 2014 this is ~~another delete~~ text.

Want more markdown syntax feature? make issues, fork and pull request.

Examples

# document name(title)

## group name (optional)

* 2012~2014 list 1
  - 2012/02 sub list 2.1
  - 2013/08/02~2013/12/20 sub list 2.2
* 2012/02 list 2
* 2012/02/02 list 3

## another group

- 2013 another list item.
- 2013-05-05 yet another list item.

References

• Markdown Syntax
• Example Data

Why I write this?

• I like cheeaun/life but I want more.
• I don't like cheeaun/life repo's code.
• cheeaun/life's date format is not good for me. (IETF-compliant RFC 2822 timestamps)
• But Thanks @cheeaun for anyway.
• Convert cheeaun/life.md for markline

LICENSES

MIT