{"id":280,"date":"2017-02-19T04:16:53","date_gmt":"2017-02-19T04:16:53","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=280"},"modified":"2020-03-31T10:08:41","modified_gmt":"2020-03-31T10:08:41","slug":"code-block","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/code-block\/","title":{"rendered":"Code Block"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-f4d8175066ee8b7984d09a89c31da17c\">\n#top .av-special-heading.av-av_heading-f4d8175066ee8b7984d09a89c31da17c{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-f4d8175066ee8b7984d09a89c31da17c .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-f4d8175066ee8b7984d09a89c31da17c .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-f4d8175066ee8b7984d09a89c31da17c av-special-heading-h1 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Code Block<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-l8eqg-b9ebb180602d9e1da3cb01debb672913 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5q24oo-d679f40730e2e63e45b6ada650effc17 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-5i3xg0-c37fab1dd223873fd6209b115d733dab '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<\/div><\/section>\n<div  class='hr av-5f8fd4-3dd49681795227a94bd097b7f544e634 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-iu3hc-10e9f7d1ef0c920ba32bc90c83e1e0d0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Code Block Settings<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-52vsf4-a226e1f1bdb8e0e267cd10a9b4cab17b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<ul>\n<li>Code Wrapper Element<\/li>\n<li>Escape HTML Code<\/li>\n<li>Disable Shortcode Processing<\/li>\n<li>Deactivate schema.org markup<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-4xtu9k-026c5c7af9cd50466e20d358e58ad87b hr-default  avia-builder-el-7  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4qtm0o-1ea2d389a0876c22f9495e769ba01e2e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-9  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to 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.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-4d6oeo-e81e8329b44e465a45bb22acf9b52b4b hr-default  avia-builder-el-10  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-47xukg-eb08865f07153fa6a25baeb88005fdf6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode <\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-etj08-460f1b9ca4972236b90c9a490c0043f5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Shortcode for a code block element:<\/p>\n<\/div><\/section>\n<br \/>\n[\/av_codeblock]<\/p>\n<div  class='hr av-3nv7wo-2425e51e556069472025814874e122cc hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3ls7ag-facd82f0f7af05d36676948b3d78ba06 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-3dq2ug-e43fc03bd4e7cf8931e4496747157dbe hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-bh6g0-b54fdb5eed8b7e3dffd8eeecb3890e73 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to style background for the code?<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-az72g-33d382bedb8399767d190e2b07d6c258 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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:<\/p>\n<\/div><\/section>\n\n<div  class='hr av-2ouswo-f5e795168f5e424e9d60e08664362cfa hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2lmmt4-78a7d1cfbb2a1301690c4e896e719d2d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Adding CSS\/Code for a single page<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2csd8w-e1aaffdfd5525d3dc43f192f53603277 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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:<\/p>\n<ul>\n<li>Drag and drop the code block element on the page or post to which you like to add custom code.<\/li>\n<li>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 <strong>Escape HTML Code<\/strong>).<\/li>\n<\/ul>\n<\/div><\/section>\n\n<div  class='hr av-25bc28-654896d18eba745cc7c6fc9dd5f64a94 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1v99c8-732a634b0feba6f71ca0f3a325e0ffac '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Troubleshoot<\/h2>\n<\/div><\/section>\n<div  class='hr av-1oocsg-ace6505928a9a5aa15763a1cb5f66c24 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1j37a0-94a53985950981e4a40613cb98e86ca9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Code in code block section does not display.<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1ef54g-1a4ea4499a0bf53d60657b271e7a800b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<\/div><\/section>\n<div  class='hr av-1a8xps-d3e542a6e00b995bf7a02b3ba4dfbf13 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-10segg-f8e16e53f0c103db6b62086a376a448e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Resource <\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-uggfs-79f9835e22b778fcda616a6801b65f43 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Useful plugins for advanced code highlighting<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/prism\/\" rel=\"noopener noreferrer\" target=\"_blank\">Prism<\/a><br \/>\n<a href=\"https:\/\/wordpress.org\/plugins\/wp-code-highlightjs\/\" rel=\"noopener noreferrer\" target=\"_blank\">WP Code Highlight<\/a><\/p>\n<p>Online Tools<\/p>\n<p><a href=\"http:\/\/gist.github.com\" rel=\"noopener noreferrer\" target=\"_blank\">Gist<\/a><br \/>\n<a href=\"http:\/\/pastebin.com\" rel=\"noopener noreferrer\" target=\"_blank\">Pastebin<\/a><\/p>\n<\/div><\/section>\n<div  class='hr av-8u48-5151ec91a8e2b17bbae92775a31a0ed5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-jxn3c-0ef0055b902a1eebd80b591016320848 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-hu36o-dc3781d35bd85fb338c7337ad217fa6c hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8owvk-cb8f69fc79624db9f00d182337f19120 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=w7sXfKJRttk\"> Code block Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-280","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=280"}],"version-history":[{"count":4,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/280\/revisions"}],"predecessor-version":[{"id":12855,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/280\/revisions\/12855"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}