[Tools] Scroll, Zoom, and Highlight code in a mdx-deck slide presentation with Code Surfer <🏄/>
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"}
]}
/>
[Tools] Scroll, Zoom, and Highlight code in a mdx-deck slide presentation with Code Surfer <🏄/>的更多相关文章
- Chrome Dev Tools: Code Folding in CSS and Javascript for improved code readiability
Note : Apply for google chrome canary. You can fold code blocks in CSS (and Sass) and javascript fil ...
- VS Code 中文社区正式成立啦!VS Code Day 圆满落幕!
背景简介 Visual Studio Code 是一款现代化轻量级代码编辑器,它免费.开源.跨平台.功能强大.本次 VS Code Day 是广大 VS Code 爱好者一起学习与交流的盛会,让我们对 ...
- EF Code First教程-01 创建一个简单的Code First程序
1 从nuget中搜索并添加EF 2 在app.config或web.config中添加数据库连接 <connectionStrings> <add name="conns ...
- iphone dev 入门实例6:How To Use UIScrollView to Scroll and Zoom and Page
http://www.raywenderlich.com/10518/how-to-use-uiscrollview-to-scroll-and-zoom-content Getting Starte ...
- 10 Code Coverage Tools for C & C++
Code coverage is a measure used in software testing that describes the degree to which the source co ...
- The Ultimate List of Open Source Static Code Analysis Security Tools
https://www.checkmarx.com/2014/11/13/the-ultimate-list-of-open-source-static-code-analysis-security- ...
- Top 40 Static Code Analysis Tools
https://www.softwaretestinghelp.com/tools/top-40-static-code-analysis-tools/ In this article, I have ...
- 计算机视觉code与软件
Research Code A rational methodology for lossy compression - REWIC is a software-based implementatio ...
- Delphi Code Editor 之 编辑器选项
Delphi Code Editor 之 编辑器选项 可从Code Editor的右键菜单中选择“Properties”菜单项来查看编辑器选项.也可以从主菜单[Tools | Editor Optio ...
随机推荐
- 清除oracle归档日志
清除oracle归档日志 1. 连接oracle报如下错误 ORA-00257: archiver error. Connect internal only, until freed 产生原因:出现O ...
- python TCP协议详解 三次握手四次挥手和11种状态
11种状态解析 LISTEN -------------------- 等待从任何远端TCP 和端口的连接请求. SYN_SENT --------------- 发送完一个连接请求后等待一个 ...
- svn服务
svn服务实战应用指南 1.1 svn介绍 什么是svn? svn(sub-version)是近年来崛起的非常优秀的版本管理工具,与cvs管理工具一样,svn是一个跨平台的开源的版本控制系统, ...
- Python爬虫-Scrapy-CrawlSpider与ItemLoader
一.CrawlSpider 根据官方文档可以了解到, 虽然对于特定的网页来说不一定是最好的选择, 但是 CrwalSpider 是爬取规整的网页时最常用的 spider, 而且有很好的可塑性. 除了继 ...
- 洛谷2016 战略游戏 (0/1状态的普通树形Dp)
题意: 给出一个树,覆盖树上某一个点的花费为w[i],求树上每一条边至少有一个点覆盖的最小花费. 细节: 1.一条边的两端可以均被覆盖,但是不能存在一条边的两端都不被覆盖. 2.可能存在 分析: 对于 ...
- 在ubuntu18.04版本安装vscode
方式一:图形安装 1. 在ubuntu桌面找到应用中心 2. 在软件中心中,搜索Visual Studio Code 3. 在页面中就可以直接选择安装 方式二:命令安装 1. 从vscode官网下载最 ...
- sql无效字符 执行sql语句报错解决方案
以为是sql中参数赋值有问题,但是将sql语句直接copy到PLSQL中执行,却没问题,纠结了好久,原来是 insert语句多了:唉,坑爹 http://www.jb51.net/article/32 ...
- java常见问题集锦
Eclipse 编译错误 Access restriction:The type *** is not accessible due to restriction on... 解决方案 Eclipse ...
- PTA 04-树6 Complete Binary Search Tree (30分)
题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/669 5-7 Complete Binary Search Tree (30分) A ...
- kafka直连方式消费多个topic
一个消费者组可以消费多个topic,以前写过一篇一个消费者消费一个topic的,这次的是一个消费者组通过直连方式消费多个topic,做了小测试,结果是正确的,通过查看zookeeper的客户端,zoo ...