Elementor 专业教程 28 - Code Highlight小工具的设置和使用方法

Elementor Code Highlight 小工具是一个能在网站上添加代码视窗效果的工具。

通过该工具，你可以在网站中添加各种程序代码，如HTML、CSS、JavaScript等，以便于分享和展示代码内容。除了展示代码，它还可让用户复制代码或自定义视窗样式，从而使用户更容易阅读和理解代码内容。

如果你运营的是一个展示代码相关的网站，Code Highlight小工具将会是你最常用的工具。

本教程会简要说明Code Highlight小工具的使用方法。

首先，将Code Highlight小工具拖放到编辑栏内，如下图所示。

拖放小工具到编辑栏后，你将看到如下画面。

你可以看到编辑栏内有一串默认预设的程序代码。

Code Highlight 小工具的内容标签包含以下设置选项：

• Language
• Code
• Line Numbers
• Copy to Clipboard
• Highlight Lines
• Word Wrap
• Theme
• Height
• Font Size

下面我们逐一进行介绍。

Language是指定显示的编程语言类型的设置选项。你可以在以下编程语言中进行选择：

• Markup
• HTML
• CSS
• Sass(Sass)
• Sass(Scss)
• Less
• JavaScript
• TypeScript
• React JSX
• React TSX
• PHP
• Ruby
• JSON+WebApp Manifest
• HTTP
• XML
• SVG
• Rust
• C#
• Dart
• Git
• Java
• SQL
• Go
• Kotlin+Kotlin Script
• Julia
• Python
• Swift
• Bash+Shell
• Scala
• Haskell
• Perl
• Objective-C
• VisualBasic+VBA
• R
• C
• C++
• ASP.NET

Code是自定义输入要显示的代码内容的设置选项。选择编程语言后，你可以在Code的输入框中输入该语言的代码内容。上图中的代码语言是HTML。

Line Numbers是选择是否显示代码行号的设置选项。默认是“是”，推荐设置也是“是”。

显示代码行号可以帮助你确认代码内容行数，同时也方便与其他人分享特定位置的特定说明。

Copy to Clipboard是选择是否允许用户复制代码到剪贴板的设置选项。 默认预设是“是”。

如果你不希望复制粘贴，也可以关闭此项功能。如果是与用户分享的内容，则推荐选择“是”，以方便用户复制和粘贴使用。

Highlight Lines是给特定的行或者多个行进行高亮显示的设置选项。

Word Wrap是选择是否启用或禁用代码自动换行的设置选项。默认是“否”。

如果选择“是”，当一行代码内容过长超出编辑框时，后方的代码会自动换行显示。

Theme是选择代码高亮主题样式的设置选项。你可以在以下6个预设中进行选择：

• Solid
• Dark
• Okaidia
• Solarizedlight
• Tomorrow
• Twilight

Height是指定代码内容输入框的高度的设置选项。你可以设置100-1000之间的数值。

关于高度，你可以根据代码的长度进行设置。如果是用于模板，那么就设置一个平均高度即可。

Font Size是自定义指定代码内容文本字体大小的设置选项。你可以根据设计喜好自定义设置。

高级设置是所有小工具通用的设置项，具体功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以上就是 Code Highlight 小工具的功能设置和使用说明。希望本篇内容能对你使用Elementor时有所帮助。