Code highlight Widget



Introducing

Code Highlight

Elementor’s Code Highlight widget enables you to use syntax highlighting to present code examples in a readable, easy to copy format.

Javascript

				
					const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt += value + "<br>"; 
}

Html

				
					<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Css

				
					body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Php

				
					<?php
// single space between $xyz, =, 11, +, 12
$xyz = 11 + 12;
echo $xyz.'<br />';
// tabs and spaces
$xyz =	 11	 +	 12;
echo $xyz;
?>

C++

				
					#include <iostream>

int main() {
    std::cout << "Hello World!";
    return 0;
}

React JSX

				
					function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);