{"id":16570021,"url":"https://github.com/richdom2185/jekyll-fancy-tables","last_synced_at":"2025-03-21T11:33:43.439Z","repository":{"id":138497392,"uuid":"564073506","full_name":"RichDom2185/jekyll-fancy-tables","owner":"RichDom2185","description":"A GitHub Pages-compatible, no-JavaScript fancy tables-generator using extended Markdown syntax.","archived":false,"fork":false,"pushed_at":"2025-03-04T05:48:20.000Z","size":64,"stargazers_count":14,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T01:07:09.199Z","etag":null,"topics":["github-pages","jekyll","jekyll-plugin","markdown"],"latest_commit_sha":null,"homepage":"https://richarddominick.me/jekyll-fancy-tables/","language":"Liquid","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RichDom2185.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-09T23:47:46.000Z","updated_at":"2025-03-14T02:14:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"8a7449ad-ee14-4b5f-a4ee-658edd2dea52","html_url":"https://github.com/RichDom2185/jekyll-fancy-tables","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RichDom2185%2Fjekyll-fancy-tables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RichDom2185%2Fjekyll-fancy-tables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RichDom2185%2Fjekyll-fancy-tables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RichDom2185%2Fjekyll-fancy-tables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RichDom2185","download_url":"https://codeload.github.com/RichDom2185/jekyll-fancy-tables/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244792359,"owners_count":20511124,"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":["github-pages","jekyll","jekyll-plugin","markdown"],"created_at":"2024-10-11T21:16:43.057Z","updated_at":"2025-03-21T11:33:43.161Z","avatar_url":"https://github.com/RichDom2185.png","language":"Liquid","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Jekyll Pure Liquid Fancy Tables\n\n\u003e View the demo [here](https://richdom2185.github.io/jekyll-fancy-tables).\n\nGitHub Pages only allows a specific set of [plugins](https://pages.github.com/versions/) to run, hence, additional plugins like [jeffreytse/jekyll-spaceschip](https://github.com/jeffreytse/jekyll-spaceship) cannot work.\n\nInspired by that plugin, and the approach used in [allejo/jekyll-toc](https://github.com/allejo/jekyll-toc), I wanted to add support for fancy tables in Pure Liquid.\n\nBenefits:\n\n* Fully compatible with GitHub Pages\n* Easily customisable to your needs\n\n## Add it to your site\n\n### Step 1: Copy the required files\n\nCopy the following files to your site's `_includes` folder:\n\n* `fancy-tables.liquid`: The main parser to generate the tables\n* `capturehtml.liquid`: Un-escapes HTML special characters, used to parse HTML tags inside pre-formatted code blocks\n\n### Step 2: Include it in your site\n\nYou can render fancy tables in your Jekyll site using one of two, non-mutually-exclusive ways:\n\n#### As a HTML layout\n\nSimply include it in any of the layouts you want to add support for:\n\n**Recommended:** Reassign the layout's `content` variable. This approach ensures compatibility should you want to include additional features:\n\n```html\n{% capture content %}{% include fancy-tables.liquid html=content %}{% endcapture %}\n\u003c!-- Some other stuff... --\u003e\n{{ content }}\n```\n\n**Alternative:** Replace `{{ content }}` directly:\n\n* Before:\n\n  ```html\n  \u003c!-- Some other stuff... --\u003e\n  {{ content }}\n  ```\n\n* After:\n\n  ```html\n  \u003c!-- Some other stuff... --\u003e\n  {% include fancy-tables.liquid html=content %}\n  ```\n\n#### As an Include Expression\n\n_See [Advanced Usage: Rendering Individual Tables Only](#rendering-individual-tables-only)._\n\n## Usage\n\nSimply wrap your existing table in a fenced code block with the custom language called `table`. Example:\n\n    ```table\n    | Fruits | Vegetables | Meat    |\n    |--------|------------|---------|\n    | Apple  | Potato     | Chicken |\n    ```\n\nThis syntax was chosen for a couple reaons:\n\n* Relatively easy parsing\n* Prevents most formatters from accidentally breaking the table layout due to the non-standard syntax\n\n## Features\n\n_Note: For all examples below, where not specified, the markup is wrapped with `` ```table `` as per the usage section above._\n\n### 1. Headerless Tables\n\nSimply chop off the header line:\n\nBefore:\n\n```text\n| This      | table | looks | quite | ugly    |\n|-----------|-------|-------|-------|---------|\n| Sometimes | you   | don't | want  | headers |\n```\n\nAfter:\n\n```text\n|-----------|-------|-------|-------|---------|\n| Sometimes | you   | don't | want  | headers |\n```\n\nResult:\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"1\" align=\"left\"\u003eSometimes\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"2\" align=\"left\"\u003eyou\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"3\" align=\"left\"\u003edon’t\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"4\" align=\"left\"\u003ewant\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"5\" align=\"left\"\u003eheaders\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### 2. Column Span and Row Span\n\n#### Column Span\n\n* Works in table headers and table body\n* Simply \"break\" the column separator to span multiple columns\n\n  ```text\n  | OMG, I span 3 columns! \\      \\      |\n  |------------------------|------|------|\n  | That's...              | very | nice |\n  ```\n\n* Breaks don't have to be aligned to anything\n\n  ```text\n  | OMG, I span 3 columns! \\\\|\n  |------------|------|------|\n  | That's...  | very | nice |\n  ```\n\n* Non-blank cells will be joined together with a space\n\n  ```text\n  | OMG, I    \\ span \\ 3 columns! |\n  |-----------|------|------------|\n  | That's... | very | nice       |\n  ```\n\nThe above 3 examples give the same result:\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth colspan=\"3\" data-nth-cell=\"1\" align=\"left\"\u003eOMG, I span 3 columns!\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"2\" align=\"left\"\u003eThat’s…\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"3\" align=\"left\"\u003every\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"4\" align=\"left\"\u003enice\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Row Span\n\n* Only works for the table body\n\n* Simply prepend table cells with `^^`\n\n  ```text\n  |------------------------|---------|\n  | Look, I span two rows! | Looks   |\n  | ^^                     | pretty! |\n  ```\n\n  Result:\n\n  \u003ctable\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd colspan=\"1\" rowspan=\"2\" data-nth-cell=\"1\" align=\"left\"\u003eLook, I span two rows!\u003c/td\u003e\n        \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"2\" align=\"left\"\u003eLooks\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"3\" align=\"left\"\u003epretty!\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\n* Non-blank cells will be joined together with a line break\n\n  ```text\n  |---------------|---------|\n  | Look, I span  | Looks   |\n  | ^^ two rows!  | pretty! |\n  ```\n\n  Result:\n\n  \u003ctable\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd colspan=\"1\" rowspan=\"2\" data-nth-cell=\"1\" align=\"left\"\u003eLook, I span \u003cbr\u003etwo rows! \u003c/td\u003e\n        \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"2\" align=\"left\"\u003eLooks\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"3\" align=\"left\"\u003epretty!\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\n### 3. Individual Cell Alignment\n\n* Simply add a section under `` ```alignment `` before closing the code block with `` ``` ``. Specify left, right, or center-aligned using `L`, `R`, or `C` respectively\n\n      ```table\n      | _For padding_ | _For padding_ | _For padding_ |\n      |---------------|---------------|---------------|\n      | left          |    center     |         right |\n      |    center     |         right | left          |\n      |         right | left          |    center     |\n      ```alignment\n      CCC\n      LCR\n      CRL\n      RLC\n      ```\n\n* Whitespace and capitalization do not matter\n\n      ```table\n      | _For padding_ | _For padding_ | _For padding_ |\n      |---------------|---------------|---------------|\n      | left          |    center     |         right |\n      |    center     |         right | left          |\n      |         right | left          |    center     |\n      ```alignment\n      cCClCrCrlrLc\n      ```\n\nThe above 2 examples give the same result:\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth colspan=\"1\" data-nth-cell=\"1\" align=\"center\"\u003e\n        \u003cem\u003eFor padding\u003c/em\u003e\n      \u003c/th\u003e\n      \u003cth colspan=\"1\" data-nth-cell=\"2\" align=\"center\"\u003e\n        \u003cem\u003eFor padding\u003c/em\u003e\n      \u003c/th\u003e\n      \u003cth colspan=\"1\" data-nth-cell=\"3\" align=\"center\"\u003e\n        \u003cem\u003eFor padding\u003c/em\u003e\n      \u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"4\" align=\"left\"\u003eleft\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"5\" align=\"center\"\u003ecenter\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"6\" align=\"right\"\u003eright\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"7\" align=\"center\"\u003ecenter\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"8\" align=\"right\"\u003eright\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"9\" align=\"left\"\u003eleft\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"10\" align=\"right\"\u003eright\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"11\" align=\"left\"\u003eleft\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"12\" align=\"center\"\u003ecenter\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Advanced Usage\n\n### Rendering Individual Tables Only\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eWhy would you use this?\u003c/strong\u003e\u003c/summary\u003e\n\n  This can be useful together with some creative tricks like using [text substitution for lists in markdown tables](https://gist.github.com/RichDom2185/26166ba51cf432b90a0afb04993d0640).\n\n\u003c/details\u003e\n\nIf you only want to render certain tables, the extension also supports rendering directly from markdown. Simply include the following markup in your source file:\n\n    {% capture table %}\n    ```table\n    | The Do-Re-Mi Song              \\\\|\n    |-----|---------------------|------|\n    | Doe | A deer, a female... | Deer |\n    ```alignment\n    c\n    ```\n    {% endcapture %}\n\n    {% include fancy-tables.liquid markdown=table %}\n\nNote the use of the `markdown` argument instead of `html`.\n\nResult:\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth colspan=\"3\" data-nth-cell=\"1\" align=\"center\"\u003eThe Do-Re-Mi Song\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"2\" align=\"left\"\u003eDoe\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"3\" align=\"left\"\u003eA deer, a female…\u003c/td\u003e\n      \u003ctd colspan=\"1\" rowspan=\"1\" data-nth-cell=\"4\" align=\"left\"\u003eDeer\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nIf used together with [the HTML layout](#as-a-html-layout), you will have to wrap the include statement in a `div` element to prevent the markdown preprocessor from parsing it again:\n\n```html\n\u003cdiv markdown=\"0\"\u003e{% include fancy-tables.liquid markdown=table %}\u003c/div\u003e\n```\n\nNote: depending on your Jekyll site configuration, the `markdown=\"0\"` attribute may or may not be needed.\n\n## Others\n\n### Bugs\n\nFeel free to report any bugs in the [issue tracker](https://github.com/RichDom2185/jekyll-fancy-tables/issues).\n\n### Additional styling\n\nKeeping to the spirit of Markdown, in order to not make the syntax too complicated, style-related syntax is limited to table cell alignment only (but you are welcome to request for features in the [issue tracker](https://github.com/RichDom2185/jekyll-fancy-tables/issues)).\n\nHaving said that, the file also provides a `data-nth-cell` HTML attribute for each table cell (1-indexed), so you can style each individual cell using CSS/JS that way.\n\n## Planned additions\n\n* [ ] Default column alignment\n* [ ] Individual cell alignment: ignore all characters, not just whitespace\n* [ ] _??? (suggest a feature [here!](https://github.com/RichDom2185/jekyll-fancy-tables/issues))_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichdom2185%2Fjekyll-fancy-tables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frichdom2185%2Fjekyll-fancy-tables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichdom2185%2Fjekyll-fancy-tables/lists"}