名称: codefocus 描述: CodeFocus for Quarto Revealjs。用于在创建演示文稿时进行渐进式代码高亮。
CodeFocus for Quarto Revealjs
在Quarto revealjs演示文稿中使用此语法添加渐进式代码高亮和解释。
何时使用
- 当创建Quarto revealjs演示文稿时
- 当您需要逐步代码演练时
- 当逐步教授代码概念时
设置
- 安装扩展：
quarto add reuning/codefocus
- 添加到
_quarto.yml：
revealjs-plugins:
- codefocus
指令
语法
## 幻灯片标题
```python
import requests
import json
api_url = "https://api.example.com/data"
headers = {"Authorization": "Bearer token"}
response = requests.get(api_url, headers=headers)
data = response.json()
```
::: {.fragment .current-only data-code-focus="1-2"}
首先，我们导入HTTP请求和JSON处理所需的库。
:::
::: {.fragment .current-only data-code-focus="4-5"}
定义API端点URL和身份验证头。
:::
::: {.fragment .current-only data-code-focus="7-8"}
发起GET请求并解析JSON响应。
:::
关键属性
.fragment- 使内容逐步出现.current-only- 片段在前进时消失（保持幻灯片整洁）data-code-focus="N"- 要突出显示的行号（基于1的索引）data-code-focus="1-3"- 行范围data-code-focus="1,3,5"- 多个特定行
注意事项
- 代码块必须在片段div之前
- 每个片段在按箭头键时突出显示不同的行
- 解释文本在该片段激活时出现在代码下方