{"id":13613793,"url":"https://github.com/marp-team/marp-vscode","last_synced_at":"2025-05-14T14:07:32.505Z","repository":{"id":34578670,"uuid":"168885746","full_name":"marp-team/marp-vscode","owner":"marp-team","description":"Marp for VS Code: Create slide deck written in Marp Markdown on VS Code","archived":false,"fork":false,"pushed_at":"2025-05-09T23:26:42.000Z","size":13601,"stargazers_count":1727,"open_issues_count":11,"forks_count":94,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-05-10T00:27:28.829Z","etag":null,"topics":["markdown","marp","visual-studio-code","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode","language":"TypeScript","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/marp-team.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"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,"zenodo":null},"funding":{"github":["yhatt"]}},"created_at":"2019-02-02T22:34:32.000Z","updated_at":"2025-05-09T07:08:53.000Z","dependencies_parsed_at":"2023-01-15T07:53:36.518Z","dependency_job_id":"2d5f7d16-ef91-4abb-a9ae-e3ba09d0886c","html_url":"https://github.com/marp-team/marp-vscode","commit_stats":{"total_commits":834,"total_committers":4,"mean_commits":208.5,"dds":0.05755395683453235,"last_synced_commit":"9906b46cbe301c3f5a9d18ae47795ccf958bcb39"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marp-team%2Fmarp-vscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marp-team%2Fmarp-vscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marp-team%2Fmarp-vscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marp-team%2Fmarp-vscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marp-team","download_url":"https://codeload.github.com/marp-team/marp-vscode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254159194,"owners_count":22024558,"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":["markdown","marp","visual-studio-code","vscode","vscode-extension"],"created_at":"2024-08-01T20:00:53.682Z","updated_at":"2025-05-14T14:07:32.487Z","avatar_url":"https://github.com/marp-team.png","language":"TypeScript","funding_links":["https://github.com/sponsors/yhatt"],"categories":["Presentation","TypeScript","vscode-extension","🎉 使い方","Ecosystem","编码与开发工具"],"sub_categories":["4. スライドの編集・確認","Official","编程工具"],"readme":"# Marp for VS Code\n\n[![CircleCI](https://img.shields.io/circleci/project/github/marp-team/marp-vscode/main.svg?style=flat-square\u0026logo=circleci)](https://circleci.com/gh/marp-team/marp-vscode/)\n[![Codecov](https://img.shields.io/codecov/c/github/marp-team/marp-vscode/main.svg?style=flat-square\u0026logo=codecov)](https://codecov.io/gh/marp-team/marp-vscode)\n[![Visual Studio Marketplace](https://img.shields.io/visual-studio-marketplace/v/marp-team.marp-vscode.svg?style=flat-square\u0026logo=visual-studio-code\u0026label=VS%20Marketplace)](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)\n[![Open VSX](https://img.shields.io/open-vsx/v/marp-team/marp-vscode?label=Open%20VSX\u0026style=flat-square)](https://open-vsx.org/extension/marp-team/marp-vscode)\n[![LICENSE](https://img.shields.io/github/license/marp-team/marp-vscode.svg?style=flat-square)](./LICENSE)\n\n**Create slide deck written in [Marp] Markdown on VS Code.**\n\nWe will enhance your VS Code as the slide deck writer. Mark `marp: true`, and write your deck!\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/screenshot.png\" width=\"800\" /\u003e\n\u003c/p\u003e\n\nSee the documentation of [Marpit Markdown](https://marpit.marp.app/markdown) and [the features of Marp Core](https://github.com/marp-team/marp-core#features) about how to write.\n\n\u003e Please refer **[https://marp.app/][marp]** for more details of Marp ecosystem. We have powerful tools for Marp Markdown: [Marpit Framework](https://marpit.marp.app/), [Marp Core](https://github.com/marp-team/marp-core), [CLI tool](https://github.com/marp-team/marp-cli) and so on.\n\n[marp]: https://marp.app/\n\n## Usage\n\nMarp features will be enabled when `marp: true` is written in a front-matter of Markdown document.\n\n```markdown\n---\nmarp: true\n---\n\n# Your slide deck\n\nStart writing!\n```\n\nYou can create a new Marp Markdown document from **\"New File...\"** menu (\u003ckbd\u003eAlt\u003c/kbd\u003e + \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eWin\u003c/kbd\u003e + \u003ckbd\u003eN\u003c/kbd\u003e / \u003ckbd\u003eAlt\u003c/kbd\u003e + \u003ckbd\u003eCmd\u003c/kbd\u003e + \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eN\u003c/kbd\u003e) to start writing a slide deck quickly.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/new-file.gif\" alt=\"Create Marp Markdown\" width=\"500\" /\u003e\n\u003c/p\u003e\n\n`marp: true` also can toggle by opening the quick picker from toolbar icon \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/toolbar-icon.png\" width=\"16\" height=\"16\" /\u003e and selecting **\"Toggle Marp feature for current Markdown\"**. (`markdown.marp.toggleMarpFeature`).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/toggle.gif\" alt=\"Toggle Marp preview\" width=\"600\" /\u003e\n\u003c/p\u003e\n\n## Features\n\n### Preview Marp Markdown\n\nWhile enabled Marp features by `marp: true`, Marp for VS Code can preview your Marp Markdown with the same way as [a built-in Markdown preview](https://code.visualstudio.com/docs/languages/markdown#_markdown-preview).\n\nIn the preview, an active slide is highlighted based on the current position of the editor, as like as the regular Markdown preview. To disable this highlight, you can set `markdown.preview.markEditorSelection` setting to `false`.\n\n\u003e [!NOTE]\n\u003e If you are not familiar with editing Markdown on VS Code, we recommend to learn what you can do in [VS Code documentation](https://code.visualstudio.com/docs/languages/markdown) at first.\n\n### IntelliSense for Marp directives\n\n[Directives](https://marpit.marp.app/directives), the inherited feature from [Marpit framework](https://marpit.marp.app/), is an important syntax to write the deck in Marp.\n\nIf enabled Marp feature by `marp: true`, Marp for VS Code extends [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense) to support auto completion, syntax highlight, hover help, and diagnostics for Marp directives.\n\n#### Auto completion\n\nMarp for VS Code can suggest global/local directives supported by Marp ecosystem. We remember all so you may forget them! 😛\n\nHit \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eSpace\u003c/kbd\u003e within [the front-matter](https://marpit.marp.app/directives?id=front-matter) or [HTML comment](https://marpit.marp.app/directives?id=html-comment) to show the list of directives. You can peek the help of selected directive by hitting \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eSpace\u003c/kbd\u003e again.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/auto-completion.gif\" alt=\"Auto completion\" width=\"400\" /\u003e\n\u003c/p\u003e\n\nSome directives such as `theme` and `paginate` are also supported auto completion for the value.\n\n#### Highlight and hover help\n\nThe key of recognized directives are highlighted in the different color from the around. This visualization may help to find out meaningless definitions.\n\nAnd you can see the help of a defined directive by hovering cursor on the recognized directive.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/highlight-and-hover-help.png\" alt=\"Highlight and hover help\" width=\"426\" /\u003e\n\u003c/p\u003e\n\n#### Diagnostics\n\nMarp for VS Code can detect some basic problems in Marp directives. Diagnostics will help following our recommended way for writing slides.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/diagnostics.png\" alt=\"Diagnostics\" width=\"443\" /\u003e\n\u003c/p\u003e\n\n| Name                                 | Description                                                                                        | [Quick Fix] |\n| :----------------------------------- | :------------------------------------------------------------------------------------------------- | :---------: |\n| `define-math-global-directive`       | Recommend to declare math typesetting library via [`math` global directive][math global directive] |     ✅      |\n| `deprecated-color-setting-shorthand` | Check [obsoleted shorthands for setting slide colors][color setting shorthand]                     |     ✅      |\n| `deprecated-dollar-prefix`           | Check [obsoleted directives prefixed by `$`][dollar-prefix]                                        |     ✅      |\n| `ignored-math-global-directive`      | Report ignored `math` global directive if disabled math by the extension setting                   |             |\n| `overloading-global-directive`       | Find out overloaded global directives                                                              |             |\n| `unknown-size`                       | Notify if the specified [size preset] was not defined in a theme                                   |             |\n| `unknown-theme`                      | Notify a not recognized theme name                                                                 |             |\n\n[quick fix]: https://code.visualstudio.com/docs/editor/refactoring#_code-actions-quick-fixes-and-refactorings\n[dollar-prefix]: https://github.com/marp-team/marpit/issues/182\n[color setting shorthand]: https://github.com/marp-team/marpit/issues/331\n[math global directive]: https://github.com/marp-team/marp-core#math-global-directive\n[size preset]: https://github.com/marp-team/marp-core/tree/main/themes#size-name-width-height\n\n### Export slide deck to HTML, PDF, PPTX, and image 🛡️\n\nWe have integrated [Marp CLI][marp-cli] to export your deck into several formats.\n\nTo export the content of active Markdown editor, open the quick pick from Marp icon on toolbar \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/toolbar-icon.png\" width=\"16\" height=\"16\" /\u003e and select **\"Export slide deck...\"**. (`markdown.marp.export`)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/export.gif\" alt=\"Export slide deck\" width=\"600\" /\u003e\n\u003c/p\u003e\n\nYou can also execute command from the Command Palette (\u003ckbd\u003eF1\u003c/kbd\u003e or \u003ckbd\u003eCtrl/Cmd+Shift+P\u003c/kbd\u003e).\n\n[marp-cli]: https://github.com/marp-team/marp-cli/\n\n#### Supported file types\n\n- **HTML**\n- **PDF**\n- **PPTX** (PowerPoint document)\n- **PNG** (_First slide only)_\n- **JPEG** (_First slide only)_\n\nDefault file type can choose by the `markdown.marp.exportType` setting.\n\n\u003e [!IMPORTANT]\n\u003e Exporting PDF, PPTX, and image formats requires to install any one of [Google Chrome](https://www.google.com/chrome/), [Chromium](https://www.chromium.org/), [Microsoft Edge](https://www.microsoft.com/edge), or [Firefox](https://www.mozilla.org/firefox/). You may control using browser and the custom path for the browser by `markdown.marp.browser` and `markdown.marp.browserPath` settings.\n\n\u003e [!NOTE]\n\u003e A legacy setting `markdown.marp.chromePath` is deprecated since v2. Please use `markdown.marp.browserPath` instead.\n\n#### Integration with GitHub Copilot agent mode\n\nMarp for VS Code also provides the export tool for [GitHub Copilot agent mode](https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode).\n\nBy instructing to export Markdown in the specified file format, Copilot in the agent mode can process the export using preferences in the current workspace.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/copilot-agent.png\" alt=\"Integration with GitHub Copilot agent mode\" width=\"280\" /\u003e\n\u003c/p\u003e\n\n\u003c!--\n\nDeveloper note:\n\nCurrently the export command can be accessible from GitHub Copilot Chat with `#exportMarp`, but this is not intended design. Do not mention to `#exportMarp` in README.\n\nUsers may feel strange to attach the side-effect command like `#exportMarp` as the chat context, so we want to hide this command. However, the current VS Code API does not support splitting contributions for agent's tool and for references in the chat.\n\nhttps://github.com/microsoft/vscode/issues/245129#issuecomment-2767129358\n\n--\u003e\n\n### Use custom theme CSS 🛡️\n\nYou can register and use [custom theme CSS for Marpit](https://marpit.marp.app/theme-css) / [Marp Core](https://github.com/marp-team/marp-core/tree/main/themes#readme) by setting `markdown.marp.themes`, that includes remote URLs, or relative paths to local files in the current workspace.\n\n```javascript\n// Please put `.vscode/settings.json` on your workspace\n{\n  \"markdown.marp.themes\": [\n    \"https://example.com/foo/bar/custom-theme.css\",\n    \"./themes/your-theme.css\"\n  ]\n}\n```\n\nIt's very similar to [a way for using custom styles in ordinary Markdown preview](https://code.visualstudio.com/docs/languages/markdown#_using-your-own-css). The registered theme can use by specifying theme name in [`theme` global directive](https://marpit.marp.app/directives?id=theme).\n\n```css\n/* @theme your-theme */\n\n@import 'default';\n\nsection {\n  background: #fc9;\n}\n```\n\n```markdown\n---\nmarp: true\ntheme: your-theme\n---\n\n# Use your own theme\n```\n\nMarkdown preview will reload updated theme CSS automatically when you edited the registered local CSS file. It's very useful for creating your own theme.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/custom-theme.gif\" alt=\"Use custom theme\" width=\"600\" /\u003e\n\u003c/p\u003e\n\n### Outline extension\n\nWhen Marp Markdown is enabled, you can use the extended [outline view](https://code.visualstudio.com/docs/languages/markdown#_outline-view) like following. They are enabled by default but you may disable by the `markdown.marp.outlineExtension` setting.\n\n#### Outline view for each slide\n\nWe extend the outline view to support slide pages in Marp Markdown.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/outline.png\" alt=\"Outline view for each slide\" width=\"400\" /\u003e\n\u003c/p\u003e\n\n\u003e [!TIP]\n\u003e\n\u003e Please choose `Sort By: Position` from context menu of its panel if you see incorrect slide order.\n\n#### Slide folding in editor\n\nYou can fold the content of slide in editor while editing Marp Markdown.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/fold.gif\" alt=\"Slide folding in editor\" width=\"360\" /\u003e\n\u003c/p\u003e\n\n### Security\n\n#### [Workspace Trust]\n\nSome features that may met malicious are restricted in the untrusted workspace/window. Please read [VS Code's user guide][workspace trust] for details.\n\nFeatures may be restricted are marked by the shield icon 🛡️ in this documentation. Marp for VS Code is available even if the current workspace is not trusted but you can use only a basic Marp preview and IntelliSense.\n\n[workspace trust]: https://code.visualstudio.com/docs/editor/workspace-trust\n\n#### HTML elements in Markdown 🛡️\n\nIn the trusted workspace, if Marp Markdown was included HTML elements, [only selectivity HTML elements by Marp](https://github.com/marp-team/marp-core/blob/main/src/html/allowlist.ts) can render by default. You can control which HTML elements will be rendered by setting the `markdown.marp.html` option,\n\nYou can control which HTML elements will be rendered by setting the `markdown.marp.html` option. You can set it as `all` to allow all HTML elements, but could allow script injection from untrusted Markdown files. Use with caution.\n\nIn the untrusted workspace, HTML elements in Marp Markdown will be always ignored regardless of the selected option in `markdown.marp.html`.\n\n\u003e [!NOTE]\n\u003e A legacy setting `markdown.marp.enableHtml` is deprecated since v2. Please use `markdown.marp.html` instead.\n\n## Experimental settings\n\nSome of settings are marked as experimental. These feature may be unstable and change the spec in the future.\n\n### [`markdown.marp.pptx.editable`](https://github.com/marp-team/marp-vscode/pull/489)\n\nYou can enable the experimental feature to export PPTX with editable contents, based on [Marp CLI's corresponding experimental option](https://github.com/marp-team/marp-cli#experimental-generate-editable-pptx---pptx-editable). This feature requires to install both of the compatible browser and [LibreOffice Impress](https://www.libreoffice.org/).\n\nIf set this setting as `smart`, Marp for VS Code will try to export into editable PPTX first, and then fallback to the regular PPTX export (non-editable) if failed.\n\n### [`markdown.marp.strictPathResolutionDuringExport`](https://github.com/marp-team/marp-vscode/pull/367)\n\nThis experimental setting is useful to improve the export result compatibility with VS Code preview. If enabled, the export command will try to resolve relative paths in Markdown from VS Code workspace that a Markdown file belongs.\n\nIf disabled, or the Markdown does not belong to any workspace, the export command will resolve paths based on the local file system. This behavior is same as [Marp CLI](https://github.com/marp-team/marp-cli).\n\n## Web extension\n\nYou can use Marp extension in VS Code for the Web environment like [vscode.dev](https://vscode.dev) and [github.dev](https://github.dev). Try opening https://github.dev/marp-team/marp-vscode/blob/main/docs/example.md, with an environment that has installed Marp extension.\n\nThe web extension has some limitations:\n\n- _Export command cannot use_ because it is depending on Marp CLI that is not designed for Web. Please use VS Code that is installed to your local environment, or use either [VS Code Server](https://code.visualstudio.com/docs/remote/vscode-server) or [GitHub Codespaces](https://github.com/features/codespaces) if you wanted an environment working on Web.\n\n## Contributing\n\nAre you interested in contributing? Please see [CONTRIBUTING.md](.github/CONTRIBUTING.md) and [the common contributing guideline for Marp team](https://github.com/marp-team/.github/blob/master/CONTRIBUTING.md).\n\n## Author\n\nManaged by [@marp-team](https://github.com/marp-team).\n\n- \u003cimg src=\"https://github.com/yhatt.png\" width=\"16\" height=\"16\"/\u003e Yuki Hattori ([@yhatt](https://github.com/yhatt))\n\n## License\n\nThis extension releases under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarp-team%2Fmarp-vscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarp-team%2Fmarp-vscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarp-team%2Fmarp-vscode/lists"}