源代码

将代码粘贴到普通文本小部件中,它会剥离格式,留下一个不可读的块。 源代码 小部件在 Elementor 的主插件 修复了这一点:它通过正确的语法突出显示、行号、语言主题和复制按钮来显示您的代码,以便读者可以一键抓取片段。

它是为教程、文档和开发者博客构建的,任何需要干净显示 PHP、JavaScript、CSS、HTML 或其他语言的地方。您粘贴代码、选择语言和主题并设置复制按钮,所有这些都来自 Elementor 面板。下面是贯穿每个设置的运行。

源代码小部件的作用 #

Widget 取出一块代码,并根据您选择的语言以颜色编码的语法突出显示方式渲染,它可以对行进行编号,应用几个编辑器主题之一,并添加一个复制到剪贴板的按钮,确认代码何时被复制。

它具有三个选项卡:代码、语言和复制按钮的内容、容器和按钮外观的样式以及常用元素器选项的高级选项卡。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 您要显示的代码片段。

如何添加源代码小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 源代码的,或者滚动到主插件部分,拖到你的页面上,它加载了一个示例片段,这样你就可以立即看到突出显示。

添加代码并选择语言 #

打开 内容 选项卡。 源代码 部分包含所有内容。将您的片段粘贴到 源代码 box,然后在其上方设置语言和主题。

• 代码: 要突出显示的语言,例如 PHP、JavaScript、CSS 或 HTML。这设置了颜色的应用方式。
• 主题: 块(下面覆盖)的配色方案。
• 源代码: 该片段本身,如果您需要快速示例,则带有"使用人工智能写入"选项。

选择一个主题 #

的 主题 dropdown 设置代码块的配色方案,它包括默认、暗黑、时髦、奥凯迪亚、暮光、腼腆、日光、明天,以及自定义选项,因此您可以将该块匹配到明暗页面。

将语言和主题切换在一起可以使每个片段看起来都很合适。这是关于黑暗主题的 JavaScript 片段。

置复制按钮 #

Copy按钮是使小部件对教程有用的原因,代码框下方是它的控件。

• 启用复制按钮: 显示或隐藏复制到剪贴板的按钮。
• 启用行号: 打开或关闭左侧的行号。
• 按钮可见性: 始终或仅在悬停时显示按钮。
• 按钮位置: 将其放在角落里,就像右上角一样。
• "复制按钮文本"和"复制按钮文本"之后: 副本前后的标签,例如复制代码和复制。

当访客单击按钮时,标签会切换到"复制后"文本以确认复制有效。

样式代码块 #

的 风格 tab 分拆成 集装箱 並 按钮另外 图案 (专业选项)。 集装箱 节控制代码块的帧。

• 高度: 限制块高度并让长代码滚动。
• 填充和边缘: 块内部和周围的间距。
• 边界类型和边界半径: 轮廓和圆角。

的 按钮 部分对复制按钮进行样式:其颜色、排版、填充和边框,处于正常状态和悬停状态。

页面上的结果 #

Publish 或 preview,并且代码渲染突出显示,带有行号和正在工作的复制按钮,下面是关于黑暗主题的 CSS 片段,按钮显示其复制状态。

常见用例 #

• 教程和操作方法帖子 分享代码阅读器可以复制。
• 插件和主题文档 具有配置或挂钩示例。
• 开发者博客 以 PHP、JavaScript 或 CSS 显示片段。
• 知识库 使用复制粘贴命令。
• 着陆页 演示 API 调用或嵌入代码。

使用源代码小部件的技巧 #

• 将语言与代码匹配。 正确的代码设置使得突出显示准确。
• 选择适合页面的主题。 在黑暗部分使用黑暗主题,在白页使用浅色主题。
• 保持复制按钮可见。 为教程设置"始终可见"按钮,以便读者发现它。
• 限制长片段的高度。 带有滚动的固定高度可以防止长块占据页面。
• 写下清晰的按钮标签。 复制代码并复制准确地告诉读者发生了什么。

常见问题 #

包裹起来 #

Source Code 小部件将原始片段变成一个干净、突出显示的块,读者可以一键复制粘贴您的代码,设置语言和主题,打开行号和复制按钮,然后对容器进行样式以匹配您的页面,以另一种方式呈现结构化内容,请参阅 动态表小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。