{"id":13452097,"url":"https://github.com/pomber/code-surfer","last_synced_at":"2025-05-13T23:05:10.491Z","repository":{"id":37743250,"uuid":"145261191","full_name":"pomber/code-surfer","owner":"pomber","description":"Rad code slides \u003c🏄/\u003e","archived":false,"fork":false,"pushed_at":"2023-05-02T13:28:44.000Z","size":9819,"stargazers_count":6373,"open_issues_count":43,"forks_count":175,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-05-08T16:36:34.587Z","etag":null,"topics":["code","deck","keynote","markdown","mdx","mdx-deck","presentation","react","slides","syntax","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://codesurfer.pomb.us/","language":"JavaScript","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/pomber.png","metadata":{"files":{"readme":"readme-zh.md","changelog":null,"contributing":"contributing.md","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},"funding":{"open_collective":"code-surfer","custom":"https://www.paypal.me/pomber","github":["pomber"]}},"created_at":"2018-08-19T00:16:54.000Z","updated_at":"2025-04-30T02:32:21.000Z","dependencies_parsed_at":"2022-08-24T16:21:59.900Z","dependency_job_id":"3f4079dd-b0d0-44bf-840e-a7e9ce685d0f","html_url":"https://github.com/pomber/code-surfer","commit_stats":{"total_commits":308,"total_committers":11,"mean_commits":28.0,"dds":0.0714285714285714,"last_synced_commit":"b97a301edcab8c8ddde26403545b5bc158aeef68"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fcode-surfer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fcode-surfer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fcode-surfer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fcode-surfer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pomber","download_url":"https://codeload.github.com/pomber/code-surfer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254040638,"owners_count":22004585,"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":["code","deck","keynote","markdown","mdx","mdx-deck","presentation","react","slides","syntax","syntax-highlighting"],"created_at":"2024-07-31T07:01:12.773Z","updated_at":"2025-05-13T23:05:10.438Z","avatar_url":"https://github.com/pomber.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\u003cbr/\u003e\n\u003ca href=\"https://codesurfer.pomb.us/demo/\"\u003e\n\u003cimg alt=\"demo\" src=\"https://user-images.githubusercontent.com/1911623/66186294-49bacc00-e658-11e9-8d73-e4e6d8df476b.gif\" width=\"600\" /\u003e\n\u003c/a\u003e\n\u003cbr/\u003e\n\u003c/div\u003e\n\n# Code Surfer\n\n\u003e 在 [support](https://opencollective.com/code-surfer)  上赞助这个项目，保持她的生命力❤️\n\nCode Surfer为 [MDX Deck](https://github.com/jxnblk/mdx-deck) 幻灯片增加代码高亮、代码缩放、代码滚动、代码聚焦、代码变形等功能。\n\n创建并运行一个新的项目:\n\n```bash\nnpm init code-surfer-deck my-deck\ncd my-deck\nnpm start\n```\n\n## 例子\n\n- [强大的GraphQL工作坊](https://advanced-graphql-workshop.netlify.com/) 作者 [Phil Pluckthun](https://twitter.com/_philpl)\n- [React Conf 2018 Hooks Demo](https://github.com/pomber/react-conf-2018-hooks-demo)\n\n## 如何使用 Code Surfer\n\n\u003e 首先了解 [MDX Deck](https://github.com/jxnblk/mdx-deck) 的工作方式可能会有所帮助\n\n\n要使用 Code Surfer，你需要先将其导入，并使用 `\u003cCodeSurfer\u003e` 标签包裹要显示的代码（**需要在代码块之前和之后保留空行**）:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n# Deck Title\n\n---\n\n\u003cCodeSurfer\u003e\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n特性:\n\n- [高亮](#focus)\n- [步骤](#steps)\n- [标题和副标题](#title-and-subtitle)\n- [主题](#themes)\n- [自定义样式](#custom-styles)\n- [多语言支持](#languages)\n- [列](#columns)\n- [导入代码](#import-code)\n- [行号](#line-numbers)\n- [差异](#diffs)\n\n\n\u003e 这是一个 [使用所有功能](https://codesurfer.pomb.us/full/) (及 [mdx 源码](https://raw.githubusercontent.com/pomber/code-surfer/code-surfer-v2/sites/docs/decks/full.mdx))的演示文稿，万一你更喜欢阅读代码而不是文档😀\n\n## 高亮\n\n在代码块第一行中的（设置）语言之后添加 _高亮字符串位置_，以告诉Code Surfer你要高亮的行和列。\n\nCode Surfer将淡出所有未高亮的代码，并在必要时将其缩小以适合幻灯片。\n\n````md\n\u003cCodeSurfer\u003e\n\n```js 1:2,3[8:10]\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n在上面的示例中，`1:2,3[8:10]` 意思是：“行1行2高亮，行3到列8到10高亮”。更多示例：\n\n- `5:10` 第 5,6,7,8,9 行 和第 10 行高亮\n- `1,3:5,7` 第1行，第 3~5 行，第 7 行高亮，\n- `2[5]` 第 2 行第5高亮\n- `2[5:8]` 第 2 行 5~8 列高亮\n- `1,2[1,3:5,7],3` 第1行，第2行，第2行第1列、3~5列、7列高亮\n\n_注意: 在以前的CodeSurfer版本中，我们使用标记代替列。_\n\n## 步骤\n\n添加更多代码块，以向 Code Surfer 幻灯片添加步骤。\n\n````md\n\u003cCodeSurfer\u003e\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js 1\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\nconsole.log(4);\nconsole.log(5);\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n你可以为不同的步骤更改焦点和/或代码，然后 Code Surfer 会在以下步骤之间进行变换：缩放，滚动，淡入，淡出，添加和删除行。\n\n## 标题和副标题\n\n````md\n\u003cCodeSurfer\u003e\n\n```js 1 title=\"Title\" subtitle=\"Look at the first line\"\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js 2 title=\"Title\" subtitle=\"and now the second\"\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n## 主题\n\n[![Code Surfer Themes](https://user-images.githubusercontent.com/1911623/66016573-97df9c00-e4ad-11e9-9095-225d5c9b46a8.png)](https://codesurfer.pomb.us/themes/)\n\n在 [`@code-surfer/themes`](https://github.com/pomber/code-surfer/blob/code-surfer-v2/packs/themes/src/index.ts) 包里面有许多Code Surfer主题。\n\n你可以通过 theme 传递 prop `\u003cCodeSurfer theme={someTheme}\u003e`:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport { nightOwl } from \"@code-surfer/themes\"\n\n\u003cCodeSurfer theme={nightOwl}\u003e\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n或者像设置其他任何[MDX Deck 主题](https://github.com/jxnblk/mdx-deck#theming)一样设置整个项目的主题：\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport { nightOwl } from \"@code-surfer/themes\"\n\nexport const theme = nightOwl\n\n\u003cCodeSurfer\u003e\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n\u003e 以这种方式导出主题还将更改未使用Code Surfer的幻灯片的文本和背景颜色。如果要保留其他mdx主题的颜色，可以将[两个主题组合在一起](https://github.com/jxnblk/mdx-deck/blob/master/docs/theming.md#composing-themes)：`export const themes = [codeSurferTheme, mdxDeckTheme]`\n\n## 自定义样式\n\n你可以编写自己的Code Surfer主题，更改代码，标题和副标题的样式：\n\n\u003e 在主题中使用 [Theme UI](https://theme-ui.com/)\n\n```js\n// custom-theme.js\nexport default {\n  colors: {\n    background: \"#222\",\n    text: \"#ddd\",\n    primary: \"#a66\"\n  },\n  styles: {\n    CodeSurfer: {\n      pre: {\n        color: \"text\",\n        backgroundColor: \"background\"\n      },\n      code: {\n        color: \"text\",\n        backgroundColor: \"background\"\n      },\n      tokens: {\n        \"comment cdata doctype\": {\n          fontStyle: \"italic\"\n        },\n        \"builtin changed keyword punctuation operator tag deleted string attr-value char number inserted\": {\n          color: \"primary\"\n        },\n        \"line-number\": {\n          opacity: 0.8\n        }\n      },\n      title: {\n        backgroundColor: \"background\",\n        color: \"text\"\n      },\n      subtitle: {\n        color: \"#d6deeb\",\n        backgroundColor: \"rgba(10,10,10,0.9)\"\n      },\n      unfocused: {\n        // only the opacity of unfocused code can be changed\n        opacity: 0.1\n      }\n    }\n  }\n};\n```\n\n像其他卡片主题一样使用它:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport customTheme from \"./custom-theme\"\n\n\u003cCodeSurfer theme={customTheme}\u003e\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n## 语言支持\n\nCode Surfer 使用 [Prism](https://prismjs.com/) 解析不同的语言, 因此它支持 [Prism 支持的所有语言](https://prismjs.com/#supported-languages).\n\n开箱即用的支持大多数流行语言，其余的则需要导入它们:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport \"prismjs/components/prism-smalltalk\"\n\n\u003cCodeSurfer\u003e\n\n```smalltalk\nresult := a \u003e b\n    ifTrue:[ 'greater' ]\n    ifFalse:[ 'less or equal' ]\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n## 列\n\n如果需要同时显示多个代码, 请使用 `\u003cCodeSurferColumns\u003e`:\n\n````md\nimport { CodeSurferColumns, Step } from \"code-surfer\"\n\n\u003cCodeSurferColumns\u003e\n\n\u003cStep subtitle=\"First Step\"\u003e\n\n```js\nconsole.log(1);\nconsole.log(2);\n```\n\n```js\nconsole.log(\"a\");\nconsole.log(\"b\");\n```\n\n\u003c/Step\u003e\n\n\u003cStep subtitle=\"Second Step\"\u003e\n\n```js 2\nconsole.log(1);\nconsole.log(2);\n```\n\n```js 2\nconsole.log(\"a\");\nconsole.log(\"b\");\n```\n\n\u003c/Step\u003e\n\n\u003c/CodeSurferColumns\u003e\n````\n\n每个 `\u003cStep\u003e` 有自己的 `title` and `subtitle`.\n\n你可以为各列使用不同的主题: `\u003cCodeSurferColumns themes={[nightOwl, ultramin]}\u003e`. 并更改列的相对大小 `\u003cCodeSurferColumns sizes={[1,3]}\u003e`.\n\n列不仅用于代码，还可以将它们用于任何类型的内容：\n\n````md\nimport { CodeSurferColumns, Step } from \"code-surfer\"\nimport MyComponent from \"./my-component.jsx\"\n\n\u003cCodeSurferColumns\u003e\n\n\u003cStep\u003e\n\n```js\nconsole.log(1);\nconsole.log(2);\n```\n\n# Some Markdown\n\n\u003c/Step\u003e\n\n\u003cStep\u003e\n\n```js 2\nconsole.log(1);\nconsole.log(2);\n```\n\n\u003cMyComponent/\u003e\n\n\u003c/Step\u003e\n\n\u003c/CodeSurferColumns\u003e\n````\n\n## 导入代码文件\n\n你可以从文件中导入代码，而不必在代码块中编写代码：\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n\u003cCodeSurfer\u003e\n\n```js 5:10 file=./my-code.js\n```\n\n```js file=./my-other-code.js\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n## 行号\n\n要显示行号，将`showNumbers`添加到语言标识之后:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n\u003cCodeSurfer\u003e\n\n```js showNumbers\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(4);\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n## 差异\n\n代码块也可以展示差异。 This is particularly useful when using empty diffs for code that doesn't change:\n\n代码块也可以展示差异。 当讲空的diffs用在不变的代码块时候，这特别有用：\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n\u003cCodeSurfer\u003e\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```diff 1 subtitle=\"log 1\"\n\n```\n\n```diff 2 subtitle=\"log 2\"\n\n```\n\n```diff 3 subtitle=\"log 3\"\n\n```\n\n\u003c/CodeSurfer\u003e\n````\n\n## 相关\n\n- [MDX Deck](https://github.com/jxnblk/mdx-deck)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [Prism](https://github.com/PrismJS/prism)\n- [create-code-surfer-deck](https://github.com/pomber/create-code-surfer-deck)\n- [Gatsby Waves](https://github.com/pomber/gatsby-waves)\n\n## 支持 Code Surfer\n\n你可以帮助保持该项目的生命。\n\n### 赞助商\n\n通过成为赞助者来支持该项目。你的徽标将显示在此处，并带有指向你网站的链接。 [[成为赞助商](https://opencollective.com/code-surfer#sponsor)]\n\n\u003ca href=\"https://opencollective.com/code-surfer/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/code-surfer/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\n### 支持者\n\n感谢所有的支持者! 🙏 [[成为支持者](https://opencollective.com/code-surfer#backer)]\n\n\u003ca href=\"https://opencollective.com/code-surfer#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/code-surfer/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n### 贡献者\n\n这个项目的存在要感谢所有贡献者。\n\u003cimg src=\"https://opencollective.com/code-surfer/contributors.svg?width=890\u0026button=false\" /\u003e\n","funding_links":["https://opencollective.com/code-surfer","https://www.paypal.me/pomber","https://github.com/sponsors/pomber"],"categories":["JavaScript","Presentations","文档相关","Source Code Tools","Presentation","工具"],"sub_categories":["Self-hosted","React Components","调试"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpomber%2Fcode-surfer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpomber%2Fcode-surfer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpomber%2Fcode-surfer/lists"}