{"id":13593536,"url":"https://github.com/jeffreytse/jekyll-spaceship","last_synced_at":"2025-10-02T16:30:57.719Z","repository":{"id":38205753,"uuid":"227518054","full_name":"jeffreytse/jekyll-spaceship","owner":"jeffreytse","description":"🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, emoji, video, audio, youtube, vimeo, dailymotion, soundcloud, spotify, etc.","archived":false,"fork":false,"pushed_at":"2023-07-19T04:01:12.000Z","size":7601,"stargazers_count":593,"open_issues_count":37,"forks_count":61,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-01T13:37:01.452Z","etag":null,"topics":["awesome","diagram","emoji","hook","html","image","jekyll","jekyll-plugin","katex","latex","markdown","math","mathjax","mermaid","music","plantuml","polyfill","sound","tex","video"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeffreytse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"jeffreytse","patreon":"jeffreytse","open_collective":null,"ko_fi":"jeffreytse","tidelift":null,"community_bridge":null,"liberapay":"jeffreytse","issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-12-12T04:12:21.000Z","updated_at":"2024-04-28T06:14:53.000Z","dependencies_parsed_at":"2022-07-25T02:02:18.325Z","dependency_job_id":null,"html_url":"https://github.com/jeffreytse/jekyll-spaceship","commit_stats":{"total_commits":230,"total_committers":5,"mean_commits":46.0,"dds":"0.017391304347826098","last_synced_commit":"c24aa9652baf6c1f965713165674974cd9119b51"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreytse%2Fjekyll-spaceship","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreytse%2Fjekyll-spaceship/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreytse%2Fjekyll-spaceship/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreytse%2Fjekyll-spaceship/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeffreytse","download_url":"https://codeload.github.com/jeffreytse/jekyll-spaceship/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234833310,"owners_count":18893888,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","diagram","emoji","hook","html","image","jekyll","jekyll-plugin","katex","latex","markdown","math","mathjax","mermaid","music","plantuml","polyfill","sound","tex","video"],"created_at":"2024-08-01T16:01:21.334Z","updated_at":"2025-10-02T16:30:52.666Z","avatar_url":"https://github.com/jeffreytse.png","language":"Ruby","funding_links":["https://github.com/sponsors/jeffreytse","https://patreon.com/jeffreytse","https://ko-fi.com/jeffreytse","https://liberapay.com/jeffreytse"],"categories":["Ruby","Other Lists","Other","Plugins / Extensions"],"sub_categories":["TeX Lists"],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://github.com/jeffreytse/jekyll-spaceship\"\u003e\n    \u003cimg alt=\"spaceship →~ jekyll\" src=\"https://raw.githubusercontent.com/jeffreytse/jekyll-spaceship/master/logos/jekyll-spaceship-logo.png\" width=\"400\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e 🚀 Jekyll Spaceship 🚀 \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\n  \u003ca href=\"https://jekyllrb.com\" target=\"_blank\"\u003e\u003ccode\u003eJekyll\u003c/code\u003e\u003c/a\u003e plugin for Astronauts.\n\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n\n  \u003ca href=\"https://travis-ci.org/jeffreytse/jekyll-spaceship\"\u003e\n    \u003cimg src=\"https://travis-ci.org/jeffreytse/jekyll-spaceship.svg?branch=master\"\n      alt=\"CI Status\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"http://badge.fury.io/rb/jekyll-spaceship\"\u003e\n    \u003cimg src=\"https://badge.fury.io/rb/jekyll-spaceship.svg\"\n      alt=\"Gem Version\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://codeclimate.com/github/jeffreytse/jekyll-spaceship\"\u003e\n    \u003cimg src=\"https://codeclimate.com/github/jeffreytse/jekyll-spaceship/badges/gpa.svg\"\n      alt=\"Code Climate\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://codeclimate.com/github/jeffreytse/jekyll-spaceship/test_coverage\"\u003e\n    \u003cimg src=\"https://api.codeclimate.com/v1/badges/cd56b207f327603662a1/test_coverage\"\n      alt=\"Test Coverage\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/jeffreytse/jekyll-spaceship/blob/master/LICENSE.txt\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-brightgreen.svg\"\n      alt=\"License\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"http://badge.fury.io/rb/jekyll-spaceship\"\u003e\n    \u003cimg src=\"https://img.shields.io/gem/dt/jekyll-spaceship\"\n      alt=\"Download Data\" /\u003e\n  \u003c/a\u003e\n\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\n  \u003ca href=\"https://liberapay.com/jeffreytse\"\u003e\n    \u003cimg src=\"http://img.shields.io/liberapay/goal/jeffreytse.svg?logo=liberapay\"\n      alt=\"Donate (Liberapay)\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://patreon.com/jeffreytse\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/support-patreon-F96854.svg?style=flat-square\"\n      alt=\"Donate (Patreon)\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://ko-fi.com/jeffreytse\"\u003e\n    \u003cimg height=\"20\" src=\"https://www.ko-fi.com/img/githubbutton_sm.svg\"\n      alt=\"Donate (Ko-fi)\" /\u003e\n  \u003c/a\u003e\n\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch4\u003e\n    \u003ca href=\"#installation\"\u003eInstall\u003c/a\u003e |\n    \u003ca href=\"#configuration\"\u003eConfig\u003c/a\u003e |\n    \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e |\n    \u003ca href=\"#credits\"\u003eCredits\u003c/a\u003e |\n    \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n  \u003c/h4\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eBuilt with ❤︎ by\n  \u003ca href=\"https://jeffreytse.net\"\u003ejeffreytse\u003c/a\u003e and\n  \u003ca href=\"https://github.com/jeffreytse/jekyll-spaceship/graphs/contributors\"\u003econtributors \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\nSpaceship is a minimalistic, powerful and extremely customizable [Jekyll](https://jekyllrb.com/) plugin. It combines everything you may need for convenient work, without unnecessary complications, like a real spaceship.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"Jekyll Spaceship Demo\" src=\"https://user-images.githubusercontent.com/9413601/82250463-15451780-997e-11ea-8809-f411586d9508.gif\" /\u003e\n\u003c/p\u003e\n\n**💡 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!_\n\n\n## Table of Contents\n\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Usage](#usage)\n  - [1. Table Usage](#1-table-usage)\n    - [1.1 Rowspan and Colspan](#rowspan-and-colspan)\n    - [1.2 Multiline](#multiline)\n    - [1.3 Headerless](#headerless)\n    - [1.4 Cell Alignment](#cell-alignment)\n    - [1.5 Cell Markdown](#cell-markdown)\n    - [1.6 Cell Inline Attributes](#cell-inline-attributes)\n  - [2. MathJax Usage](#2-mathjax-usage)\n    - [2.1 Performance Optimization](#21-performance-optimization)\n    - [2.2 How to use?](#22-how-to-use)\n  - [3. PlantUML Usage](#3-plantuml-usage)\n  - [4. Mermaid Usage](#4-mermaid-usage)\n  - [5. Media Usage](#5-media-usage)\n    - [5.1 Youtube Usage](#youtube-usage)\n    - [5.2 Vimeo Usage](#vimeo-usage)\n    - [5.3 DailyMotion Usage](#dailymotion-usage)\n    - [5.4 Spotify Usage](#spotify-usage)\n    - [5.4 Spotify Podcast Usage](#spotify-podcast-usage)\n    - [5.5 SoundCloud Usage](#soundcloud-usage)\n    - [5.6 General Video Usage](#general-video-usage)\n    - [5.7 General Audio Usage](#general-audio-usage)\n  - [6. Hybrid HTML with Markdown](#6-hybrid-html-with-markdown)\n  - [7. Markdown Polyfill](#7-markdown-polyfill)\n    - [7.1 Escape Ordered List](#71-escape-ordered-list)\n  - [8. Emoji Usage](#8-emoji-usage)\n    - [8.1 Emoji Customizing](#81-emoji-customizing)\n  - [9. Modifying Element Usage](#9-modifying-element-usage)\n- [Credits](#credits)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Requirements\n\n- Ruby \u003e= 2.3.0\n\n## Installation\n\nAdd jekyll-spaceship plugin in your site's `Gemfile`, and run `bundle install`.\n\n```ruby\n# If you have any plugins, put them here!\ngroup :jekyll_plugins do\n  gem 'jekyll-spaceship'\nend\n```\n\nOr you better like to write in one line:\n\n```ruby\ngem 'jekyll-spaceship', group: :jekyll_plugins\n```\n\nAdd jekyll-spaceship to the `plugins:` section in your site's `_config.yml`.\n\n```yml\nplugins:\n  - jekyll-spaceship\n```\n\n**💡 Tip:** Note that GitHub Pages runs in `safe` mode and only allows [a set of whitelisted plugins](https://pages.github.com/versions/). To use the gem in GitHub Pages, you need to build locally or use CI (e.g. [travis](https://travis-ci.org/), [github workflow](https://help.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow)) and deploy to your `gh-pages` branch.\n\n### Additions for Unlimited GitHub Pages\n\n* Here is a GitHub Action named [jekyll-deploy-action](https://github.com/jeffreytse/jekyll-deploy-action) for Jekyll site deployment conveniently. 👍\n* Here is a [Jekyll site](https://github.com/jeffreytse/jekyll-jeffreytse-blog) using Travis to build and deploy to GitHub Pages for your references.\n\n## Configuration\n\nThis plugin runs with the following configuration options by default. Alternative settings for these options can be explicitly specified in the configuration file `_config.yml`.\n\n```yml\n# Where things are\njekyll-spaceship:\n  # default enabled processors\n  processors:\n    - table-processor\n    - mathjax-processor\n    - plantuml-processor\n    - mermaid-processor\n    - polyfill-processor\n    - media-processor\n    - emoji-processor\n    - element-processor\n  mathjax-processor:\n    src:\n      - https://polyfill.io/v3/polyfill.min.js?features=es6\n      - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js\n    config:\n      tex:\n        inlineMath:\n          - ['$','$']\n          - ['\\(','\\)']\n        displayMath:\n          - ['$$','$$']\n          - ['\\[','\\]']\n      svg:\n        fontCache: 'global'\n    optimize: # optimization on building stage to check and add mathjax scripts\n      enabled: true # value `false` for adding to all pages\n      include: []   # include patterns for math expressions checking (regexp)\n      exclude: []   # exclude patterns for math expressions checking (regexp)\n  plantuml-processor:\n    mode: default  # mode value 'pre-fetch' for fetching image at building stage\n    css:\n      class: plantuml\n    syntax:\n      code: 'plantuml!'\n      custom: ['@startuml', '@enduml']\n    src: http://www.plantuml.com/plantuml/svg/\n  mermaid-processor:\n    mode: default  # mode value 'pre-fetch' for fetching image at building stage\n    css:\n      class: mermaid\n    syntax:\n      code: 'mermaid!'\n      custom: ['@startmermaid', '@endmermaid']\n    config:\n      theme: default\n    src: https://mermaid.ink/svg/\n  media-processor:\n    default:\n      id: 'media-{id}'\n      class: 'media'\n      width: '100%'\n      height: 350\n      frameborder: 0\n      style: 'max-width: 600px; outline: none;'\n      allow: 'encrypted-media; picture-in-picture'\n  emoji-processor:\n    css:\n      class: emoji\n    src: https://github.githubassets.com/images/icons/emoji/\n```\n\n## Usage\n\n### 1. Table Usage\n\n**For now, these extended features are provided:**\n\n- Cells spanning multiple columns\n- Cells spanning multiple rows\n- Cells text align separately\n- Table header not required\n- Grouped table header rows or data rows\n\nNoted 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.\n\n#### Rowspan and Colspan\n\n^^ in a cell indicates it should be merged with the cell above.  \nThis feature is contributed by [pmccloghrylaing](https://github.com/pmccloghrylaing).\n\n```markdown\n|              Stage | Direct Products | ATP Yields |\n| -----------------: | --------------: | ---------: |\n|         Glycolysis |          2 ATP              ||\n| ^^                 |          2 NADH |   3--5 ATP |\n| Pyruvaye oxidation |          2 NADH |      5 ATP |\n|  Citric acid cycle |          2 ATP              ||\n| ^^                 |          6 NADH |     15 ATP |\n| ^^                 |          2 FADH |      3 ATP |\n|                               30--32 ATP        |||\n```\n\nCode above would be parsed as:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth align=\"right\"\u003eStage\u003c/th\u003e\n\u003cth align=\"right\"\u003eDirect Products\u003c/th\u003e\n\u003cth align=\"right\"\u003eATP Yields\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd align=\"right\" rowspan=\"2\"\u003eGlycolysis\u003c/td\u003e\n\u003ctd align=\"right\" colspan=\"2\"\u003e2 ATP\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"right\"\u003e2 NADH\u003c/td\u003e\n\u003ctd align=\"right\"\u003e3–5 ATP\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"right\"\u003ePyruvaye oxidation\u003c/td\u003e\n\u003ctd align=\"right\"\u003e2 NADH\u003c/td\u003e\n\u003ctd align=\"right\"\u003e5 ATP\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"right\" rowspan=\"3\"\u003eCitric acid cycle\u003c/td\u003e\n\u003ctd align=\"right\" colspan=\"2\"\u003e2 ATP\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"right\"\u003e6 NADH\u003c/td\u003e\n\u003ctd align=\"right\"\u003e15 ATP\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"right\"\u003e2 FADH2\u003c/td\u003e\n\u003ctd align=\"right\"\u003e3 ATP\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"right\" colspan=\"3\"\u003e30–32 ATP\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Multiline\n\nA backslash at end to join cell contents with the following lines.  \nThis feature is contributed by [Lucas-C](https://github.com/Lucas-C).\n\n```markdown\n| :    Easy Multiline   : |||\n| :----- | :----- | :------ |\n| Apple  | Banana | Orange  \\\n| Apple  | Banana | Orange  \\\n| Apple  | Banana | Orange\n| Apple  | Banana | Orange  \\\n| Apple  | Banana | Orange  |\n| Apple  | Banana | Orange  |\n```\n\nCode above would be parsed as:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth align=\"center\" colspan=\"3\"\u003eEasy Multiline\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003eApple\u003cbr\u003eApple\u003cbr\u003eApple\u003c/td\u003e\n\u003ctd align=\"left\"\u003eBanana\u003cbr\u003eBanana\u003cbr\u003eBanana\u003c/td\u003e\n\u003ctd align=\"left\"\u003eOrange\u003cbr\u003eOrange\u003cbr\u003eOrange\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003eApple\u003cbr\u003eApple\u003c/td\u003e\n\u003ctd align=\"left\"\u003eBanana\u003cbr\u003eBanana\u003c/td\u003e\n\u003ctd align=\"left\"\u003eOrange\u003cbr\u003eOrange\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003eApple\u003c/td\u003e\n\u003ctd align=\"left\"\u003eBanana\u003c/td\u003e\n\u003ctd align=\"left\"\u003eOrange\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Headerless\n\nTable header can be eliminated.\n\n```markdown\n|--|--|--|--|--|--|--|--|\n|♜| |♝|♛|♚|♝|♞|♜|\n| |♟|♟|♟| |♟|♟|♟|\n|♟| |♞| | | | | |\n| |♗| | |♟| | | |\n| | | | |♙| | | |\n| | | | | |♘| | |\n|♙|♙|♙|♙| |♙|♙|♙|\n|♖|♘|♗|♕|♔| | |♖|\n```\n\nCode above would be parsed as:\n\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e♜\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e♝\u003c/td\u003e\n\u003ctd\u003e♛\u003c/td\u003e\n\u003ctd\u003e♚\u003c/td\u003e\n\u003ctd\u003e♝\u003c/td\u003e\n\u003ctd\u003e♞\u003c/td\u003e\n\u003ctd\u003e♜\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e♟\u003c/td\u003e\n\u003ctd\u003e♟\u003c/td\u003e\n\u003ctd\u003e♟\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e♟\u003c/td\u003e\n\u003ctd\u003e♟\u003c/td\u003e\n\u003ctd\u003e♟\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e♟\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e♞\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e♗\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e♟\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e♙\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e♘\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e♙\u003c/td\u003e\n\u003ctd\u003e♙\u003c/td\u003e\n\u003ctd\u003e♙\u003c/td\u003e\n\u003ctd\u003e♙\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e♙\u003c/td\u003e\n\u003ctd\u003e♙\u003c/td\u003e\n\u003ctd\u003e♙\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e♖\u003c/td\u003e\n\u003ctd\u003e♘\u003c/td\u003e\n\u003ctd\u003e♗\u003c/td\u003e\n\u003ctd\u003e♕\u003c/td\u003e\n\u003ctd\u003e♔\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003ctd\u003e♖\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Cell Alignment\n\nMarkdown table syntax use colons \":\" for forcing column alignment.  \nTherefore, here we also use it for forcing cell alignment.\n\nTable cell can be set alignment separately.\n\n```markdown\n| :        Fruits \\|\\| Food       : |||\n| :--------- | :-------- | :--------  |\n| Apple      | : Apple : | Apple      \\\n| Banana     |   Banana  | Banana     \\\n| Orange     |   Orange  | Orange     |\n| :   Rowspan is 4    : || How's it?  |\n|^^    A. Peach         ||   1. Fine :|\n|^^    B. Orange        ||^^ 2. Bad   |\n|^^    C. Banana        ||  It's OK!  |\n```\n\nCode above would be parsed as:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth align=\"center\" colspan=\"3\"\u003eFruits || Food\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003eApple\u003cbr\u003eBanana\u003cbr\u003eOrange\u003c/td\u003e\n\u003ctd align=\"center\"\u003eApple\u003cbr\u003eBanana\u003cbr\u003eOrange\u003c/td\u003e\n\u003ctd align=\"left\"\u003eApple\u003cbr\u003eBanana\u003cbr\u003eOrange\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" rowspan=\"4\" colspan=\"2\"\u003e\nRowspan is 4\n\u003cbr\u003eA. Peach\n\u003cbr\u003eB. Orange\n\u003cbr\u003eC. Banana\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003eHow's it?\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"right\"\u003e1. Fine\u003cbr\u003e2. Bad\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003eIt' OK!\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Cell Markdown\n\nSometimes we may need some abundant content (e.g., mathjax, image, video) in Markdown table  \nTherefore, here we also make markown syntax possible inside a cell.\n\n```markdown\n| :                   MathJax \\|\\| Image                 : |||\n| :------------ | :-------- | :----------------------------- |\n| Apple         | : Apple : | Apple                          \\\n| Banana        | Banana    | Banana                         \\\n| Orange        | Orange    | Orange                         |\n| :     Rowspan is 4     : || :        How's it?           : |\n| ^^     A. Peach          ||    1. ![example][cell-image]   |\n| ^^     B. Orange         || ^^ 2. $I = \\int \\rho R^{2} dV$ |\n| ^^     C. Banana         || **It's OK!**                   |\n\n[cell-image]: https://jekyllrb.com/img/octojekyll.png \"An exemplary image\"\n```\n\nCode above would be parsed as:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth align=\"center\" colspan=\"3\"\u003eMathJax || Image\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003eApple\u003cbr\u003eBanana\u003cbr\u003eOrange\u003c/td\u003e\n\u003ctd align=\"center\"\u003eApple\u003cbr\u003eBanana\u003cbr\u003eOrange\u003c/td\u003e\n\u003ctd align=\"left\"\u003eApple\u003cbr\u003eBanana\u003cbr\u003eOrange\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" rowspan=\"4\" colspan=\"2\"\u003e\nRowspan is 4\n\u003cbr\u003eA. Peach\n\u003cbr\u003eB. Orange\n\u003cbr\u003eC. Banana\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003eHow's it?\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003e\n\u003col\u003e\n\u003cli\u003e\u003cimg width=\"100\" src=\"http://latex2png.com/pngs/82b913db54a9f303bed7197d11347d74.png\"\u003e\u003c/img\u003e\u003c/li\u003e\n\u003cli\u003e\u003cimg width=\"150\" src=\"https://jekyllrb.com/img/octojekyll.png\" title=\"An exemplary image\"\u003e\u003c/img\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003e\u003cb\u003eIt' OK!\u003c/b\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Cell Inline Attributes\n\nThis feature is very useful for custom cell such as using inline style. (e.g., background, color, font)  \nThe idea and syntax comes from the [Maruku](http://maruku.rubyforge.org/) package.  \n\n[](https://kramdown.gettalong.org/syntax.html#block-ials)\n\nFollowing are some examples of attributes definitions (ALDs) and afterwards comes the syntax explanation:\n\n```markdown\n{:ref-name: #id .cls1 .cls2}\n{:second: ref-name #id-of-other title=\"hallo you\"}\n{:other: ref-name second}\n```\n\nAn ALD line has the following structure:\n\n- a left brace, optionally preceded by up to three spaces,\n- followed by a colon, the id and another colon,\n- followed by attribute definitions (allowed characters are backslash-escaped closing braces or any character except a not escaped closing brace),\n- followed by a closing brace and optional spaces until the end of the line.\n\nIf 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.\n\nAn inline attribute list (IAL) is used to attach attributes to another element.  \nHere are some examples for span IALs:\n\n```markdown\n{: #id .cls1 .cls2} \u003c!-- #id \u003c=\u003e id=\"id\", .cls1 .cls2 \u003c=\u003e class=\"cls1 cls2\" --\u003e\n{: ref-name title=\"hallo you\"}\n{: ref-name class='.cls3' .cls4}\n```\n\nHere is an example for custom table cell with IAL:\n\n```markdown\n{:color-style: style=\"background: black;\"}\n{:color-style: style=\"color: white;\"}\n{:text-style: style=\"font-weight: 800; text-decoration: underline;\"}\n\n|:             Here's an Inline Attribute Lists example                :||||\n| ------- | ------------------ | -------------------- | ------------------ |\n|:       :|:  \u003cdiv style=\"color: red;\"\u003e \u0026lt; Normal HTML Block \u003e \u003c/div\u003e :|||\n| ^^      |   Red    {: .cls style=\"background: orange\" }                |||\n| ^^ IALs |   Green  {: #id style=\"background: green; color: white\" }    |||\n| ^^      |   Blue   {: style=\"background: blue; color: white\" }         |||\n| ^^      |   Black  {: color-style text-style }                         |||\n```\n\nCode above would be parsed as:\n\n\u003cimg width=\"580px\" src=\"https://user-images.githubusercontent.com/9413601/88461592-738afb00-ced7-11ea-9aac-3179023742b0.png\" alt=\"IALs\"\u003e\n\nAdditionally, [here](https://kramdown.gettalong.org/syntax.html#block-ials) you can learn more details about IALs.\n\n### 2. MathJax Usage\n\n[MathJax](http://www.mathjax.org/) is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers.\n\nSome of the main features of MathJax include:\n\n- High-quality display of LaTeX, MathML, and AsciiMath notation in HTML pages\n- Supported in most browsers with no plug-ins, extra fonts, or special\n  setup for the reader\n- Easy for authors, flexible for publishers, extensible for developers\n- Supports math accessibility, cut-and-paste interoperability, and other\n  advanced functionality\n- Powerful API for integration with other web applications\n\n#### 2.1 Performance optimization\n\nAt 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.\n\n#### 2.2 How to use?\n\nPut your math expression within \\$...\\$\n\n```markdown\n$ a * b = c ^ b $\n```\n\n```markdown\n$ 2^{\\frac{n-1}{3}} $\n```\n\n```markdown\n$ \\int\\_a^b f(x)\\,dx. $\n```\n\nCode above would be parsed as:\n\n\u003cimage alt=\"MathJax Expression\" height=\"180\" src=\"https://user-images.githubusercontent.com/9413601/82814245-5a5ed180-9ec9-11ea-9d5b-fba303c627ac.png\"\u003e\u003c/image\u003e\n\n### 3. PlantUML Usage\n\n[PlantUML](https://plantuml.com) is a component that allows to quickly write:\n\n- sequence diagram,\n- use case diagram,\n- class diagram,\n- activity diagram,\n- component diagram,\n- state diagram,\n- object diagram\n\nThere are two ways to create a diagram in your Jekyll blog page:\n\n````\n```plantuml!\nBob -\u003e Alice : hello world\n```\n````\n\nor\n\n```markdown\n@startuml\nBob -\u003e Alice : hello\n@enduml\n```\n\nCode above would be parsed as:\n\n![PlantUML Diagram](https://user-images.githubusercontent.com/9413601/82813883-9180b300-9ec8-11ea-8778-f450e0056938.png)\n\n### 4. Mermaid Usage\n\n[Mermaid](https://mermaid-js.github.io/) is a Javascript based diagramming and charting tool. It generates diagrams flowcharts and more, using markdown-inspired text for ease and speed.\n\nIt allows to quickly write:\n\n- flow chart,\n- pie chart,\n- sequence diagram,\n- class diagram,\n- state diagram,\n- entity relationship diagram,\n- user journey,\n- gantt\n\nThere are two ways to create a diagram in your Jekyll blog page:\n\n````\n```mermaid!\npie title Pets adopted by volunteers\n  \"Dogs\" : 386\n  \"Cats\" : 85\n  \"Rats\" : 35\n```\n````\n\nor\n\n```markdown\n@startmermaid\npie title Pets adopted by volunteers\n  \"Dogs\" : 386\n  \"Cats\" : 85\n  \"Rats\" : 35\n@endmermaid\n```\n\nCode above would be parsed as:\n\n![Mermaid Diagram](https://user-images.githubusercontent.com/9413601/85282355-2e317300-b4be-11ea-9c30-8f9d61540d14.png)\n\n### 5. Media Usage\n\nHow often did you find yourself googling \"**How to embed a video/audio in markdown?**\"\n\nWhile its not possible to embed a video/audio in markdown, the best and easiest\nway is to extract a frame from the video/audio. To add videos/audios to your\nmarkdown files easier I developped this tool for you, and it will parse the\nvideo/audio link inside the image block automatically.\n\n**For now, these media links parsing are provided:**\n\n- Youtube\n- Vimeo\n- DailyMotion\n- Spotify\n- SoundCloud\n- General Video ( mp4 | avi | ogg | ogv | webm | 3gp | flv | mov ... )\n- General Audio ( mp3 | wav | ogg | mid | midi | aac | wma ... )\n\nThere are two ways to embed a video/audio in your Jekyll blog page:\n\nInline-style:\n\n```markdown\n![]({media-link})\n```\n\nReference-style:\n\n```markdown\n![][{reference}]\n\n[{reference}]: {media-link}\n```\n\nFor configuring media attributes (e.g, width, height), just adding query string to\nthe link as below:\n\n```markdown\n![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800\u0026height=500)\n\n![](https://www.dailymotion.com/video/x7tfyq3?width=100%\u0026height=400\u0026autoplay=1)\n```\n\n#### Youtube Usage\n\n```markdown\n![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)\n\n![](//www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800\u0026height=500)\n```\n\n#### Vimeo Usage\n\n```markdown\n![](https://vimeo.com/263856289)\n\n![](https://vimeo.com/263856289?width=500\u0026height=320)\n```\n\n#### DailyMotion Usage\n\n```markdown\n![](https://www.dailymotion.com/video/x7tfyq3)\n\n![](https://dai.ly/x7tgcev?width=100%\u0026height=400)\n```\n\n#### Spotify Usage\n\n```markdown\n![](http://open.spotify.com/track/4Dg5moVCTqxAb7Wr8Dq2T5)\n```\n\n\u003cimage width=\"600\" src=\"https://user-images.githubusercontent.com/9413601/89762618-5d11b000-db23-11ea-81db-35cc3682b234.png\"\u003e\n\n#### Spotify Podcast Usage\n\n```markdown\n![](https://open.spotify.com/episode/31AxcwYdjsFtStds5JVWbT)\n```\n\n\u003cimage width=\"600\" src=\"https://user-images.githubusercontent.com/9413601/133599796-1d213033-8184-4059-9ec2-5415e50c94dc.png\"\u003e\n\n\n#### SoundCloud Usage\n\n```markdown\n![](https://soundcloud.com/aviciiofficial/preview-avicii-vs-lenny)\n```\n\n\u003cimage width=\"600\" src=\"https://user-images.githubusercontent.com/9413601/89762969-1c666680-db24-11ea-97e3-4340f7fac7ac.png\"\u003e\n\n#### General Video Usage\n\n```markdown\n![](//www.html5rocks.com/en/tutorials/video/basics/devstories.webm)\n\n![](//techslides.com/demos/sample-videos/small.ogv?allow=autoplay)\n\n![](//techslides.com/demos/sample-videos/small.mp4?width=400)\n```\n\n#### General Audio Usage\n\n```markdown\n![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3)\n\n![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3?autoplay=1\u0026loop=1)\n```\n\n\u003cimage width=\"300\" src=\"https://user-images.githubusercontent.com/9413601/89762143-68181080-db22-11ea-8467-e8b2a8a96ae5.png\"\u003e\n\n### 6. Hybrid HTML with Markdown\n\nAs markdown is not only a lightweight markup language with plain-text-formatting syntax, but also an easy-to-read and easy-to-write plain text format, so writing a hybrid HTML with markdown is an awesome choice.\n\nIt's easy to write markdown inside HTML:\n\n```html\n\u003cscript type=\"text/markdown\"\u003e\n# Hybrid HTML with Markdown is a not bad choice ^\\_^\n\n## Table Usage\n\n| :        Fruits \\|\\| Food       : |||\n| :--------- | :-------- | :--------  |\n| Apple      | : Apple : | Apple      \\\n| Banana     |   Banana  | Banana     \\\n| Orange     |   Orange  | Orange     |\n| :   Rowspan is 4    : || How's it?  |\n|^^    A. Peach         ||   1. Fine :|\n|^^    B. Orange        ||^^ 2. Bad   |\n|^^    C. Banana        ||  It's OK!  |\n\n## PlantUML Usage\n\n@startuml\nBob -\u003e Alice : hello\n@enduml\n\n## Video Usage\n\n![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)\n\u003c/script\u003e\n```\n\n### 7. Markdown Polyfill\n\nIt allows us to polyfill features for extending markdown syntax.\n\n**For now, these polyfill features are provided:**\n\n- Escape ordered list\n\n#### 7.1 Escape Ordered List\n\nA backslash at begin to escape the ordered list.\n\n```markdown\nNormal:\n\n1. List item Apple.\n3. List item Banana.\n10. List item Cafe.\n\nEscaped:\n\n\\1. List item Apple.\n\\3. List item Banana.\n\\10. List item Cafe.\n```\n\nCode above would be parsed as:\n\n```markdown\nNormal:\n\n1. List item Apple.\n2. List item Banana.\n3. List item Cafe.\n\nEscaped:\n\n1. List item Apple.\n3. List item Banana.\n10. List item Cafe.\n```\n\n### 8. Emoji Usage\nGitHub-flavored emoji images and names would allow emojifying content such as: it's raining :cat:s and :dog:s!\n\nNoted that emoji images are served from the GitHub.com CDN, with a base URL of [https://github.githubassets.com](https://github.githubassets.com), which results in emoji image URLs like [https://github.githubassets.com/images/icons/emoji/unicode/1f604.png](https://github.githubassets.com/images/icons/emoji/unicode/1f604.png).\n\nIn any page or post, use emoji as you would normally, e.g.\n\n```\nI give this plugin two :+1:!\n```\n\n**Code above would be parsed as:**\n\nI give this plugin two :+1:!\n\n#### 8.1 Emoji Customizing\n\nIf you'd like to serve emoji images locally, or use a custom emoji source, you can specify so in your `_config.yml` file:\n\n```yml\njekyll-spaceship:\n  emoji-processor:\n    src: \"/assets/images/emoji\"\n```\n\nSee the [Gemoji](https://github.com/github/gemoji) documentation for generating image files.\n\n### 9. Modifying Element Usage\n\nIt allows us to modify elements via `CSS3 selectors`. Through it you can easily\nmodify the attributes of an element tag, replace the children nodes and so on, \nit's very flexible, but here is example usage for modifying a document:\n\n```yml\n# Here is a comprehensive example\njekyll-spaceship:\n  element-processor:\n    css:\n      - a: '\u003ch1\u003eTest\u003c/h1\u003e'                     # Replace all `a` tags (String Style)\n      - ['a.link1', 'a.link2']:                # Replace all `a.link1`, `a.link2` tags (Hash Style)\n          name: img                            # Replace element tag name\n          props:                               # Replace element properties\n            title: Good image                  # Add a title attribute\n            src: ['(^.*$)', '\\0?a=123']        # Add query string to src attribute by regex pattern\n            style:                             # Add style attribute (Hash Style)\n              color: red\n              font-size: '1.2em'\n          children:                            # Add children to the element\n            -                                  # First empty for adding after the last child node\n            - \"\u003cspan\u003eGoogle\u003c/span\u003e\"            # First child node (String Style)\n            -                                  # Middle empty for wrapping the children nodes\n            - name: span                       # Second child node (Hash Style)\n              props:\n                prop1: \"1\"                     # Custom property1\n                prop2: \"2\"                     # Custom property2\n                prop3: \"3\"                     # Custom property3\n              children:                        # Add nested chidren nodes\n                - \"\u003cspan\u003eJekyll\u003c/span\u003e\"        # First child node (String Style)\n                - name: span                   # Second child node (Hash Style)\n                  props:                       # Add attributes to child node (Hash Style)\n                    prop1: \"a\"\n                    prop2: \"b\"\n                    prop3: \"c\"\n                  children: \"\u003cb\u003eYap!\u003c/b\u003e\"      # Add children nodes (String Style)\n            -                                  # Last empty for adding before the first child node\n      - a.link: '\u003ca href=\"//t.com\"\u003eLink\u003c/a\u003e'   # Replace all `a.link` tags (String Style)\n      - 'h1#title':                            # Replace `h1#title` tags (Hash Style)\n          children: I'm a title!               # Replace inner html to new text\n```\n\n#### Example 1\n\nAutomatically adds a `target=\"_blank\" rel=\"noopener noreferrer\"` attribute to all external links in Jekyll's content.\n\n```yml\njekyll-spaceship:\n  element-processor:\n    css:\n      - a:                                     # Replace all `a` tags\n          props:\n            class: ['(^.*$)', '\\0 ext-link']   # Add `ext-link` to class by regex pattern\n            target: _blank                     # Replace `target` value to `_blank`\n            rel: noopener noreferrer           # Replace `rel` value to `noopener noreferrer`\n```\n\n#### Example 2\n\nAutomatically adds `loading=\"lazy\"` to `img` and `iframe` tags to natively load lazily.\n[Browser support](https://caniuse.com/#feat=loading-lazy-attr) is growing. If a browser does not support the `loading` attribute, it will load the resource just like it would normally.\n\n```yml\njekyll-spaceship:\n  element-processor:\n    css:\n      - a:                                     # Replace all `a` tags\n          props:                               #\n            loading: lazy                      # Replace `loading` value to `lazy`\n```\n\nIn case you want to prevent loading some images/iframes lazily, add\n`loading=\"eager\"` to their tags. This might be useful to prevent flickering of\nimages during navigation (e.g. the site's logo).\n\nSee the following examples to prevent lazy loading.\n\n```yml\njekyll-spaceship:\n  element-processor:\n    css:\n      - a:                                     # Replace all `a` tags\n          props:                               #\n            loading: eager                     # Replace `loading` value to `eager`\n```\n\nThere are three options when using this method to lazy load images. Here are the supported values for the loading attribute:\n\n- auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.\n- lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.\n- eager: Load the resource immediately, regardless of where it’s located on the page.\n\n\n## Credits\n\n- [Jekyll](https://github.com/jekyll/jekyll) - A blog-aware static site generator in Ruby.\n- [MultiMarkdown](https://fletcher.github.io/MultiMarkdown-6) - Lightweight markup processor to produce HTML, LaTeX, and more.\n- [markdown-it-multimd-table](https://github.com/RedBug312/markdown-it-multimd-table) - Multimarkdown table syntax plugin for markdown-it markdown parser.\n- [jmoji](https://github.com/jekyll/jemoji) - GitHub-flavored emoji plugin for Jekyll.\n- [jekyll-target-blank](https://github.com/keithmifsud/jekyll-target-blank) - Automatically opens external links in a new browser for Jekyll Pages, Posts and Docs.\n- [jekyll-loading-lazy](https://github.com/gildesmarais/jekyll-loading-lazy) - Automatically adds loading=\"lazy\" to img and iframe tags to natively load lazily.\n- [mermaid](https://github.com/mermaid-js/mermaid) - Generation of diagram and flowchart from text in a similar manner as markdown.\n\n## Contributing\n\nIssues 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.\n\nYou can start by [opening an issue](https://github.com/jeffreytse/jekyll-spaceship/issues/new) describing the problem that you're looking to resolve and we'll go from there.\n\n## License\n\nThis software is licensed under the [MIT license](https://opensource.org/licenses/mit-license.php) © JeffreyTse.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffreytse%2Fjekyll-spaceship","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffreytse%2Fjekyll-spaceship","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffreytse%2Fjekyll-spaceship/lists"}