{"id":13702298,"url":"https://github.com/nschloe/xhub","last_synced_at":"2025-09-04T07:13:06.827Z","repository":{"id":36964515,"uuid":"457049716","full_name":"nschloe/xhub","owner":"nschloe","description":"Extend GitHub pages with math, graphs etc.","archived":false,"fork":false,"pushed_at":"2025-08-31T10:11:38.000Z","size":915,"stargazers_count":100,"open_issues_count":11,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-31T12:13:14.316Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nschloe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"nschloe","ko-fi":"nschloe"}},"created_at":"2022-02-08T18:12:05.000Z","updated_at":"2025-08-24T23:33:44.000Z","dependencies_parsed_at":"2024-01-05T22:28:36.677Z","dependency_job_id":"c349d987-1947-4075-8a21-2bb002659259","html_url":"https://github.com/nschloe/xhub","commit_stats":{"total_commits":234,"total_committers":5,"mean_commits":46.8,"dds":0.4871794871794872,"last_synced_commit":"4a55a40794faea2dd27d6dfbde3bd6c37dfae635"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nschloe/xhub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nschloe%2Fxhub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nschloe%2Fxhub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nschloe%2Fxhub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nschloe%2Fxhub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nschloe","download_url":"https://codeload.github.com/nschloe/xhub/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nschloe%2Fxhub/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273569573,"owners_count":25129014,"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","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-08-02T21:00:33.473Z","updated_at":"2025-09-04T07:13:06.796Z","avatar_url":"https://github.com/nschloe.png","language":"JavaScript","funding_links":["https://github.com/sponsors/nschloe","nschloe"],"categories":["Engines","Tools"],"sub_categories":["LaTeX formulas on the web","Others"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/nschloe/xhub\"\u003e\u003cimg alt=\"xhub\" src=\"https://raw.githubusercontent.com/nschloe/xhub/main/logo/logo.svg\" width=\"50%\"\u003e\u003c/a\u003e\n  \u003cp align=\"center\"\u003eExtend GitHub pages with support for LaTeX, graphs, etc.\u003c/p\u003e\n\u003c/p\u003e\n\n\u003ca href=\"https://chrome.google.com/webstore/detail/anidddebgkllnnnnjfkmjcaallemhjee\"\u003e\n  \u003cimg height=\"58\" src=\"https://i.imgur.com/K9Yh8G9.png\" alt=\"Chrome Web Store\"\u003e\n\u003c/a\u003e\n\n[![Chrome Web Store version](https://img.shields.io/chrome-web-store/v/anidddebgkllnnnnjfkmjcaallemhjee)](https://chrome.google.com/webstore/detail/xhub/anidddebgkllnnnnjfkmjcaallemhjee)\n[![chrome users](https://img.shields.io/chrome-web-store/users/anidddebgkllnnnnjfkmjcaallemhjee?label=Chrome%20users\u0026logo=google-chrome\u0026logoColor=white\u0026style=flat-square)](https://chrome.google.com/webstore/detail/xhub/anidddebgkllnnnnjfkmjcaallemhjee)\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![xhub](https://img.shields.io/badge/Rendered%20with-xhub-f2eecb?style=flat-square)](https://chrome.google.com/webstore/detail/xhub/anidddebgkllnnnnjfkmjcaallemhjee)\n\nxhub is a browser extension for Google Chrome that lets you use various add-ons\non GitHub READMEs, issues, wikis etc. The add-ons currently are\n\n- [KaTeX](#latex) for LaTeX mathematics\n- [Chart.js](#chartjs) for charts\n- [Plotly](#plotly) for graphing\n- [YouTube](#youtube-embed) for embedded Youtube videos\n\nPlotting diagrams via [Mermaid](#mermaid) is now natively available on GitHub.\n\nSee [below](#latex) or [the\nWiki](https://github.com/nschloe/xhub/wiki/%60%60%60math) for examples.\n\nSimply install the extension from the\n\n- [Chrome Web Store](https://chrome.google.com/webstore/detail/xhub/anidddebgkllnnnnjfkmjcaallemhjee)\n\nand enjoy.\n\n### LaTeX\n\nUse inline and display math like\n\n````markdown\nDisplay math:\n\n```math\ne^{i\\tau} - 1 = 0\n```\n\n```katex\na^2 + b^2 = c^2\n```\n\nand line math `$V + F = E + 2$` or $`\\sin^2(\\alpha) + \\cos^2(\\alpha) = 1`$.\n````\n\ne.g., _Cauchy's Theorem_:\n\nLet $`U`$ be an open subset of the complex plane $`\\mathbb{C}`$, and suppose\nthe closed disk $`D`$ defined as\n\n```katex\nD = \\bigl\\{z:|z-z_{0}|\\leq r\\bigr\\}\n```\n\nis completely contained in `$U$`. Let `$f: U\\to\\mathbb{C}$` be a holomorphic\nfunction, and let `$\\gamma$` be the circle, oriented counterclockwise, forming\nthe boundary of `$D$`. Then for every `$a$` in the interior of `$D$`,\n\n```math\nf(a) = \\frac{1}{2\\pi i} \\oint _{\\gamma}\\frac{f(z)}{z-a} dz.\n```\n\n\u003e **Note**\n\u003e\n\u003e Since May 2022, [GitHub has their own math support in\n\u003e Markdown.](https://github.blog/2022-05-19-math-support-in-markdown/) It's\n\u003e pretty buggy though, as outlined in [this blog\n\u003e post](https://nschloe.github.io/2022/05/20/math-on-github.html). For the time\n\u003e being, xhub will continue to provide math support. Note that, due to GitHub's\n\u003e changes, the old syntax\n\u003e\n\u003e ```\n\u003e $`...`$\n\u003e ```\n\u003e\n\u003e doesn't work reliably anymore.\n\u003e For best results, swap the backtick and the dollar sign to\n\u003e\n\u003e ```\n\u003e `$...$`\n\u003e ```\n\n#### Chart.js\n\nUse `chartjs` language blocks with the chart config as JSON and optionally canvas\nattributes,\n\n````markdown\n```chartjs\n{\n  \"config\": { ... },\n  \"canvas\": { ... }\n}\n```\n````\n\ne.g.,\n\n```chartjs\n{\n  \"config\": {\n    \"type\": \"line\",\n    \"data\": {\n      \"labels\": [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],\n      \"datasets\": [{\n          \"data\": [86,114,106,106,107,111,133,221,783,2478],\n          \"label\": \"Africa\",\n          \"borderColor\": \"#3e95cd\",\n          \"fill\": false\n        }, {\n          \"data\": [282,350,411,502,635,809,947,1402,3700,5267],\n          \"label\": \"Asia\",\n          \"borderColor\": \"#8e5ea2\",\n          \"fill\": false\n        }, {\n          \"data\": [168,170,178,190,203,276,408,547,675,734],\n          \"label\": \"Europe\",\n          \"borderColor\": \"#3cba9f\",\n          \"fill\": false\n        }, {\n          \"data\": [40,20,10,16,24,38,74,167,508,784],\n          \"label\": \"Latin America\",\n          \"borderColor\": \"#e8c3b9\",\n          \"fill\": false\n        }, {\n          \"data\": [6,3,2,2,7,26,82,172,312,433],\n          \"label\": \"North America\",\n          \"borderColor\": \"#c45850\",\n          \"fill\": false\n        }\n      ]\n    },\n    \"options\": {\n      \"title\": {\n        \"display\": true,\n        \"text\": \"World population per region (in millions)\"\n      }\n    }\n  }\n}\n```\n\n#### Plotly\n\nUse `plotly` language blocks with the plot config as JSON\n\n````markdown\n```plotly\n{\n  \"data\": [ ... ],\n  \"layout\": { ... }\n}\n```\n````\n\ne.g.,\n\n```plotly\n{\n  \"data\": [\n    {\n      \"line\": {\"shape\": \"linear\"},\n      \"mode\": \"lines+markers\",\n      \"name\": \"linear\",\n      \"type\": \"scatter\",\n      \"x\": [1, 2, 3, 4, 5],\n      \"y\": [1, 3, 2, 3, 1],\n      \"hoverinfo\": \"name\"\n    },\n    {\n      \"line\": {\"shape\": \"spline\"},\n      \"mode\": \"lines+markers\",\n      \"name\": \"spline\",\n      \"type\": \"scatter\",\n      \"x\": [1, 2, 3, 4, 5],\n      \"y\": [6, 8, 7, 8, 6],\n      \"text\": [\"tweak line smoothness\u003cbr\u003ewith 'smoothing' in line object\"],\n      \"hoverinfo\": \"text+name\"\n    },\n    {\n      \"line\": {\"shape\": \"vhv\"},\n      \"mode\": \"lines+markers\",\n      \"name\": \"vhv\",\n      \"type\": \"scatter\",\n      \"x\": [1, 2, 3, 4, 5],\n      \"y\": [11, 13, 12, 13, 11],\n      \"hoverinfo\": \"name\"\n    },\n    {\n      \"line\": {\"shape\": \"hvh\"},\n      \"mode\": \"lines+markers\",\n      \"name\": \"hvh\",\n      \"type\": \"scatter\",\n      \"x\": [1, 2, 3, 4, 5],\n      \"y\": [16, 18, 17, 18, 16],\n      \"hoverinfo\": \"name\"\n    },\n    {\n      \"line\": {\"shape\": \"vh\"},\n      \"mode\": \"lines+markers\",\n      \"name\": \"vh\",\n      \"type\": \"scatter\",\n      \"x\": [1, 2, 3, 4, 5],\n      \"y\": [21, 23, 22, 23, 21],\n      \"hoverinfo\": \"name\"\n    },\n    {\n      \"line\": {\"shape\": \"hv\"},\n      \"mode\": \"lines+markers\",\n      \"name\": \"hv\",\n      \"type\": \"scatter\",\n      \"x\": [1, 2, 3, 4, 5],\n      \"y\": [26, 28, 27, 28, 26],\n      \"hoverinfo\": \"name\"\n    }\n  ],\n  \"layout\": {\n    \"legend\": {\n      \"y\": 0.5,\n      \"font\": {\"size\": 16},\n      \"traceorder\": \"reversed\"\n    }\n  }\n}\n```\n\n#### Mermaid\n\n[This is now available via GitHub itself.](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/)\n\n#### YouTube embed\n\nHere's an embedded YouTube video:\n\n````markdown\n```youtube-embed\n{\n   \"width\": \"560\",\n   \"height\": \"315\",\n   \"src\": \"https://www.youtube.com/embed/dQw4w9WgXcQ\",\n   \"title\": \"YouTube video player\",\n   \"frameborder\": \"0\",\n   \"allow\": \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n   \"allowfullscreen\": true\n}\n```\n````\n\n```youtube-embed\n{\n   \"width\": \"560\",\n   \"height\": \"315\",\n   \"src\": \"https://www.youtube.com/embed/dQw4w9WgXcQ\",\n   \"title\": \"YouTube video player\",\n   \"frameborder\": \"0\",\n   \"allow\": \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n   \"allowfullscreen\": true\n}\n```\n\n### Badge\n\n[![xhub](https://img.shields.io/badge/Rendered%20with-xhub-f2eecb?style=flat-square)](https://chrome.google.com/webstore/detail/xhub/anidddebgkllnnnnjfkmjcaallemhjee)\n\n```markdown\n[![xhub](https://img.shields.io/badge/Rendered%20with-xhub-f2eecb?style=flat-square)](https://chrome.google.com/webstore/detail/xhub/anidddebgkllnnnnjfkmjcaallemhjee)\n```\n\n### Development\n\n#### Build instructions\n\nTo build the production zip, simply install the dependencies (`npm ci`), then run\n\n```\nnpm run build\n```\n\nor\n\n```\nnpm run watch\n```\n\nThe unpacked development version of the extension will then be in `dist/`. Open Google\nChrome, go to `chrome://extensions` and `Load unpacked` this directory. Reload as\nnecessary.\n\n### More module ideas\n\n- [D3.js](https://d3js.org/)\n  Cannot be configured from a data file, but needs actual (user-provided) JS to be\n  `eval()`d - a no-go for extensions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnschloe%2Fxhub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnschloe%2Fxhub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnschloe%2Fxhub/lists"}