75 种语言和 8 个 Prism。js 主题
的 代码 下拉列表列出了 75 种语言,从 HTML、CSS、JavaScript 和 PHP 到 Python、Bash、SQL、JSON、YAML、TypeScript、React JSX、Go、Kotlin 和 Swift。 主题 提供默认、黑暗、时髦、奥凯迪亚、暮光、腼腆、日光和明天。选择 定制 "样式"选项卡中设置自己的背景、文本颜色、行号颜色和排版。
- 在白页上使用默认光或日光,在黑暗部分使用 Okaidia 或 Tomorrow 等光主题。
- Custom 没有关键字颜色:代码显示在您选择的单个文本颜色中,因此当您想要语法颜色时,请使用预设的主题。
- 1个小部件持有1个片段,并排放置几个小部件进行代码和输出。
Elementor Pro 代码突出显示与主插件源代码
Elementor Pro 有自己的代码突出显示小部件,两者都使用 Prism。js,因此选择取决于您需要的额外功能。
复制按钮和行号
开启 启用复制按钮 要添加复制整个片段的按钮。设置其 复制按钮文本的,该 复制按钮文本后 单击后显示, 按钮可见性 (始终或悬停)和 按钮位置 (右上或右下角)。 启用行号 向左侧添加数字。
- 将按钮设置为始终位于教程页面上,以便读者注意到它。
- 行号可以轻松引用文本中的行。
- 没有选项可以突出显示特定行或将长行包裹在小部件内。
容器和按钮造型
的 集装箱 section 设置一个高度(最高 1200px)这么长的片段滚动,加上填充、边距、边框和半径,在自定义主题下它还添加了背景、排版、文本颜色和行号颜色。 按钮 部分通过排版、文本颜色、背景颜色、填充、边框和半径对复制按钮进行样式。
- 将高度限制在长文件上,以便页面保持可读性。
- 将按钮背景与您的品牌颜色相匹配。
- 添加填充,以便代码不会触摸块边缘。
源代码常见问题
源代码小部件免费吗?
号源码的一部分 硕士插件专业版。Elementor Pro 用户还拥有 Elementor 的代码突出显示小部件。
我可以隐藏代码旁边的行号吗?
是的。设置 启用行号 对于更清洁的块来说,不。
我可以将复制按钮放置在哪里?
套 按钮位置 到右上角或右下角,以及 按钮可见性 到始终或悬停。
源代码小部件支持哪些语言?
75,在代码下拉中选择。它们包括 HTML、CSS、JavaScript、PHP、Python、Bash、SQL、JSON、YAML、Markdown、TypeScript、React JSX 和 TSX、Go、Java、Kotlin、Swift、Ruby、C、C++ 和 C#。访问者可以读取和复制代码,但无法编辑。
我可以使用自己的配色方案而不是预设的主题吗?
Partly。将主题设置为自定义,以选择容器样式部分中的背景、文本颜色、行号颜色和排版。关键字颜色仅附带预设的八个主题,因此自定义块显示代码为一种颜色,除非您添加自己的 CSS。
我可以突出显示具体的线条吗?
No。widget 没有行高亮选项,Elementor Pro 的代码高亮小部件可以突出显示所选行,如果您需要的话。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
