Elementor Source Code Widget
If you are writing a tutorial or documentation and want to show code snippets to your visitors, you can use this widget to display them in the text. The HT Mega Elementor Source Code widget helps you to show code snippets in a user-friendly way
Elementor Source Code Widget
With the Source Code widget, you can display any language code snippet on your website
var jp = 'Red';
$('.target').on('click', function() {
$('.container').stop().addClass('active');
});
$('.remove').on('click', function() {
$('.container').stop().removeClass('active');
});
$('.addClass').on('click', function() {
$('.container').stop().addClass('active');
});
$('.remove').on('click', function() {
$('.container').stop().removeClass('active');
});
$('.target').on('click', function() {
$('.container').stop().addClass('active');
});
HT Mega Source Code Widget
The Source Code widget allows you to display any language code snippet
/* Typography Style */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: "Montserrat", sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.75;
position: relative;
visibility: visible;
overflow-x: hidden;
color: #696969;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: top center;
}
.container {
max-width: 1200px;
}
.bg-gray {
background-color: #F6F6F6;
}
.section-space-ptb {
padding: 120px 0 90px;
}
.section-space-pt {
padding-top: 120px;
}
.section-space-pb {
padding-bottom: 90px;
}
Elementor Source Code Addon
Source Code widget helps you to show code snippets in your website
/* Typography Style */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: "Montserrat", sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.75;
position: relative;
visibility: visible;
overflow-x: hidden;
color: #696969;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: top center;
}
.container {
max-width: 1200px;
}
.bg-gray {
background-color: #F6F6F6;
}
.section-space-ptb {
padding: 120px 0 90px;
}
.section-space-pt {
padding-top: 120px;
}
.section-space-pb {
padding-bottom: 90px;
}
Source Code Addon for Elementor
Source Code widget helps you to show code snippets in a user-friendly way
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, Hero Text 1</h1>
<h2>Hello, Hero Text 2</h2>
<h3>Hello, Hero Text 3</h3>
<h4>Hello, Hero Text 4</h4>
<h5>Hello, Hero Text 5</h5>
<h6>Hello, Hero Text 6</h6>
<p>Lorem ipsum dolor sit amet consectetur,
autem rem quam hic reprehenderit exercitationem nemo eius? Sit!</p>
</body>
</html>
HT Mega Source Code Widget
Using the Source Code widget, you can display code snippets on your website
/* Typography Style */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: "Montserrat", sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.75;
position: relative;
visibility: visible;
overflow-x: hidden;
color: #696969;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: top center;
}
.container {
max-width: 1200px;
}
.bg-gray {
background-color: #F6F6F6;
}
.section-space-ptb {
padding: 120px 0 90px;
}
.section-space-pt {
padding-top: 120px;
}
.section-space-pb {
padding-bottom: 90px;
}
Elementor Source Code Element
Show code snippets on your website with Source Code widget
// How to change excerpt length
function mytheme_custom_excerpt_length( $length ) {
return 20;
}
add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
Explore More Widgets
Get HT Mega Pro
Get up to 50% discount, Hurry-Up Limited Offer.
One Year
One Time