Source Code

Display 50+ computer programming language codes (like HTML, CSS, PHP, Java, JavaScript) with Exclusive Addons WordPress Source Code Widget on your documentation site or tutorial site where you want to share the source code with others.

Features

Trendy and Elegant Looking Sliders 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 Addons as your complete website design solution.
Enjoy amazing & fully customizable widgets to make your stunning WordPress site.