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

2023-11-26
Elementor 专业教程
喜欢(0)
Elementor pro Code Highlight widget

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

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

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

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

Elementor Code Highlight 小工具

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

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

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

1. Code Highlight 小工具的内容标签

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

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

下面我们逐一进行介绍。

● Language

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是自定义输入要显示的代码内容的设置选项。选择编程语言后,你可以在Code的输入框中输入该语言的代码内容。上图中的代码语言是HTML。

● Line Numbers

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

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

● Copy To Clipboard

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

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

● Highlight Lines

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

● Word Wrap

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

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

● Theme

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

  • Solid
  • Dark
  • Okaidia
  • Solarizedlight
  • Tomorrow
  • Twilight
● Height

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

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

● Font Size

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

2. Code Highlight 小工具的高级设置

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

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

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
fuyeshidai

做点副业,为生活加点料

Elementor pro Login widget
Elementor 专业教程 6 – Login小工具的设置和使用方法
Elementor-Pro-Query
Elementor 专业教程 33 – Query的设置和使用方法
Elementor pro Progress Tracker widget.webp
Elementor 专业教程 32 – Progress Tracker小工具的设置和使用方法
Elementor basic 10 tubiao.webp
Elementor 基础教程 10 - 图标小工具的设置使用方法
Elementor pro Hotspot widget
Elementor 专业教程 10 – HotsPost小工具的设置和使用方法
Jetengine jiaocheng Meta Field tumnail
JetEngine 通用教程 - Meta Field的项目说明以及设置和使用方法
elementor wp-post kaobei he zhantie wangzhan shejiyuansu
Elementor 通用教程 - 如何拷贝和粘贴不同网站的设计元素
elementor kit library jiaocheng tumnail
Elementor 通用教程 - Elementor Kit Library的使用方法
Elementor basic 16 tubiaoliebiao.webp
Elementor 基础教程 16 - 图标列表小工具的设置和使用方法
Elementor pro Price List widget
Elementor 专业教程 11 – Price List小工具的设置和使用方法