code-surfer 中文翻译


code-surfer 炫酷的代码演示ppt。

用起来还是有些小毛病,比如无法居中,要手动条件,但是瑕不掩瑜,这是一款非常棒的软件。

顺手做了个翻译,已提到官方库。

和博客的渲染有点冲突,移步官方库,地址:https://github.com/pomber/code-surfer/blob/master/readme-zh.md


Code Surfer

support 上赞助这个项目,保持她的生命力❤️

Code Surfer为 MDX Deck 幻灯片增加代码高亮、代码缩放、代码滚动、代码聚焦、代码变形等功能。

创建并运行一个新的项目:

npm init code-surfer-deck my-deck
cd my-deck
npm start

例子

如何使用 Code Surfer

首先了解 MDX Deck 的工作方式可能会有所帮助

要使用 Code Surfer,你需要先将其导入,并使用 <CodeSurfer> 标签包裹要显示的代码(需要在代码块之前和之后保留空行):

import { CodeSurfer } from "code-surfer"

# Deck Title

---

<CodeSurfer>

​```js
console.log(1);
console.log(2);
console.log(3);
```

</CodeSurfer>

特性:

这是一个 使用所有功能 (及 mdx 源码)的演示文稿,万一你更喜欢阅读代码而不是文档😀

高亮

在代码块第一行中的(设置)语言之后添加 _高亮字符串位置_,以告诉Code Surfer你要高亮的行和列。

Code Surfer将淡出所有未高亮的代码,并在必要时将其缩小以适合幻灯片。

​````md

​```js 1:2,3[8:10]
console.log(1);
console.log(2);
console.log(3);


</CodeSurfer>

在上面的示例中,1:2,3[8:10] 意思是:“行1行2高亮,行3到列8到10高亮”。更多示例:

  • 5:10 第 5,6,7,8,9 行 和第 10 行高亮
  • 1,3:5,7 第1行,第 3~5 行,第 7 行高亮,
  • 2[5] 第 2 行第5高亮
  • 2[5:8] 第 2 行 5~8 列高亮
  • 1,2[1,3:5,7],3 第1行,第2行,第2行第1列、3~5列、7列高亮

注意: 在以前的CodeSurfer版本中,我们使用标记代替列。

步骤

添加更多代码块,以向 Code Surfer 幻灯片添加步骤。

​````md

​```js
console.log(1);
console.log(2);
console.log(3);


```js 1
console.log(1);
console.log(2);
console.log(3);
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
````

你可以为不同的步骤更改焦点和/或代码,然后 Code Surfer 会在以下步骤之间进行变换:缩放,滚动,淡入,淡出,添加和删除行。

标题和副标题

​````md

​```js 1 title=”Title” subtitle=”Look at the first line”
console.log(1);
console.log(2);
console.log(3);


```js 2 title="Title" subtitle="and now the second"
console.log(1);
console.log(2);
console.log(3);
````

主题

Code Surfer Themes

@code-surfer/themes 包里面有许多Code Surfer主题。

你可以通过 theme 传递 prop <CodeSurfer theme={someTheme}>:

​````md
import { CodeSurfer } from “code-surfer”
import { nightOwl } from “@code-surfer/themes”

​```js
console.log(1);
console.log(2);
console.log(3);


</CodeSurfer>

或者像设置其他任何MDX Deck 主题一样设置整个项目的主题:

​````md
import { CodeSurfer } from “code-surfer”
import { nightOwl } from “@code-surfer/themes”

export const theme = nightOwl

​```js
console.log(1);
console.log(2);
console.log(3);


</CodeSurfer>

以这种方式导出主题还将更改未使用Code Surfer的幻灯片的文本和背景颜色。如果要保留其他mdx主题的颜色,可以将两个主题组合在一起export const themes = [codeSurferTheme, mdxDeckTheme]

自定义样式

你可以编写自己的Code Surfer主题,更改代码,标题和副标题的样式:

在主题中使用 Theme UI

​```js
// custom-theme.js
export default {
colors: {
background: “#222”,
text: “#ddd”,
primary: “#a66”
},
styles: {
CodeSurfer: {
pre: {
color: “text”,
backgroundColor: “background”
},
code: {
color: “text”,
backgroundColor: “background”
},
tokens: {
“comment cdata doctype”: {
fontStyle: “italic”
},
“builtin changed keyword punctuation operator tag deleted string attr-value char number inserted”: {
color: “primary”
},
“line-number”: {
opacity: 0.8
}
},
title: {
backgroundColor: “background”,
color: “text”
},
subtitle: {
color: “#d6deeb”,
backgroundColor: “rgba(10,10,10,0.9)”
},
unfocused: {
// only the opacity of unfocused code can be changed
opacity: 0.1
}
}
}
};


像其他卡片主题一样使用它:

````md
import { CodeSurfer } from "code-surfer"
import customTheme from "./custom-theme"

<CodeSurfer theme={customTheme}>

​```js
console.log(1);
console.log(2);
console.log(3);
````

语言支持

Code Surfer 使用 Prism 解析不同的语言, 因此它支持 Prism 支持的所有语言.

开箱即用的支持大多数流行语言,其余的则需要导入它们:

​````md
import { CodeSurfer } from “code-surfer”
import “prismjs/components/prism-smalltalk”

​```smalltalk
result := a > b
ifTrue:[ ‘greater’ ]
ifFalse:[ ‘less or equal’ ]


</CodeSurfer>

如果需要同时显示多个代码, 请使用 <CodeSurferColumns>:

​````md
import { CodeSurferColumns, Step } from “code-surfer”

​```js
console.log(1);
console.log(2);


```js
console.log("a");
console.log("b");
console.log(1);
console.log(2);
console.log("a");
console.log("b");
````

每个 <Step> 有自己的 title and subtitle.

你可以为各列使用不同的主题: <CodeSurferColumns themes={[nightOwl, ultramin]}>. 并更改列的相对大小 <CodeSurferColumns sizes={[1,3]}>.

列不仅用于代码,还可以将它们用于任何类型的内容:

​````md
import { CodeSurferColumns, Step } from “code-surfer”
import MyComponent from “./my-component.jsx”

​```js
console.log(1);
console.log(2);


# Some Markdown

</Step>

<Step>

```js 2
console.log(1);
console.log(2);
````

导入代码文件

你可以从文件中导入代码,而不必在代码块中编写代码:

​````md
import { CodeSurfer } from “code-surfer”

​```js 5:10 file=./my-code.js


```js file=./my-other-code.js
````

行号

要显示行号,将showNumbers添加到语言标识之后:

​````md
import { CodeSurfer } from “code-surfer”

​```js showNumbers
console.log(1);
console.log(2);
console.log(3);


```js
console.log(1);
console.log(2);
console.log(4);
````

差异

代码块也可以展示差异。 This is particularly useful when using empty diffs for code that doesn’t change:

代码块也可以展示差异。 当讲空的diffs用在不变的代码块时候,这特别有用:

​````md
import { CodeSurfer } from “code-surfer”

​```js
console.log(1);
console.log(2);
console.log(3);


```diff 1 subtitle="log 1"
````

相关

支持 Code Surfer

你可以帮助保持该项目的生命。

赞助商

通过成为赞助者来支持该项目。你的徽标将显示在此处,并带有指向你网站的链接。 [成为赞助商]

支持者

感谢所有的支持者! 🙏 [成为支持者]

贡献者

这个项目的存在要感谢所有贡献者。

````


文章作者: Yao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Yao !
 上一篇
webstorm 中调试typescript单文件 webstorm 中调试typescript单文件
leetCode 最近支持了typescript刷题,高高兴兴把webstorm切换到typescript刷题,记录下切换过程。 安装因为刷题都是单文件,我们需要用webstorm支持debugger单ts文件。 yarn add type
2020-05-22
下一篇 
在nuxtjs中组织api调用 在nuxtjs中组织api调用
对与api的组织调用,nuxtjs的官方文档都是axios.get('https://jsonplaceholder.typicode.com/users')这样的格式。简单的用一用,也问题不大,但是项目一大之后,对请求ur
2020-04-20
  目录