{"id":1566,"date":"2021-06-17T13:16:05","date_gmt":"2021-06-17T13:16:05","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1566"},"modified":"2023-04-30T08:19:52","modified_gmt":"2023-04-30T08:19:52","slug":"how-to-use-elementor-code-highlight-widget-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/","title":{"rendered":"How to Use Elementor Code Highlight Widget [PRO]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1566\" class=\"elementor elementor-1566\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-568cdc40 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"568cdc40\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-21bbd7c4\" data-id=\"21bbd7c4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3c9fb756 elementor-widget elementor-widget-video\" data-id=\"3c9fb756\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=mV0wNM8FlKI&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4cf8a2dc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4cf8a2dc\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-34da792\" data-id=\"34da792\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4b1c7012 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"4b1c7012\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1261\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1261\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1262\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1262\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1261\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1261\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1261\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we will go over the Code Highlight Widget. It is a fast and effortless way to create beautiful code snippets on Elementor, allowing you to make your code more readable and visually consistent with your site, without the need for any additional plugins.<\/p><p>This tutorial will cover:<\/p><p>\u2714\ufe0e Inserting a Code Highlight Widget into your content<br \/>\u2714\ufe0e Selecting your syntax to optimize your highlighted code<br \/>\u2714\ufe0e Customizing your design with multiple styling options<br \/>\u2714\ufe0e Highlight specific lines you want to put a spotlight on<br \/>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1262\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1262\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1262\" tabindex=\"0\" hidden=\"hidden\"><p>hi all it&#8217;s it from elementor<br \/>in this tutorial i&#8217;ll introduce you to<br \/>the code highlight widget<br \/>if you often use code snippets in your<br \/>content such as on a development blog<br \/>for example<br \/>this widget is for you it allows you to<br \/>make your code more readable and<br \/>visually consistent with your site<br \/>without the need for any additional<br \/>plugins there are various things you can<br \/>do with this widget<br \/>so let&#8217;s dive in and see how easy it is<br \/>to create beautiful code snippets with<br \/>elementor<br \/>first off search for and drag the code<br \/>highlight widget to wherever you like<br \/>next paste the code snippet you wish to<br \/>present on your page<br \/>and set the relevant syntax to optimize<br \/>your highlighted code<br \/>there&#8217;s a laundry list of coding<br \/>languages to choose from<br \/>you can either scroll through it or<br \/>simply search for the one you need<br \/>here you can choose to either show or<br \/>hide the line numbers<br \/>depending on your design needs the copy<br \/>to clipboard option<br \/>is set to show by default which allows<br \/>your visitors to copy the entire code<br \/>snippet with a simple click of a button<br \/>you can always hide it if you like with<br \/>highlight lines<br \/>you can select single or multiple lines<br \/>to be highlighted<br \/>this can come in handy if you want to<br \/>put a spotlight on certain parts of your<br \/>code simply type the line numbers in the<br \/>field<br \/>separated with commas you can also<br \/>select a range of lines<br \/>like so<br \/>word wrap allows you to break and wrap<br \/>long lines of code onto the next line<br \/>making your code more presentable<br \/>great now the copy button is more<br \/>accessible as well<br \/>lastly you can customize your code<br \/>snippets even more<br \/>by choosing one of these cool themes and<br \/>find the style that works for your site<br \/>you can also control their height<br \/>depending on the amount of code you want<br \/>to display<br \/>as well as the font size<br \/>scroll bars are added automatically so<br \/>there&#8217;s no need to worry about it<br \/>getting clipped<br \/>well that&#8217;s it now you know what the<br \/>code highlight widget does<br \/>and how to use it to make your code<br \/>snippets more readable<br \/>and visually consistent with your site<br \/>without the need for any additional<br \/>plugins<br \/>have fun styling your code snippets and<br \/>don&#8217;t forget to subscribe to our youtube<br \/>channel<br \/>for more tips and tutorials ciao for now<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, we will go over the Code Highlight Widget. It is a fast and effortless way to create beautiful code snippets on Elementor, allowing you to make your code more readable and visually consistent with your site, without the need for any additional plugins. This tutorial will cover: \u2714\ufe0e Inserting [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9723,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1566","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Elementor Code Highlight Widget [PRO] - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Elementor Code Highlight Widget [PRO] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we will go over the Code Highlight Widget. It is a fast and effortless way to create beautiful code snippets on Elementor, allowing you to make your code more readable and visually consistent with your site, without the need for any additional plugins. This tutorial will cover: \u2714\ufe0e Inserting [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T13:16:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-30T08:19:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Code-Highlight-Widget.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Elementor Code Highlight Widget [PRO] - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Elementor Code Highlight Widget [PRO] - Academy","og_description":"Overview Transcript Overview In this tutorial, we will go over the Code Highlight Widget. It is a fast and effortless way to create beautiful code snippets on Elementor, allowing you to make your code more readable and visually consistent with your site, without the need for any additional plugins. This tutorial will cover: \u2714\ufe0e Inserting [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/","og_site_name":"Academy","article_published_time":"2021-06-17T13:16:05+00:00","article_modified_time":"2023-04-30T08:19:52+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Code-Highlight-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use Elementor Code Highlight Widget [PRO]","datePublished":"2021-06-17T13:16:05+00:00","dateModified":"2023-04-30T08:19:52+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/"},"wordCount":520,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Code-Highlight-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/","url":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/","name":"How to Use Elementor Code Highlight Widget [PRO] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Code-Highlight-Widget.jpg","datePublished":"2021-06-17T13:16:05+00:00","dateModified":"2023-04-30T08:19:52+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Code-Highlight-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Code-Highlight-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-code-highlight-widget-pro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use Elementor Code Highlight Widget [PRO]"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1566"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1566\/revisions"}],"predecessor-version":[{"id":9586,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1566\/revisions\/9586"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9723"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}