jekyll-spaceship

A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, etc.

Table of Contents

• Installation
• Usage
  • 1. Table Usage
  • 1.1 Rowspan and Colspan
  • 1.2 Multiline
  • 1.3 Headerless
  • 1.4 Cell Alignment
  • 2. MathJax Usage
  • 3. PlantUML Usage
• Credits
• Contributing
• License

Installation

Add jekyll-spaceship plugin in your site's Gemfile, and run bundle install.

gem 'jekyll-spaceship'

Add jekyll-spaceship to the gems: section in your site's _config.yml.

plugins:
  - jekyll-spaceship

Usage

1. Table Usage

For now, these extended features are provided:

• Cells spanning multiple columns
• Cells spanning multiple rows
• Cells text align separately
• Table header not required
• Grouped table header rows or data rows

Noted that GitHub filters out style property, so the example displays with the obsolete align property. But in actual this plugin outputs style property with text-align CSS attribute.

Rowspan and Colspan

^^ in a cell indicates it should be merged with the cell above.
This feature is contributed by pmccloghrylaing.

| Stage | Direct Products | ATP Yields |
| ----: | --------------: | ---------: |
|Glycolysis | 2 ATP                   ||
|^^         | 2 NADH      | 3--5 ATP   |
|Pyruvaye oxidation | 2 NADH | 5 ATP   |
|Citric acid cycle  | 2 ATP  |         |
|^^                 | 6 NADH | 15 ATP  |
|^^                 | 2 FADH | 3 ATP   |
| 30--32 ATP                         |||

Code above would be parsed as:

Stage	Direct Products	ATP Yields
Glycolysis	2 ATP
	2 NADH	3–5 ATP
Pyruvaye oxidation	2 NADH	5 ATP
Citric acid cycle	2 ATP
	6 NADH	15 ATP
	2 FADH2	3 ATP
30–32 ATP

Multiline

A backslash at end to join cell contents with the following lines.
This feature is contributed by Lucas-C.

|:     Easy Multiline     :|||
|:------ |:------ |:-------- |
| Apple  | Banana |  Orange  \
| Apple  | Banana |  Orange  \
| Apple  | Banana |  Orange
| Apple  | Banana |  Orange  \
| Apple  | Banana |  Orange  |
| Apple  | Banana |  Orange  |

Code above would be parsed as:

Easy Multiline
Apple Apple Apple	Banana Banana Banana	Orange Orange Orange
Apple Apple	Banana Banana	Orange Orange
Apple	Banana	Orange

Headerless

Table header can be eliminated.

|--|--|--|--|--|--|--|--|
|♜|  |♝|♛|♚|♝|♞|♜|
|  |♟|♟|♟|  |♟|♟|♟|
|♟|  |♞|  |  |  |  |  |
|  |♗|  |  |♟|  |  |  |
|  |  |  |  |♙|  |  |  |
|  |  |  |  |  |♘|  |  |
|♙|♙|♙|♙|  |♙|♙|♙|
|♖|♘|♗|♕|♔|  |  |♖|

Code above would be parsed as:

♜		♝	♛	♚	♝	♞	♜
	♟	♟	♟		♟	♟	♟
♟		♞
	♗			♟
				♙
					♘
♙	♙	♙	♙		♙	♙	♙
♖	♘	♗	♕	♔			♖

Cell Alignment

Markdown table syntax use colons ":" for forcing column alignment.
Therefore, here we also use it for foring cell alignment.

Table cell can be set alignment separately.

|:     Fruits \|\| Food           :|||
|:-------- |:-------- |:------------ |
| Apple    |: Apple  :|    Apple     \
| Banana   |  Banana  |    Banana    \
| Orange   |  Orange  |    Orange    |
|:   Rowspan is 4   :||   How's it?  |
|^^  A. Peach        ||   1. Fine   :|
|^^  B. Orange       ||^^ 2. Bad     |
|^^  C. Banana       ||   It's OK!   |

Code above would be parsed as:

Fruits || Food
Apple Banana Orange	Apple Banana Orange	Apple Banana Orange
Rowspan is 4 A. Peach B. Orange C. Banana
		How's it?
		1. Fine 2. Bad
		It' OK!

2. MathJax Usage

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers.

Some of the main features of MathJax include:

• High-quality display of LaTeX, MathML, and AsciiMath notation in HTML pages
• Supported in most browsers with no plug-ins, extra fonts, or special setup for the reader
• Easy for authors, flexible for publishers, extensible for developers
• Supports math accessibility, cut-and-paste interoperability, and other advanced functionality
• Powerful API for integration with other web applications

Put your math expression within \$...\$

$ a * b = c ^ b $

$ 2^{\frac{n-1}{3}} $

$ \int\_a^b f(x)\,dx. $

3. PlantUML Usage

PlantUML is a component that allows to quickly write:

• sequence diagram,
• use case diagram,
• class diagram,
• activity diagram,
• component diagram,
• state diagram
• object diagram

There are two ways to create a diagram in your Jekyll blog page:

@startuml
Bob -> Alice : hello
@enduml

or

``` plantuml
Bob -> Alice : hello world
```

Credits

• Jekyll - A blog-aware static site generator in Ruby.
• MultiMarkdown - Lightweight markup processor to produce HTML, LaTeX, and more.
• markdown-it-multimd-table - Multimarkdown table syntax plugin for markdown-it markdown parser.

Contributing

Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.

You can start by opening an issue describing the problem that you're looking to resolve and we'll go from there.

License

This software is licensed under the MIT license © JeffreyTse.