Repository: marp-team/marp Branch: main Commit: be6eea91a8bc Files: 85 Total size: 220.9 KB Directory structure: gitextract_8zf9058k/ ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github/ │ ├── dependabot.yml │ └── workflows/ │ └── test.yml ├── .gitignore ├── .nvmrc ├── .prettierignore ├── LICENSE ├── README.md ├── netlify.toml ├── package.json ├── tsconfig.json └── website/ ├── .eslintrc.js ├── assets.d.ts ├── babel.config.js ├── blog/ │ ├── 202205-ecosystem-update.md │ ├── how-to-make-custom-transition.md │ ├── marp-for-vs-code-v1.md │ ├── marpit-v2-marp-core-v2-and-marp-cli-v1.md │ ├── re-creation-of-marp-website.md │ └── the-story-of-marp-next.md ├── components/ │ ├── Button.tsx │ ├── CodeBlock.tsx │ ├── Footer.tsx │ ├── Header.tsx │ ├── Layout.tsx │ ├── Marp.tsx │ ├── ScrollToTop.tsx │ ├── Title.tsx │ ├── Typography.tsx │ ├── blog/ │ │ └── BlogHeader.tsx │ ├── docs/ │ │ ├── Breadcrumb.tsx │ │ ├── Layout.tsx │ │ ├── Navigation.tsx │ │ └── layouts/ │ │ ├── Desktop.tsx │ │ └── Mobile.tsx │ ├── markdown/ │ │ ├── Anchor.tsx │ │ ├── Heading.tsx │ │ ├── Image.tsx │ │ └── Pre.tsx │ └── top/ │ ├── Description.tsx │ ├── Features.tsx │ ├── GetStarted.tsx │ └── Hero.tsx ├── css/ │ ├── index.css │ └── plugin-rem.js ├── docs/ │ ├── guide/ │ │ ├── directives.md │ │ ├── fitting-header.md │ │ ├── fragmented-list.md │ │ ├── heading-divider.md │ │ ├── how-to-write-slides.md │ │ ├── image-syntax.md │ │ ├── math-typesetting.md │ │ └── theme.md │ ├── introduction/ │ │ ├── install.md │ │ └── whats-marp.md │ ├── manifest.yaml │ └── tools/ │ ├── marp-cli.md │ └── marp-for-vs-code.md ├── global.d.ts ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages/ │ ├── 404.tsx │ ├── _app.tsx │ ├── _document.tsx │ ├── blog/ │ │ └── [slug].tsx │ ├── blog.tsx │ ├── docs/ │ │ └── [[...slug]].tsx │ └── index.tsx ├── postcss.config.js ├── public/ │ └── blog/ │ └── .gitignore ├── tailwind.config.js ├── tsconfig.json └── utils/ ├── date.ts ├── hooks/ │ └── useFontFace.tsx ├── markdown/ │ ├── index.tsx │ ├── parse/ │ │ ├── image-paragraph-to-figure.ts │ │ ├── index.ts │ │ └── marp-code-block.ts │ └── renderer/ │ ├── index.ts │ └── sanitize.ts ├── title.ts └── url.ts ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ root = true [*] charset = utf-8 end_of_line = lf indent_size = 2 indent_style = space insert_final_newline = true trim_trailing_whitespace = true ================================================ FILE: .eslintignore ================================================ .next coverage lib node_modules out ================================================ FILE: .eslintrc.js ================================================ const path = require('path') const { workspaces } = require('./package.json') module.exports = { root: true, env: { browser: true, node: true, es6: true, }, extends: ['eslint:recommended', 'plugin:import/recommended', 'prettier'], rules: { // eslint-plugin-import cannot parse exports field in package.json. // https://github.com/import-js/eslint-plugin-import/issues/1810 'import/no-unresolved': ['error', { ignore: ['^swiper'] }], 'import/order': ['error', { alphabetize: { order: 'asc' } }], }, overrides: [ { files: ['**/*.ts', '**/*.tsx'], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], extends: [ 'plugin:@typescript-eslint/recommended', 'plugin:import/typescript', 'prettier', ], rules: { '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off', }, settings: { 'import/resolver': { typescript: { project: ['', ...workspaces].map((dir) => path.join(dir, 'tsconfig.json') ), }, }, }, }, ], } ================================================ FILE: .github/dependabot.yml ================================================ version: 2 updates: - package-ecosystem: npm directory: '/' reviewers: - 'marp-team/maintainers' schedule: interval: daily allow: - dependency-name: '@marp-team/*' versioning-strategy: increase - package-ecosystem: github-actions directory: '/' reviewers: - 'marp-team/maintainers' schedule: interval: weekly # versioning-strategy: increase-if-necessary open-pull-requests-limit: 0 # Dependabot does not allow relaxed versioning :( ================================================ FILE: .github/workflows/test.yml ================================================ name: Test on: - pull_request - push env: CACHE_PREFIX: v1 YARN_VERSION: '^1.22.4' jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version-file: '.nvmrc' - name: Install yarn id: yarn run: | cd $HOME && yarn policies set-version $YARN_VERSION echo "::set-output name=cache_dir::$(yarn cache dir)" - uses: actions/cache@v3 with: path: ${{ steps.yarn.outputs.cache_dir }} key: yarn_cache-${{ env.CACHE_PREFIX }}-${{ hashFiles('**/yarn.lock') }} restore-keys: yarn_cache-${{ env.CACHE_PREFIX }}- - run: yarn install - run: yarn audit - name: Prettier formatting run: yarn check:format - name: ESLint run: yarn lint:js - name: TypeScript type checking run: yarn check:ts ================================================ FILE: .gitignore ================================================ # Created by https://www.toptal.com/developers/gitignore/api/vim,node,linux,emacs,macos,windows,intellij,sublimetext,visualstudiocode # Edit at https://www.toptal.com/developers/gitignore?templates=vim,node,linux,emacs,macos,windows,intellij,sublimetext,visualstudiocode ### Emacs ### # -*- mode: gitignore; -*- *~ \#*\# /.emacs.desktop /.emacs.desktop.lock *.elc auto-save-list tramp .\#* # Org-mode .org-id-locations *_archive # flymake-mode *_flymake.* # eshell files /eshell/history /eshell/lastdir # elpa packages /elpa/ # reftex files *.rel # AUCTeX auto folder /auto/ # cask packages .cask/ dist/ # Flycheck flycheck_*.el # server auth directory /server/ # projectiles files .projectile # directory configuration .dir-locals.el # network security /network-security.data ### Intellij ### # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 # User-specific stuff .idea/**/workspace.xml .idea/**/tasks.xml .idea/**/usage.statistics.xml .idea/**/dictionaries .idea/**/shelf # AWS User-specific .idea/**/aws.xml # Generated files .idea/**/contentModel.xml # Sensitive or high-churn files .idea/**/dataSources/ .idea/**/dataSources.ids .idea/**/dataSources.local.xml .idea/**/sqlDataSources.xml .idea/**/dynamic.xml .idea/**/uiDesigner.xml .idea/**/dbnavigator.xml # Gradle .idea/**/gradle.xml .idea/**/libraries # Gradle and Maven with auto-import # When using Gradle or Maven with auto-import, you should exclude module files, # since they will be recreated, and may cause churn. Uncomment if using # auto-import. # .idea/artifacts # .idea/compiler.xml # .idea/jarRepositories.xml # .idea/modules.xml # .idea/*.iml # .idea/modules # *.iml # *.ipr # CMake cmake-build-*/ # Mongo Explorer plugin .idea/**/mongoSettings.xml # File-based project format *.iws # IntelliJ out/ # mpeltonen/sbt-idea plugin .idea_modules/ # JIRA plugin atlassian-ide-plugin.xml # Cursive Clojure plugin .idea/replstate.xml # SonarLint plugin .idea/sonarlint/ # Crashlytics plugin (for Android Studio and IntelliJ) com_crashlytics_export_strings.xml crashlytics.properties crashlytics-build.properties fabric.properties # Editor-based Rest Client .idea/httpRequests # Android studio 3.1+ serialized cache file .idea/caches/build_file_checksums.ser ### Intellij Patch ### # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 # *.iml # modules.xml # .idea/misc.xml # *.ipr # Sonarlint plugin # https://plugins.jetbrains.com/plugin/7973-sonarlint .idea/**/sonarlint/ # SonarQube Plugin # https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin .idea/**/sonarIssues.xml # Markdown Navigator plugin # https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced .idea/**/markdown-navigator.xml .idea/**/markdown-navigator-enh.xml .idea/**/markdown-navigator/ # Cache file creation bug # See https://youtrack.jetbrains.com/issue/JBR-2257 .idea/$CACHE_FILE$ # CodeStream plugin # https://plugins.jetbrains.com/plugin/12206-codestream .idea/codestream.xml # Azure Toolkit for IntelliJ plugin # https://plugins.jetbrains.com/plugin/8053-azure-toolkit-for-intellij .idea/**/azureSettings.xml ### Linux ### # temporary files which can be created if a process still has a handle open of a deleted file .fuse_hidden* # KDE directory preferences .directory # Linux trash folder which might appear on any partition or disk .Trash-* # .nfs files are created when an open file is removed but is still being accessed .nfs* ### macOS ### # General .DS_Store .AppleDouble .LSOverride # Icon must end with two \r Icon # Thumbnails ._* # Files that might appear in the root of a volume .DocumentRevisions-V100 .fseventsd .Spotlight-V100 .TemporaryItems .Trashes .VolumeIcon.icns .com.apple.timemachine.donotpresent # Directories potentially created on remote AFP share .AppleDB .AppleDesktop Network Trash Folder Temporary Items .apdisk ### macOS Patch ### # iCloud generated files *.icloud ### Node ### # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* lerna-debug.log* .pnpm-debug.log* # Diagnostic reports (https://nodejs.org/api/report.html) report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage *.lcov # nyc test coverage .nyc_output # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # Snowpack dependency directory (https://snowpack.dev/) web_modules/ # TypeScript cache *.tsbuildinfo # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Optional stylelint cache .stylelintcache # Microbundle cache .rpt2_cache/ .rts2_cache_cjs/ .rts2_cache_es/ .rts2_cache_umd/ # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn Integrity file .yarn-integrity # dotenv environment variable files .env .env.development.local .env.test.local .env.production.local .env.local # parcel-bundler cache (https://parceljs.org/) .cache .parcel-cache # Next.js build output .next out # Nuxt.js build / generate output .nuxt dist # Gatsby files .cache/ # Comment in the public line in if your project uses Gatsby and not Next.js # https://nextjs.org/blog/next-9-1#public-directory-support # public # vuepress build output .vuepress/dist # vuepress v2.x temp and cache directory .temp # Docusaurus cache and generated files .docusaurus # Serverless directories .serverless/ # FuseBox cache .fusebox/ # DynamoDB Local files .dynamodb/ # TernJS port file .tern-port # Stores VSCode versions used for testing VSCode extensions .vscode-test # yarn v2 .yarn/cache .yarn/unplugged .yarn/build-state.yml .yarn/install-state.gz .pnp.* ### Node Patch ### # Serverless Webpack directories .webpack/ # Optional stylelint cache # SvelteKit build / generate output .svelte-kit ### SublimeText ### # Cache files for Sublime Text *.tmlanguage.cache *.tmPreferences.cache *.stTheme.cache # Workspace files are user-specific *.sublime-workspace # Project files should be checked into the repository, unless a significant # proportion of contributors will probably not be using Sublime Text # *.sublime-project # SFTP configuration file sftp-config.json sftp-config-alt*.json # Package control specific files Package Control.last-run Package Control.ca-list Package Control.ca-bundle Package Control.system-ca-bundle Package Control.cache/ Package Control.ca-certs/ Package Control.merged-ca-bundle Package Control.user-ca-bundle oscrypto-ca-bundle.crt bh_unicode_properties.cache # Sublime-github package stores a github token in this file # https://packagecontrol.io/packages/sublime-github GitHub.sublime-settings ### Vim ### # Swap [._]*.s[a-v][a-z] !*.svg # comment out if you don't need vector files [._]*.sw[a-p] [._]s[a-rt-v][a-z] [._]ss[a-gi-z] [._]sw[a-p] # Session Session.vim Sessionx.vim # Temporary .netrwhist # Auto-generated tag files tags # Persistent undo [._]*.un~ ### VisualStudioCode ### .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json !.vscode/*.code-snippets # Local History for Visual Studio Code .history/ # Built Visual Studio Code Extensions *.vsix ### VisualStudioCode Patch ### # Ignore all local history of files .history .ionide # Support for Project snippet scope .vscode/*.code-snippets # Ignore code-workspaces *.code-workspace ### Windows ### # Windows thumbnail cache files Thumbs.db Thumbs.db:encryptable ehthumbs.db ehthumbs_vista.db # Dump file *.stackdump # Folder config file [Dd]esktop.ini # Recycle Bin used on file shares $RECYCLE.BIN/ # Windows Installer files *.cab *.msi *.msix *.msm *.msp # Windows shortcuts *.lnk # End of https://www.toptal.com/developers/gitignore/api/vim,node,linux,emacs,macos,windows,intellij,sublimetext,visualstudiocode ================================================ FILE: .nvmrc ================================================ 18.18.2 ================================================ FILE: .prettierignore ================================================ .next node_modules out ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2018- Marp team (marp-team@marp.app) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================

Marp Marp

Marp: Markdown Presentation Ecosystem

**Marp** is the ecosystem to write your presentation with plain Markdown.
### [🌐 Website ▶︎](https://marp.app) | [💬 Discussion forum ▶︎](https://github.com/marp-team/marp/discussions) | [😎 Awesome list ▶︎](https://github.com/marp-team/awesome-marp)
## Marp family Our project is spread over many repos in order to focus on a limited scope per repository. This repo (**[marp-team/marp][marp]**) is an entrance to the Marp family, and places [our website](https://marp.app/) in `/website`. ### Framework / Core | Name | Description | Release | | -------------------------: | :------------------------------------------------------------------------------------------ | :-------------------------------------------------------- | | **[Marpit]** | The skinny framework for creating slide deck from Markdown. ([marpit.marp.app]) | [![@marp-team/marpit][badge-marpit]][marpit-npm] | | **[Marp Core][marp-core]** | The core of Marp converter with practical features and [built-in themes][marp-core-themes]. | [![@marp-team/marp-core][badge-marp-core]][marp-core-npm] | ### Apps | Name | Description | Release | | -----------------------: | :----------------------------------------------------------------------------------------------- | :----------------------------------------------------- | | **[Marp CLI][marp-cli]** | [Marp Core][marp-core] / [Marpit]'s CLI interface to convert into HTML, PDF, PPTX, and image(s). | [![@marp-team/marp-cli][badge-marp-cli]][marp-cli-npm] | ### Integrations | Name | Description | Release | | ----------------------------------: | :-------------------------------------------------------------------------------- | :---------------------------------------------------------- | | **[Marp for VS Code][marp-vscode]** | A [VS Code][vscode] extension to preview the slide deck written in Marp Markdown. | [![VS Marketplace][badge-marp-vscode]][marp-vscode-release] |
See outdated/inactive projects...
| Name | Description | Release | | -----------------------: | :--------------------------------------------------------------- | :----------------------------------------------------------- | | [Marp Web][marp-web] | The Web interface of Marp based on [PWA] and [Preact] framework. | [![tech demo][badge-marp-web]][marp-web-site] | | [Marp React][marp-react] | Marp renderer component for [React]. | [![@marp-team/marp-react][badge-marp-react]][marp-react-npm] | | [Marp Vue][marp-vue] | Marp renderer component for [Vue]. | [![@marp-team/marp-vue][badge-marp-vue]][marp-vue-npm] | And there is a gravesite of classic Marp app in https://github.com/yhatt/marp. :ghost: [marp-web]: https://github.com/marp-team/marp-web [marp-react]: https://github.com/marp-team/marp-react [marp-vue]: https://github.com/marp-team/marp-vue [pwa]: https://en.wikipedia.org/wiki/Progressive_Web_Apps [preact]: https://preactjs.com/ [react]: https://reactjs.org/ [vue]: https://vuejs.org/ [marp-web-site]: https://web.marp.app/ [marp-react-npm]: https://www.npmjs.com/package/@marp-team/marp-react [marp-vue-npm]: https://www.npmjs.com/package/@marp-team/marp-vue [badge-marp-web]: https://img.shields.io/badge/%E2%80%8B-tech%20demo-%230288d1.svg?style=flat-square&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAUUlEQVQokWNgGD6AqePif3Sx9B2PMcQwNKFrTN/x+D9ejTBNyBphmnBqRNYE04isCatGdE1MHRf/o2vC0IhNE1PaXPwacWnCqxGfJoI2Dn4AAN0ZrMM1VUFvAAAAAElFTkSuQmCC [badge-marp-react]: https://img.shields.io/npm/v/@marp-team/marp-react.svg?style=flat-square&logo=npm [badge-marp-vue]: https://img.shields.io/npm/v/@marp-team/marp-vue.svg?style=flat-square&logo=npm
[yhatt/marp]: https://github.com/yhatt/marp [marp]: https://github.com/marp-team/marp [marpit]: https://github.com/marp-team/marpit [marp-core]: https://github.com/marp-team/marp-core [marp-core-themes]: https://github.com/marp-team/marp-core/tree/main/themes [marp-cli]: https://github.com/marp-team/marp-cli [marp-vscode]: https://github.com/marp-team/marp-vscode [vscode]: https://code.visualstudio.com/ [marpit.marp.app]: https://marpit.marp.app/ [marpit-npm]: https://www.npmjs.com/package/@marp-team/marpit [marp-core-npm]: https://www.npmjs.com/package/@marp-team/marp-core [marp-cli-npm]: https://www.npmjs.com/package/@marp-team/marp-cli [marp-vscode-release]: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode [badge-marpit]: https://img.shields.io/npm/v/@marp-team/marpit.svg?style=flat-square&logo=npm [badge-marp-core]: https://img.shields.io/npm/v/@marp-team/marp-core.svg?style=flat-square&logo=npm [badge-marp-cli]: https://img.shields.io/npm/v/@marp-team/marp-cli.svg?style=flat-square&logo=npm [badge-marp-vscode]: https://img.shields.io/visual-studio-marketplace/v/marp-team.marp-vscode.svg?style=flat-square&logo=visual-studio-code&label=Marketplace ## Ecosystem Marp ecosystem has a lot of cool stuffs for making awesome presentation. Check out **[the awesome list of Marp](https://github.com/marp-team/awesome-marp)**. 😎 ## Contributing Marp and sub-projects are following the [contributing guideline of marp-team][contributing]. Please read this before starting work in our projects. [contributing]: https://github.com/marp-team/.github/blob/master/CONTRIBUTING.md ## Author Managed by [@marp-team](https://github.com/marp-team). - Yuki Hattori ([@yhatt](https://github.com/yhatt)) ## Sponsors We are supported by them! Thanks for our sponsors! :heart: ### Organization sponsors

@markslides

### Personal sponsors

Personal sponsors

> Do you want to sponsor [the member of Marp team](https://github.com/orgs/marp-team/people)? See [GitHub Sponsors](https://github.com/sponsors) profile(s) from "♥︎ Sponsor" button [at the top of repository](https://github.com/marp-team/marp). ## License [MIT License](LICENSE) ================================================ FILE: netlify.toml ================================================ [build] publish = "website/out" command = "yarn workspace @marp-team/marp-website export" [[headers]] for = "/*" [headers.values] Permissions-Policy = "interest-cohort=()" ================================================ FILE: package.json ================================================ { "name": "@marp-team/marp", "description": "The entrance repository of Markdown presentation ecosystem", "private": true, "license": "MIT", "author": { "name": "Marp team", "url": "https://github.com/marp-team" }, "contributors": [ { "name": "Yuki Hattori", "url": "https://github.com/yhatt" } ], "repository": { "type": "git", "url": "https://github.com/marp-team/marp" }, "workspaces": [ "website" ], "prettier": { "semi": false, "singleQuote": true }, "scripts": { "check:format": "yarn -s format -c", "check:ts": "yarn lage check:ts", "format:write": "yarn -s format --write", "format": "prettier \"**/*.{css,js,jsx,json,md,mdx,scss,ts,tsx,yaml,yml}\"", "lint:js": "eslint --report-unused-disable-directives --cache .", "website": "yarn workspace @marp-team/marp-website dev" }, "devDependencies": { "@tsconfig/recommended": "^1.0.1", "@types/node": "~18.11.18", "@typescript-eslint/eslint-plugin": "^5.47.1", "@typescript-eslint/parser": "^5.47.1", "eslint": "^8.30.0", "eslint-config-prettier": "^8.3.0", "eslint-import-resolver-typescript": "^3.5.2", "eslint-plugin-import": "^2.25.4", "lage": "^1.9.6", "prettier": "^2.8.1", "typescript": "^4.9.4" }, "resolutions": { "json5": "^2.2.2" } } ================================================ FILE: tsconfig.json ================================================ { "extends": "@tsconfig/recommended/tsconfig.json", "compilerOptions": { "lib": ["es2015", "dom"], "noImplicitAny": false, "resolveJsonModule": true, "strict": true } } ================================================ FILE: website/.eslintrc.js ================================================ const path = require('path') module.exports = { extends: ['next', 'prettier'], rules: { '@next/next/no-html-link-for-pages': [ 'error', path.join(__dirname, 'pages'), ], // Marp website is completely static. Automatic Image Optimization by Next.js requires a server for on-demand conversion. '@next/next/no-img-element': 'off', }, } ================================================ FILE: website/assets.d.ts ================================================ declare module '*.yaml' { const yaml: any export = yaml } ================================================ FILE: website/babel.config.js ================================================ const path = require('path') module.exports = { presets: [ [ 'next/babel', { 'styled-jsx': { plugins: [ [ require.resolve('styled-jsx-plugin-postcss'), { path: path.resolve(__dirname, './postcss.config.js') }, ], ], }, }, ], ], } ================================================ FILE: website/blog/202205-ecosystem-update.md ================================================ --- title: 'Ecosystem update: Marp Core v3 & Slide transitions in CLI v2' date: 2022-05-26 description: Introduce a stable release of Marp Core v3, and updated CLI v2 with an entirely new slide transition experiment. author: Yuki Hattori github: yhatt image: /og-images/202205-ecosystem-update.jpg --- We are so excited to introduce a stable release of **[Marp Core](https://github.com/marp-team/marp-core) v3**, and **[Marp CLI](https://github.com/marp-team/marp-cli) v2** update with [an entirely new slide transition experiment](#slide-transition-experiment). - **[Marp Core v3](#marp-core-v3)**: MathJax rendering as default, updated `default` theme, and new components for auto-scaling. - **[Marp CLI v2](#marp-cli-v2)**: Bundled core v3, and [brand-new slide transition experiment](#slide-transition-experiment) with 33 built-in effects + CSS custom transitions. # Marp Core v3 [We had released Marp Core v3.0.0 as a release candidate in November 2021.](https://github.com/marp-team/marp-core/releases/tag/v3.0.0) For a half year, it had been available in the `next` tag as an opt-in engine of Marp CLI, and had accepted feedback from the community. This month [v3.2.0](https://github.com/marp-team/marp-core/releases/tag/v3.2.0) has become a stable release, and **we are starting work to make v3 core the default in downstream Marp tools gradually.** An updated Marp Core v3 has some major changes, but we also have worked to keep backward compatibility in many existing slides. Most slide authors should not be concerned about regressions as long as your tweaks to the slide theme are not complicated. If you are a theme author, you may have to modify some of the styles. This update includes a brand-new auto scaling component, the change of `default` theme caused by the update of [`github-markdown-css`](https://github.com/sindresorhus/github-markdown-css), and so on. Even so, you should not too worry: We worked to v3 core to reduce friction between Marp's CSS and common CSS, so I think the complex part of our theming system (e.g. styling auto-scaled element) must be easier to understand than v2. ## Notable changes ### Drop support for End-of-Life Node.js First, Marp Core v3 has dropped support for end-of-life Node.js 10. We have supported EoL Node.js v12 yet, but continuous support may not guarantee depending on the support status of dependency modules. We recommend following up on [the active LTS Node.js](https://nodejs.org/). > Check out https://endoflife.date/nodejs to know which version of Node.js is EoL. ### MathJax is a default typesetting library for math [katex]: https://katex.org/ [mathjax]: https://www.mathjax.org/ Marp Core v3 has changed the default library for rendering math, from [KaTeX] to [MathJax]. Marp had used [KaTeX] as a default library for long years for taking better performance. But currently, this opinion has become the past thinking with the advent of MathJax 3. [See this interesting insight.](https://groups.google.com/g/mathjax-users/c/aboJLMb50uQ/m/Y77FexF_AwAJ) And some incompatibilities of KaTeX with Marp Core's auto scaling feature that are hard to fix had given us a headache. ([marp-team/marp-core#159](https://github.com/marp-team/marp-core/issues/159), [marp-team/marp-core#236](https://github.com/marp-team/marp-core/issues/236)) MathJax implementation in Marp Core has more reliable rendering than KaTeX. In addition, it also has more TeX function supports, and no network is required to show. Now a lot of Markdown flavors have adopted MathJax for math typesetting (e.g. [GitHub](https://github.blog/2022-05-19-math-support-in-markdown/)), and we expect Marp Markdown would get higher compatibility in several Markdown services. #### `math` global directive If your Markdown is not yet ready to migrate math typesettings into MathJax, you can continue to use KaTeX as a math typesetting library by setting [`math` global directive](https://github.com/marp-team/marp-core#math-global-directive) as `katex`. ```markdown --- math: katex --- Continue to use KaTeX: $ax^2+bc+c$ ``` We have no plans to remove KaTeX integration for a while. So you can keep rendering math with KaTeX if you're using KaTeX specific syntaxes or met rendering performance issues in MathJax. > For smooth migration of exist slides to v3, Marp for VS Code is [annotating to math use without `math` global directive](https://github.com/marp-team/marp-vscode#diagnostics) since a year ago. ### Renewed auto-scaling component Marp Core has a tiny runtime script to activate element auto-scaling for a code block, math block, and [fitting header `# header`](https://github.com/marp-team/marp-core#fitting-header). v3 has updated auto scaling logic into [Web Components](https://developer.mozilla.org/docs/Web/Web_Components) based, to improve output lucidity and compatibility with some CSS selectors. This update does not change the actual auto-scaling behavior from v2, so most Markdown slide authors should not need to take care of that. But if you have a custom theme that was styled to auto-scaling elements, you should review and modify CSS declarations in your theme to match with v3. Please refer to the pull request **[marp-team/marp-core#263](https://github.com/marp-team/marp-core/pull/263)** for details of auto-scaling components. ### Updated `default` theme To provide a familiar Markdown style to users as default, Marp Core `default` theme is based on [GitHub's Markdown CSS](https://github.com/sindresorhus/github-markdown-css). The latest Marp Core has included the following updates about `default` theme: - Updated color schemes based on the latest [github-markdown-css v5](https://github.com/sindresorhus/github-markdown-css) - Match colors for code highlight with GitHub style - Allow color customization through CSS variables ([See theme docs](https://github.com/marp-team/marp-core/tree/main/themes#custom-color-css-variables)) ````markdown:marp # This is a new `default` theme ```markdown # This is a new `default` theme ``` --- # Updated `invert` color scheme based on GitHub dark mode ```markdown ``` ```` ### URL without HTTP(S) scheme does no longer auto-linkify Marp Core up to v2 had detected URL-like strings and converted them to hyperlinks automatically. However, that was too fuzzy and often brought linkify in not intended words, such as "[Amazon.com](https://amazon.com/)" and "[ML.NET](https://dotnet.microsoft.com/apps/machinelearning-ai/ml-dotnet)". But there are no more fuzzy links in v3! Now auto link feature requires the URL string with `https://` or `http://` scheme. Please make a Markdown link `[Amazon.com](https://amazon.com/)` explicitly if you want the hyperlink in previously auto-linked words. # Marp CLI v2 According to the time to become core v3 stable, we also worked on **[a major update of Marp CLI](https://github.com/marp-team/marp-cli/releases/tag/v2.0.0)** to bundle a new core. There are no major changes in the general use of Marp CLI, and I believe your CLI workflow would never break by this update in most cases. So what feature is a "major" update of CLI? [_Perhaps you may have interested in a hidden gem..._ 💎](#slide-transition-experiment) ## Notable changes ### Required Node.js v14 and later The new release of Marp CLI is required **the latest Node.js v14 and later**, because depending modules such as Puppeteer (for PDF/PPTX generation) were dropped support for EoL Node.js versions v12 and older. ### Bundled Marp Core v3 As described earlier, Marp CLI v2 has bundled an updated Marp Core v3.2.0 as a core engine. ```bash $ marp --version @marp-team/marp-cli v2.0.0 (w/ @marp-team/marp-core v3.2.0) ``` ###### Continue to use v2 core in Marp CLI We recommend getting ready for using the updated v3 core, but Marp CLI also can stick to the v2 core by installing `@marp-team/marp-core@^2` to your project individually. ```bash npm i --save-dev @marp-team/marp-cli @marp-team/marp-core@^2 npx marp ./your-markdown.md ``` It's useful when your Markdown slide files are not ready for v3 core. But please keep in mind we would hardly provide more updates to v2 core, and **continuous use may bring a risk of unpatched security issues.** # Slide transitions A really loving part of this CLI update for me is **[a brand-new slide transition in `bespoke` HTML template.](https://github.com/marp-team/marp-cli/issues/447)** We had started testing experimental slide transition effects since [Marp CLI v1.4.0](https://github.com/marp-team/marp-cli/releases/tag/v1.4.0) (Aug 2021). `--bespoke.transition` CLI option had been working well, but not so practical compared to the common presentation tools. As a result of catching up on the new spec of [View Transitions API proposal][view transitions api] in Marp CLI v2, I'm so excited to provide powerful transition features that are in no other Markdown slide tools, such as CSS custom transition effects and morphing animations! [view transitions api]: https://www.w3.org/TR/css-view-transitions-1/ > The slide transitions feature has made stable in v2.4.0. You can dive into all about of transitions at [the documentation of Marp CLI transitions][transition-docs]. [transition-docs]: https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md ## Quick look ![Marp CLI transition showcase poster=/assets/202205-ecosystem-update/transition-showcase-poster.jpg controls](https://user-images.githubusercontent.com/3993388/169697466-283dd2f2-b6e5-4b33-86d4-b10cc0a6c3e9.mp4) - **[33 built-in transitions](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#built-in-transitions)**: Marp CLI provides a lot of transition effects out of the box. - **[Define custom transitions via CSS](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#custom-transitions)**: Markdown author and theme designer can define the custom transition through `@keyframes` declaration in CSS. - **[Morphing animations](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#morphing-animations)**: [`view-transition-name` CSS property](https://www.w3.org/TR/css-view-transitions-1/#view-transition-name-prop) supplied by View Transition API helps to make morphing animation while transition. ## Usage The slide transitions in HTML output can opt in and out through `--bespoke.transition` CLI option. _It is only working in the browser that supports [View Transitions API], such as Chrome/Chromium 110 and later._ The `--preview` CLI option is helpful see transition effects surely. Try this in Marp CLI v2.4.0+ to open a preview window for the transition showcase: ```bash curl -o ./showcase.md https://gist.githubusercontent.com/yhatt/d9e86ee53eb8816aaf9c996e773b6f82/raw/transition-showcase.md marp --preview ./showcase.md ``` ## Showcase You can see online demo slides about Marp CLI brand new transitions! See them in the browser that supports [View Transitions API]. - **[Marp CLI page transition showcase](https://marp-cli-page-transitions.glitch.me/)**: The showcase of built-in transitions - **[Custom transitions example](https://marp-cli-page-transitions.glitch.me/custom.html)**: Some examples and ideas about custom transitions - **[Transition with morphing animation](https://marp-cli-page-transitions.glitch.me/morph.html)**: An example of morphing animation powered by [View Transitions API]. ## `transition` local directive You can set and change the kind of transition through `transition` local directive. ```markdown --- transition: fade --- Fade transition with 0.5s duration --- Changed the kind of transition to `cover` with 1s duration --- Disabled transition for this slide --- Got back to cover transition ``` Each transition has a default 0.5s duration, but you can also set custom duration by space-separated value such as ``. ## Custom transition The custom transition can define through just a few conventional [`@keyframes` at-rules](https://developer.mozilla.org/docs/Web/CSS/@keyframes) within the inline ` ``` # Try Marp Next! Marp Next just focuses to build the ecosystem for Markdown slide deck with pure open source. We expect to expand Marp productivity together with open source community. We still have stood at the beginning of the brand-new ecosystem. Are you interested to Marp team and our ecosystem? We welcome to start your contribution! See [our contributing guideline](https://github.com/marp-team/.github/blob/master/CONTRIBUTING.md) and get started! > PS. [GitHub Sponsors](https://github.com/sponsors/yhatt) is also good contribution if you want to help my working for open source. ================================================ FILE: website/components/Button.tsx ================================================ import classNames from 'classnames' import { ReactNode } from 'react' export type ButtonProps = { children?: ReactNode color?: 'primary' href?: string outline?: boolean [key: string]: unknown } export const Button = ({ children, className, color, href, outline, ...rest }: ButtonProps) => { const Tag = href ? 'a' : 'button' const attrs = { ...rest, ...(Tag === 'a' ? { href, role: 'button', tabIndex: 0 } : {}), } return ( {children} ) } ================================================ FILE: website/components/CodeBlock.tsx ================================================ /* eslint-disable react/jsx-key */ import classNames from 'classnames' import Highlight, { defaultProps, Language, PrismTheme, } from 'prism-react-renderer' import nightOwlLight from 'prism-react-renderer/themes/nightOwlLight' import { useRef, useState, MouseEvent } from 'react' import { Button } from 'components/Button' const theme: PrismTheme = { plain: { ...nightOwlLight.plain, backgroundColor: '#f5f5f5', }, styles: [ ...nightOwlLight.styles, { types: ['italic'], style: { fontStyle: 'italic' } }, { types: ['important', 'bold'], style: { fontWeight: 'bold' } }, ], } export type CodeBlockProps = { children: string copyButton?: boolean language: Language lineNumber?: boolean [key: string]: unknown } export const CodeBlock = ({ children, className, copyButton, language, lineNumber = false, ...rest }: CodeBlockProps) => { const [copied, setCopied] = useState(false) const copiedTimer = useRef(undefined) return ( <> {({ className: cn, style, tokens, getLineProps, getTokenProps }) => ( 
              
                
    
                  {tokens.map((line, i) => {
                    const lineProps = getLineProps({ line, key: i })

                    return (
                      
  1. 
                        {line.map((token, key) =>
                          token.empty ? (
                            
    
                          ) : (
                            
                          )
                        )}
                      
    2. 
                    )
                  })}
{copyButton && (
)}
)} ) } ================================================ FILE: website/components/Footer.tsx ================================================ import { ScrollToTop } from 'components/ScrollToTop' export const Footer = () => ( ) ================================================ FILE: website/components/Header.tsx ================================================ import classNames from 'classnames' import Link from 'next/link' import MarpLogo from 'public/assets/marp-logo.svg' const handleMouseUp = (e: React.MouseEvent) => e.currentTarget.blur() export type ItemSlug = 'docs' | 'blog' export const Header = ({ activeItem }: { activeItem?: ItemSlug }) => ( <>
Marp
) ================================================ FILE: website/components/Layout.tsx ================================================ import Head from 'next/head' import { useRouter } from 'next/router' import { Footer } from 'components/Footer' import { Header, ItemSlug } from 'components/Header' import { generateTitle } from 'utils/title' import { absoluteUrl } from 'utils/url' export type LayoutProps = React.PropsWithChildren<{ activeItem?: ItemSlug canonical?: string description?: string image?: string noIndex?: boolean title?: string | string[] type?: string }> const defaultDescription = 'Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.' export const Layout: React.FC = ({ activeItem, canonical: _canonical, children, description = defaultDescription, image: _image, noIndex, title: _title, type = 'article', }) => { const router = useRouter() const canonical = absoluteUrl(_canonical || router.asPath).href const image = _image || '/assets/og-image.png' const title = typeof _title === 'string' ? _title : generateTitle(_title) return ( <> {title} {description && ( <> )} {canonical && ( <> )} {noIndex && }
{children}