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

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'));                    
                
Shape

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.