Code Block Pro

Example

Example CSS Code generated by Chat-GPT.

/* Placeholder CSS Styles */

/* Header Styles */
.header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Footer Styles */
.footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

Settings

Code Language

This setting sets the programming language for the code and applies the appropriate syntax highlighting. It supports more than 140 different programming languages.

Line Settings

• Enable line numbers: Enable line numbers and set a starting number.
• Starting From: If “Enable line numbers” is enabled, you can select the starting line from which the line numbers will be displayed.
• Enable line highlighting: Highlight individual lines to bring attention to specific code.
• Highlight the following: If “Enable line highlighting” is enabled, you have the ability to designate specific lines for highlighting. You can input line numbers separated by commas (e.g., 1,5) or employ brackets to indicate a range (e.g., 1,[3,5]).
• Enable blur emphesis: Enable the blurring of the code surroundings to emphasize specific lines.
• Focus on the following: If “Enable blur emphesis“ is enabled, you have the ability to designate specific lines to focus on. You can input line numbers separated by commas (e.g., 1,5) or employ brackets to indicate a range (e.g., 1,[3,5]).
• Remove blur on hover: Eliminate the blur effect when hovering over.

Header Type

Choose from one of the five pre-defined header styles.

Footer Type

Choose from one of the three pre-defined footer styles.

Themes

Choose from one of the 25+ built-in themes.

Styling

• Font Size: This option determines the font size for the code.
• Line Height: This option determines the line height for the code.
• Font Family: This option determines the font family for the code.
• Clamp Values: When values are clamped, it means they are constrained within certain minimum and maximum limits to ensure they don’t exceed specified boundaries. This can help maintain consistency and prevent extreme or unintended changes in font size.

Max Height

• Max Editor Height: Set a maximum height exclusively for the code within the block editor.
• Enable Max Height: Enable Max Height feature for the code block.
• See More Text: Set text within the See More button.
• Hide After Line: Set a starting position from which the lines become invisible.
• Animate Height Transition: By enabling this setting, the expansion of the code frame is accompanied by an animation.
• Button Styling: Choose from one of the four pre-defined See More button styles.

Extra Settings

• Copy Button: If checked, users will be able to copy your code snippet to their clipboard.
• Disable Padding: Disable the padding for the code frame. This is useful if you pick a theme that matches your background color, and want the code to line up to the edge of your content. You may need to add your own padding with CSS.

Mobile Friendly

The Code Pro Block is mobile friendly.

Accessibility

The Code Block Pro plugin partly conforms with WCAG 2.1 AA Guidelines, ensuring that all users can navigate and interact with its content easily and effectively.

Back to List of Blocks