How can we help?
This knowledge base was built using the Echo knowledge base plugin
Code Block Widget
Overview
The Code Block widget is a useful tool for developer blogs, tutorial sites, manuals, and software documentation. It helps to display formatted (highlighted) code in almost any language as it supports over fifty programming, scripting, and mark up languages. We provide 11 different color themes with both white and black backgrounds.
//hello world function
function hell_world( $post_type_params ) {
$post_type_params['hierarchical'] = true;
if ( empty($post_type_params) ) {
helper();
}
return 'success';
}
Presets
Our Code Block has 11 presets to choose from. These presets control the initial style that you can further customize.
Examples
//hello world function
function hell_world( $post_type_params ) {
$post_type_params['hierarchical'] = true;
if ( empty($post_type_params) ) {
helper();
}
return 'success';
}
//hello world function
function hell_world( $post_type_params ) {
$post_type_params['hierarchical'] = true;
if ( empty($post_type_params) ) {
helper();
}
return 'success';
}
Preset Library
Each of our widgets has presets. A preset is a predefined configuration that applies certain styles so that you don’t need to spend time configuring one. You can further customize each preset.
We currently have 11 preset styles to choose from to get you started quickly.
To learn more about the Presets and how to use them, click here.
How to Use the Widget
Find the Widget
You can locate the widget in two ways:
A) Search for the widget using the Elementor search box.
Type in the words: Code Block
B) Find the CREATIVE ADDONS section and choose the widget
Drag and Drop
Click and drag the widget into a place on your web page.
Choose your Initial Preset
Choose a Preset to apply a predefined style.
Header Toolbar
In the header toolbar we have three available settings:
- Turn the Copy Icon / Expand Icons on/off
- Choose the Copy icon
The Copy Button allows users to copy all the code with one click. - Choose the Expand icon.
The Expand Button will expand the code block area downwards.
Code
- Language: select the desired programming language.
- Code: enter source code here.
- Line Numbers: show/hide line numbers on the left beside the source code. In the screenshot example, it is 1 - 8.
- First Line Number: default is 1 and can be changed to other number.
- Line Wrap: whether to wrap long source code lines or show a scroll bar.
Style Tab
Container Section: controls the overall border properties.
Language Header: controls the Top Header area above the source code.
Code: controls the style of code body area.
This article was built with the Best Knowledge base on the market.
