pl-code元件¶
显示嵌入的或基于文件的代码块，并带有语法突出显示和 行标注。
样品元素¶
question.html
<pl-code language="python">
def square(x):
return x * x
</pl-code>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
copy-code-button |
布尔 | 假 | 是否包含一个按钮来复制此元素显示的代码。 |
directory |
字符串 | 查看描述 | 包含现有代码的源文件所在的目录。仅当使用 source-file-name 时才有用。如果它包含特殊名称 "clientFilesCourse" 或 "serverFilesCourse" 之一，则从课程的特殊目录中读取源文件名，否则该目录应位于问题自己的目录中。如果未提供，则应在问题的主目录中找到源文件名。 |
highlight-lines |
字符串 | — | 应用独特的背景突出显示指定的代码行。接受 4、1-3,5-10 和 1,2-5,20 等输入。 |
highlight-lines-color |
字符串 | 查看描述 | 指定突出显示的代码行的颜色。如果未设置，则使用由所选 Pygments 样式定义的突出显示颜色，如果该样式未定义，则回退到 "#b3d7ff"。 |
language |
字符串 | — | 要使用的编程语言语法突出显示。请参阅下文了解选项。 |
normalize-whitespace |
布尔 | 假 | 是否去除尾随空白并删除内容的额外缩进。推荐用于代码内联在问题文件中的情况。 |
prevent-select |
布尔 | 假 | 应用方法使源代码更难以复制，例如阻止选择或右键单击。请注意，源代码仍然可以在页面源代码中访问，学生始终可以看到该页面源代码。另请注意，阻止选择或复制文本等操作可能会损害学生的体验，因此除非绝对必要，否则应避免这样做。 |
show-line-numbers |
布尔 | 假 | 是否显示此元素显示的代码中的行号。 |
source-file-name |
字符串 | — | 具有要显示为代码块的现有代码的源文件的名称（而不是如上面的代码片段所示在元素标记之间编写现有代码）。 |
style-name |
字符串 | "xcode" |
要使用的 Pygments 样式的名称。有效样式的示例可以在 Pygments 文档 中找到。 |
从已弃用的属性迁移¶
为了向后兼容，仍支持以下已弃用的属性：
| 旧语法 | 新语法 |
|---|---|
style="<name>" |
style-name="<name>" |
no-highlight="true" |
省略 language |
设置 no-highlight="true" 只是禁用语法突出显示，这是省略 language 属性时的行为。
细节¶
pl-code 元素使用 Pygments 库进行语法突出显示。它支持 Pygments 文档 中找到的任何内置支持的语言，以及可用于显示终端输出的自定义 ansi-color 自定义语言。如果未提供语言，则不会进行语法突出显示。
常见陷阱¶
HTML 规范不允许在页面上插入特殊字符（即 <、>、&），并且将这些字符与内联代码一起使用可能会破坏渲染。要解决此问题，请转义字符（<、>、&，更多使用此转义工具），或者使用 source-file-name 属性将外部文件中的代码片段加载到 pl-code 中。
无障碍¶
默认的 style-name 是 "xcode"，因为其令牌颜色符合 WCAG AA 与默认代码背景的对比 (4.5:1)。许多 Pygments 样式包含不包含的标记颜色；如果覆盖 style-name，请验证对比度。
示例实现¶
- [元素/代码]