[Tools] Scroll, Zoom, and Highlight code in a mdx-deck slide presentation with Code Surfer <🏄/>
code in and with gt lt tools
2023-09-14 08:59:17 时间
If you have a presentation coming up or you just need to present some documentation, then the Code Surfer React component is a powerful way to Highlight, Zoom, and Scroll snippets of code. This component is particularly designed to work with mdx-deck, which is a MDX-based presentation framework that enables easy slide creation with markdown and React components.
https://github.com/pomber/code-surfer https://github.com/jxnblk/mdx-deck
Install:
npm init deck my-code
It creates a mdx-deck project with dependcies installed.
Run:
npm start
You should be able to see a basic mdx-deck project running.
Install:
npm i -D mdx-deck-code-surfer raw-loader
Modify:
import {CodeSurfer} from "mdx-deck-code-surfer" <CodeSurfer code="console.log('Hello World')" />
Import snippet:
Should also using raw-loader
import {CodeSurfer} from "mdx-deck-code-surfer" <CodeSurfer code={require("raw-loader!./snippets/1.snippet")} />
More example:
import {CodeSurfer} from "mdx-deck-code-surfer" <CodeSurfer code={require("raw-loader!./snippets/2.snippet")} title="Snippet from vusjs" notes="Vuejs + rxjs +Typescript" showNumbers={true} lang="javascript" steps={[ { lines: [6], notes: "Note for the first step" }, { range: [5, 9] }, { ranges: [[4,6], [1, 3]] }, { tokens: { 9: [3, 4] }, notes: "Note for the third step" }, {range: [30,33], notes: "Scroll"} ]} />
相关文章
- C#+EntityFramework编程方式详细之Code First
- db first和code first
- [PHP] find ascii code in string
- VS Code MarkDown即时渲染编写插件
- C++ code:位操作实例(bit operation example)
- Packet Sniffer Code in C using Linux Sockets (BSD)
- Code a network packet sniffer in python for Linux
- 更新setuptools和pip时报错Command "python setup.py egg_info" failed with error code 1 in
- [VSCode] Visually Organize Applications in VS Code with Window Color-Coding
- [Tools] Scroll, Zoom, and Highlight code in a mdx-deck slide presentation with Code Surfer <🏄/>
- [Python] Reuse Code in Multiple Projects with Python Modules
- [PHP] find ascii code in string
- PHP QR Code - QR code generator, an LGPL PHP library
- the code place where the binding is converted to final value displayed in ui
- 使用ABAP创建QR Code(二维码)
- Cannot find source code based button in SE24
- 另一种无法enable ABAP source code tool的原因
- 如何让 Visual Studio Code 里显示 Cypress 的 intelligent code suggestion
- github 2FA里的recovery code,一定要好好保存
- the code place where the binding is converted to final value displayed in u
- Useful code snippet to parse the key value pairs in URL
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- Visual Studio Code 保存代码时报Applying code action Organize Imports
- Ubuntu 下Unable to install “Visual Studio Code“:snap “code“ has “install-snap“ change in progress
- 成功解决Command "python setup.py egg_info" failed with error code 1 in C:UsersAppData
- Spark SQL 源代码分析之 In-Memory Columnar Storage 之 in-memory query
- 一文吃透 VS Code+Git 操作(vs code中git的相关配置与使用)