一个 Jekyll 插件,为表格、MathJax、PlantUML、Mermaid、表情符、视频、音频、YouTube、Vimeo、DailyMotion、SoundCloud、Spotify 等提供强大的支持
一个 Jekyll 插件,为表格、MathJax、PlantUML、Mermaid、表情符、视频、音频、YouTube、Vimeo、DailyMotion、SoundCloud、Spotify 等提供强大的支持
Jekyll Spaceship
Jekyll plugin for Astronauts.
Spaceship is a minimalistic, powerful and extremely customizable Jekyll plugin. It combines everything you may need for convenient work, without unnecessary complications, like a real spaceship.
** Tip:** I hope you enjoy using this plugin. If you like this project, a little star for it is your way make a clear statement: My work is valued. I would appreciate your support! Thank you!
Add jekyll-spaceship plugin in your site's Gemfile, and run bundle install.
# If you have any plugins, put them here!
group :jekyll_plugins do
gem 'jekyll-spaceship'
end
Or you better like to write in one line:
gem 'jekyll-spaceship', group: :jekyll_plugins
Add jekyll-spaceship to the plugins: section in your site's _config.yml.
plugins:
- jekyll-spaceship
** Tip:** Note that GitHub Pages runs in safe mode and only allows a set of whitelisted plugins. To use the gem in GitHub Pages, you need to build locally or use CI (e.g. travis, github workflow) and deploy to your gh-pages branch.
This plugin runs with the following configuration options by default. Alternative settings for these options can be explicitly specified in the configuration file _config.yml.
…
For now, these extended features are provided:
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.
^^ 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
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
Table header can be eliminated.
|--|--|--|--|--|--|--|--|
|♜| |♝|♛|♚|♝|♞|♜|
| |♟|♟|♟| |♟|♟|♟|
|♟| |♞| | | | | |
| |♗| | |♟| | | |
| | | | |♙| | | |
| | | | | |♘| | |
|♙|♙|♙|♙| |♙|♙|♙|
|♖|♘|♗|♕|♔| | |♖|
Code above would be parsed as:
♜
♝ ♛ ♚ ♝ ♞ ♜
♟ ♟ ♟
♟ ♟ ♟
♟
♞
♗
♟
♙
♘
♙ ♙ ♙ ♙
♙ ♙ ♙
♖ ♘ ♗ ♕ ♔
♖
Markdown table syntax use colons ":" for forcing column alignment.
Therefore, here we also use it for forcing 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?
It' OK!
Sometimes we may need some abundant content (e.g., mathjax, image, video) in Markdown table
Therefore, here we also make markown syntax possible inside a cell.
…
Code above would be parsed as:
MathJax || Image
Apple Banana Orange Apple Banana Orange Apple Banana Orange
Rowspan is 4
A. Peach
B. Orange
C. Banana
How's it?
It' OK!
This feature is very useful for custom cell such as using inline style. (e.g., background, color, font)
The idea and syntax comes from the Maruku package.
Following are some examples of attributes definitions (ALDs) and afterwards comes the syntax explanation:
{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}
An ALD line has the following structure:
If there is more than one ALD with the same reference name, the attribute definitions of all the ALDs are processed like they are defined in one ALD.
An inline attribute list (IAL) is used to attach attributes to another element.
Here are some examples for span IALs:
{: #id .cls1 .cls2}
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}
Here is an example for custom table cell with IAL:
…
Code above would be parsed as:
Additionally, here you can learn more details about IALs.
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:
At building stage, the MathJax engine script will be added by automatically checking whether there is a math expression in the page, this feature can help you improve the page performance on loading speed.
Put your math expression within $...$
$ a * b = c ^ b $
$ 2^{\frac{n-1}{3}} $
$ \int\_a^b f(x)\,dx. $
Code above would be parsed as:
PlantUML is a component that allows to quickly write:
There are two ways to create a diagram in your Jekyll blog page:
```plantuml!
Bob -> Alice : hello world
```
or
@startuml
Bob -> Alice : hello
@enduml
Code above would be parsed as:
Mermaid is a Javascript based diagramming and charting tool. It generates diagrams flowcharts and more, using markdown-inspired text for ease and speed.
It allows to quickly write:
There are two ways to create a diagram in your Jekyll blog page:
```mermaid!
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
```
or
@startmermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
@endmermaid
Code above would be parsed as:
How often did you find yourself googling "How to embed a video/audio in markdown?"
While its not possible to embed a video/audio in markdown, the best and easiest way is to extract a frame from the video/audio. To add videos/audios to your markdown files easier I developped this tool for you, and it will parse the video/audio link inside the image block automatically.
For now, these media links parsing are provided:
There are two ways to embed a video/audio in your Jekyll blog page:
Inline-style:
Reference-style:
![][{reference}]
[{reference}]: {media-link}
For configuring media attributes (e.g, width, height), just adding query string to the link as below:
As markdown is not only a lightweight markup language with plain-text-formatting syntax, but also a
暂无开放 Issues，或尚未同步最近议题。