Ⓜ️ Timeline via Markdown.
Branch: master
Clone or download
Latest commit 6ce14c0 Dec 19, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
examples
template Update timeline styles Oct 31, 2014
tests Project init, add static demo, and some script, data example. Sep 23, 2014
.gitignore Add #4, support build for anywhere. Oct 6, 2014
.spmignore
HISTORY.md Project init, add static demo, and some script, data example. Sep 23, 2014
Makefile Fixed make clean for publish and build Oct 6, 2014
README.md doc: badge icons Dec 19, 2017
index.js Fixed template title Oct 30, 2014
markline.js Add + list support, #12 Nov 6, 2014
package.json Refact styles, and add fixed header, footer without js. Oct 30, 2014
timeline.css
timeline.js Refact styles, and add fixed header, footer without js. Oct 30, 2014

README.md

Markline

NPM version Build Status Coverage Status


Timeline via Markdown

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

Why I write this?

LICENSES

MIT