Get Exclusive Addons Now
Use Exclusive Elementor Addons as your complete website design solution.
Enjoy our amazing & fully customizable widgets to make your Wordpress site stunning.
Source Code
Take the worry out of displaying source codes with Exclusive Addons Source Code Widget. Display 50+ computer programming language codes (like HTML, CSS, PHP, Java, JavaScript) with WordPress Source Code on your documentation or tutorial site to share the source code with others.
Features
Trendy and Elegant looking Source Code widget with endless customizable options, you have never seen in Elementor before
- 7 different themes
- Source Code Box
- Copy Button
- Fully Responsive
Style 1
Html Code with Default Theme
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
Style 2
PHP code with "Dark Theme" and copy to clipboard button show on hover
<?php
$numbers = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
$sumOdd = 0;
foreach ($numbers as $index=>$value) {
if ($value % 2 == 0)
echo "$value <br>";
} else {
$sumOdd += $value
}
}
echo $sumOdd;
?>
Style 3
JavaScript code with "Funky Theme" and without copy to clipboard button
<script>
function multiple(x) {
function fn(y)
{
return x * y;
}
return fn;
}
var triple = multiple(3);
document.getElementById("p1").innerHTML = triple(2);
document.getElementById("p2").innerHTML = triple(3);
</script>
Style 4
Python code with "Okaidia Theme" and copy to clipboard button position bottom right center
# Prints out 0,1,2,3,4 and then it prints "count value reached 5"
count=0
while(count<5);
print(count)
count +=1
else:
print("count value reached %d" %(count))
# Prints out 1,2,3,4
for i in range(1, 10):
if(i%5==0):
break
print(i)
else:
print("this is not printed because for loop is terminated because of break but not due to fail in condition")
Style 5
c++ code with "Twilight Theme"
Code
// C++ program for implementation of Bubble sort
#include <bits/stdc++.h>
using namespace std;
void swap(int *xp, int *yp)
{
int temp = *xp;
*xp = *yp;
*yp = temp;
}
// A function to implement bubble sort
void bubbleSort(int arr[], int n)
{
int i, j;
for (i = 0; i < n-1; i++)
// Last i elements are already in place
for (j = 0; j < n-i-1; j++)
if (arr[j] > arr[j+1])
swap(&arr[j], &arr[j+1]);
}
/* Function to print an array */
void printArray(int arr[], int size)
{
int i;
for (i = 0; i < size; i++)
cout << arr[i] << " ";
cout << endl;
}
// Driver code
int main()
{
int arr[] = {64, 34, 25, 12, 22, 11, 90};
int n = sizeof(arr)/sizeof(arr[0]);
bubbleSort(arr, n);
cout<<"Sorted array: \n";
printArray(arr, n);
return 0;
}
// This code is contributed by rathbhupendra
Output
Sorted array:
11 12 22 25 34 64 90
Style 6
Java code with "Coy Theme"
public class GCD {
public static void main(String[] args) {
int n1 = 81, n2 = 153, gcd = 1;
for(int i = 1; i <= n1 && i <= n2; ++i)
{
// Checks if i is factor of both integers
if(n1 % i==0 && n2 % i==0)
gcd = i;
}
System.out.printf("G.C.D of %d and %d is %d", n1, n2, gcd);
}
}
Style 7
Perl code with "Solarizedlight Theme"
#!/usr/bin/perl
=Assigning values to
variable $b and $c
=cut
$b = 10;
$c = 30;
=Performing the operation
and printing the result
=cut
$a = $b + $c;
print "$a";
Style 8
SASS code with "Tomorrow Theme"
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Style 9
React JSX code
import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
<div>
<h1>I am a Header.</h1>
<h1>I am a Header too.</h1>
</div>
);
ReactDOM.render(myelement, document.getElementById('root'));
Style 10
React JSX code
import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
<div>
<h1>I am a Header.</h1>
<h1>I am a Header too.</h1>
</div>
);
ReactDOM.render(myelement, document.getElementById('root'));