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?

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:

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
Postable – Convert code and embed.

Resource