Code Block

Overview

The code block element can be used to embed custom code as readable text or execute the code (CSS, HTML, JS, PHP, Shortcode, Tracking code etc) on specific pages of your Enfold website.

Code Block Settings

In the Code Block option, you can add the custom code in the Code Block Content area and select the required options to suit your purpose.

Code Wrapper Element
Escape HTML Code
Disable Shortcode Processing
Deactivate schema.org markup

Code Snippets

How to use the snippets?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

Shortcode for a code block element:

[av_codeblock wrapper_element='' wrapper_element_attributes='' escape_html='' deactivate_shortcode='' deactivate_wrapper='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-6sv14']
<!-- YOUR CODE HERE -->

[/av_codeblock]

Customization

How to style background for the code?

By default, the code wrapped in the pre tag will have the alternate grey and white background color. To custom style the pre tag and change the background style of your code please use the following CSS:

/*----------------------------------------
// CSS -  Code block custom style 
//--------------------------------------*/

pre {
    color: #444;
    border: solid 1px #ccc;
    padding: 2em;
    line-height: 24px;
    font-size: 12px;
    font-weight: lighter;
    background-image: linear-gradient(#e8e9d7 50%, #eff2ec 50%);    
    font-family: Monaco, "Andale Mono", "Courier New", Courier, monospace;
}

Adding CSS/Code for a single page

The code block element makes it easy to add custom code can be added to a single page or specific pages. Lets take a look at adding custom CSS code to a single page or post:

Drag and drop the code block element on the page or post to which you like to add custom code.
Add your CSS code using the style tag (as shown below) in the code block content area ( do not wrap the code in pre tag or select Escape HTML Code).

<style>
/* Your custom CSS */
</style>

Troubleshoot

Code in code block section does not display.

After inserting your code especially if it is a script for a referral ad and it does not show up it is most likely due to the Adblock plugin installed on your browser.

Resource

Useful plugins for advanced code highlighting

Prism
WP Code Highlight

Online Tools

Gist
Pastebin

Resource

Contributed video:

Code block Element Tutorial