{"id":13614036,"url":"https://github.com/yhatt/marp-cli-example","last_synced_at":"2025-04-09T08:04:09.441Z","repository":{"id":38184098,"uuid":"147486504","full_name":"yhatt/marp-cli-example","owner":"yhatt","description":"The good starter for using Marp via Marp CLI, by the author of Marp","archived":false,"fork":false,"pushed_at":"2024-10-07T12:20:18.000Z","size":1068,"stargazers_count":181,"open_issues_count":1,"forks_count":158,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-13T01:34:27.981Z","etag":null,"topics":["deck","markdown","marp","netlify","presentation","slides","vercel"],"latest_commit_sha":null,"homepage":"https://yhatt.github.io/marp-cli-example","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yhatt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["yhatt"]}},"created_at":"2018-09-05T08:37:32.000Z","updated_at":"2024-10-07T12:20:20.000Z","dependencies_parsed_at":"2023-10-02T17:39:31.670Z","dependency_job_id":"73e86f5d-3852-4ab1-9dac-71ca87fcd8ca","html_url":"https://github.com/yhatt/marp-cli-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhatt%2Fmarp-cli-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhatt%2Fmarp-cli-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhatt%2Fmarp-cli-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhatt%2Fmarp-cli-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yhatt","download_url":"https://codeload.github.com/yhatt/marp-cli-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247999859,"owners_count":21031046,"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":["deck","markdown","marp","netlify","presentation","slides","vercel"],"created_at":"2024-08-01T20:00:56.098Z","updated_at":"2025-04-09T08:04:09.422Z","avatar_url":"https://github.com/yhatt.png","language":"JavaScript","readme":"# Marp CLI example\n\n[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/yhatt/marp-cli-example)\n\n**The good starter example for using [Marp] via [Marp CLI].**\n\n- Write your slide deck by [Marp] Markdown.\n- Manage the content of slides via Git. (Using [GitPitch](https://github.com/gitpitch/gitpitch) style `PITCHME.md`)\n- Host your deck at GitHub, and publish as webpage with [GitHub Pages], [Netlify], and [Vercel].\n- Blazingly fast delivery out of the box. [Acquired all 100% Lighthouse scores!](#lighthouse)\n\n[marp]: https://marp.app/\n[marp cli]: https://github.com/marp-team/marp-cli\n[github pages]: https://pages.github.com/\n[netlify]: https://www.netlify.com/\n[vercel]: https://vercel.com/\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://yhatt.github.io/marp-cli-example\"\u003e\u003cimg src=\"https://yhatt.github.io/marp-cli-example/og-image.jpg\" width=\"500\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## See published slide deck\n\n- \u003cimg src=\"https://icongr.am/octicons/mark-github.svg\" width=\"24\" height=\"24\" valign=\"bottom\" /\u003e **[GitHub Pages]**: https://yhatt.github.io/marp-cli-example\n- \u003cimg src=\"https://icongr.am/simple/netlify.svg?colored\" width=\"24\" height=\"24\" valign=\"bottom\" /\u003e **[Netlify]**: https://yhatt-marp-cli-example.netlify.app/\n- \u003cimg src=\"https://icongr.am/simple/zeit.svg\" width=\"24\" height=\"24\" valign=\"bottom\" /\u003e **[Vercel]**: https://marp-cli-example.yhatt.vercel.app/\n\n### Lighthouse\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/3993388/115988866-7cd7fe00-a5f6-11eb-9e51-7a62da998eca.png\" width=\"615\" alt=\"Acquired all 100% Lighthouse scores\" /\u003e\n\u003c/p\u003e\n\n## Usage\n\nIt's surprisingly easy to start publishing your slide deck!\n\n### \u003cimg src=\"https://icongr.am/octicons/mark-github.svg\" width=\"24\" height=\"24\" valign=\"bottom\" /\u003e [GitHub Pages]\n\nCreate a new _public_ repository based on this repository, from **\"Use this template\"** button!\n\n[![](https://img.shields.io/badge/-Use%20this%20template-brightgreen?style=for-the-badge\u0026logo=github)](https://github.com/yhatt/marp-cli-example/generate)\n\nWe already have [GitHub Actions workflow](.github/workflows/github-pages.yml) to build and deploy automatically when merged to master branch. It's also available to deploy from any branch manually.\n\nTo get started, turn on GitHub Pages in repository's \"**Settings** tab → **Pages**\" [by setting source as \"GitHub Actions\"](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow).\n\n### \u003cimg src=\"https://icongr.am/simple/netlify.svg?colored\" width=\"24\" height=\"24\" valign=\"bottom\" /\u003e [Netlify]\n\nPush **\"Deploy to netlify\"** button. [Netlify] will create your repository based on this example and host website from `master` branch automatically.\n\n[![Deploy to Netlify](./assets/netlify-deploy-button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/yhatt/marp-cli-example)\n\n### \u003cimg src=\"https://icongr.am/simple/zeit.svg\" width=\"24\" height=\"24\" valign=\"bottom\" /\u003e [Vercel]\n\nPush **\"Deploy\"** button. [Vercel] can choose to create your repository based on this example.\n\n[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/yhatt/marp-cli-example)\n\n\u003e :information_source: To enable the auto-generated open graph image in Vercel, you have to turn on [\"Automatically expose System Environment Variables\"](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) in your Vercel project dashboard.\n\n## How to write\n\nFor Marp slide deck features, please see the documentation of [Marpit Markdown](https://marpit.marp.app/markdown), [the features of Marp Core](https://github.com/marp-team/marp-core#features), and the default example in [`PITCHME.md`](https://raw.githubusercontent.com/yhatt/marp-cli-example/master/PITCHME.md) for .\n\nYou have to install [Node.js](https://nodejs.org/) and run `npm i` at first if you want to write slide deck with [Marp CLI].\n\n### Edit deck\n\nJust edit **[`PITCHME.md`](./PITCHME.md)**!\n\n#### Preview deck\n\n**[Marp for VS Code]** extension is the best partner for writing Marp slide deck with live preview.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/master/docs/screenshot.png\" width=\"500\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n**You can try edit and preview on the web now!** Open https://github.dev/yhatt/marp-cli-example/blob/master/PITCHME.md or hit \u003ckbd\u003e.\u003c/kbd\u003e key on this repository, and install [Marp for VS Code] extension.\n\n[marp for vs code]: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode\n\n#### Preview via CLI\n\n```bash\nnpm run start\n```\n\nIt will be opened preview window via installed Google Chrome, and track change of `PITCHME.md`.\n\n### Assets and themes\n\n- `assets` directory can put your assets for using in the deck. (e.g. Image resources)\n- `themes` directory can put [custom theme CSS](https://marpit.marp.app/theme-css). To use in the deck, please change `theme` global directive.\n\n### Build deck via CLI\n\n```bash\nnpm run build\n```\n\nThe built assets will output to `public` folder.\n\n#### Build per assets\n\n```bash\nnpm run deck      # Output static HTML to public/index.html\nnpm run og-image  # Output image for Open Graph to public/og-image.jpg\n```\n\n## LICENSE\n\n[WTFPL](/LICENSE)\n","funding_links":["https://github.com/sponsors/yhatt"],"categories":["Examples"],"sub_categories":["Compatible markdown-it plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhatt%2Fmarp-cli-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyhatt%2Fmarp-cli-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhatt%2Fmarp-cli-example/lists"}