Syntax Highlighter for Elementor give you the opportunity to display and share your source code with the communities of WordPress and Elementor. This component allows to automatic colorize the syntax of many languages while preserving its formatting and highlighting specific keywords.
The syntax highlighter is using the robust library ‘Prism’ and associated themes.
Pay attention: you have to desactivate other plugins who are using ‘prism.js’ and unset the corresponding themes.
Display the source code with the right language
Select the language
You have to choose the appropriate language among fourteen languages.
These are the languages commonly used with WordPress. However, if there are specific requests, the list can be changed
Embed the code
Paste the code in the expected field. You can change the indentation like in all codes editor
Styling the component
Choose the theme
Highlight your code by selecting the best rendering between eight themes under tab Style
Language PHP + Default theme
The font-size has been reducted
<?php if($has_pagging && $the_query->post_count < $the_query->found_posts) : ?>
<div class="al-pagination" id="<?php echo $pagination_id; ?>">
<div class="al-pagination-next">
<a href="#"><?php echo $button_text; ?></a>
</div>
<div class="al-page-load-status">
<div class="infinite-scroll-request eac__loader-spin"></div>
<p class="infinite-scroll-last"><?php _e("Plus d'article", 'eac-components'); ?></p>
<p class="infinite-scroll-error"><?php _e("Aucun article à charger", 'eac-components'); ?></p>
</div>
</div>
<?php endif;
wp_reset_postdata();
}
$output = ob_get_contents();
ob_end_clean();
echo $output;Different source code examples you can implement
Language Javascript ES6 features + Theme Oceanic
// Regex "y" and "u" flags
var a = /[a-zA-Z]+/gimyu;
// for..of loops
for(let x of y) { }
// Modules: import
import { foo as bar } from "file.js"
// Template strings
`Only on ${y} one line`
`This template string ${x} is on
multiple lines.`
`40 + 2 = ${ 40 + 2 }`
`The squares of the first 3 natural integers are ${[for (x of [1,2,3]) x*x].join(', ')}`Language CSS + Theme Coy Line numbering is enabled
.site-header {
background-image: none !important;
background-color: #350d00 !important;
min-height: 150px !important;
}
.site-branding .main-title a,
.site-branding .site-description {
color: #b32d00 !important;
}
.main-navigation,
.main-navigation ul ul,
.main-navigation .main-nav .menu-item-has-children > a {
background-color: #591600 !important;
}
@media screen and (max-width:768px) {
.site-header {
height: 200px !important;
min-height: 200px !important;
}
.entry-header .entry-title {
font-size: 20px;
}
}
@media screen and (max-width:360px) {
.site-header {
height: 220px !important;
min-height: 220px !important;
}
}Language JSON + Theme Okaidia
{
"title": "Répartition de la population par sexe/âge. 1er janvier 2020, France (INSEE)",
"labels": "Nombre d'hommes,Nombre de femmes,Ensemble",
"datasets":
[{
"label": "2019",
"data": "360,346.3,706.3"
}, {
"label": "1999",
"data": "398.8,379.7,778.5"
}, {
"label": "1984",
"data": "396.4,421.1,817.6"
}, {
"label": "1969",
"data": "439.3,449.5,888.9"
}, {
"label": "1959",
"data": "407,438.8,845.8"
}, {
"label": "1955",
"data": "377.4,421.9,799.4"
}, {
"label": "1919",
"data": "3.5,18.3,21.8"
}],
"options": {
"stacked": "1",
"stepped": "0",
"x_axis": {
"title": "Année de naissance / Sexe"
},
"y_axis": {
"title": "En milliers",
"suffix": ""
},
"y_axis2": {
"display": "0",
"title": "",
"suffix": ""
}
}
}
Language HTML + Theme Funky
<!DOCTYPE html>
<html lang="en">
<head>
<script>
// Just a lil’ script to show off that inline JS gets highlighted
window.console && console.log('foo');
</script>
<meta charset="utf-8" />
<link rel="icon" href="assets/favicon.png" />
<title>Prism</title>
<link rel="stylesheet" href="assets/style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<script src="assets/prefixfree.min.js"></script>
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="https://www.google-analytics.com/ga.js" async></script>
</head>
<body>Language XML + Theme Tomorrow-night
The height of the the widget is reduced
<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xml:base="https://elementor-addon-components.com/">
<document>
<name>Elementor Addon Components</name>
<homepage>https://elementor-addon-components.com/</homepage>
<new_version>1.6.6</new_version>
<download_url>https://elementor-addon-components.com/xxx.zip</download_url>
<requires>5.0</requires>
<tested>5.5.3</tested>
<requires_php>7.0</requires_php>
<requires_elementor>2.9.0</requires_elementor>
<tested_up_elementor>3.2.0-dev1</tested_up_elementor>
<active_installs>1396</active_installs>
</document>
</rss>Language SQL + Theme Twilight
SELECT post_type, post_title, post_id, meta_key, meta_value
FROM {$wpdb->prefix}posts,{$wpdb->prefix}postmeta
WHERE post_type NOT IN ('post','page','attachment','nav_menu_item')
AND ID = post_id
AND post_title != ''
AND post_status = 'publish'
AND meta_key NOT LIKE '\\_%'
AND meta_key NOT LIKE 'sdm_%'
AND meta_value IS NOT NULL
AND meta_value != ''
ORDER BY meta_keyLanguage MD + Theme Tomorrow-night
Line numbers activated Font-size 1.2em
# Title 1
## Title 2
### Title 3
#### Title 4
##### Title 5
###### Title 6
</code></pre>
**Bold on
multiple lines**
*Italic on
multiple lines too*
__It also works with underscores__
_It also works with underscores_
<h2>Links</h2>
<pre><code>
[Prism](http://www.prismjs.com)
[Prism](http://www.prismjs.com "Prism")
</code></pre>Language SVG + Theme Dark
Typography .7em Height 400px Modified background color
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 170">
<path fill="#fff" d="M55.37 131.5H48.4v9.13h6.97c1.67 0 2.92-.4 3.78-1.22.85
-.8 1.28-1.92 1.28-3.33s-.43-2.54-1.28-3.35c-.86-.8-2.12-1.2-3.78-1.2m29.52
6.4c.3-.53.47-1.2.47-2.04 0-1.35-.45-2.4-1.37-3.2-.92-.76-2.14-1.15-3.65
-1.15H72.9v8.52h7.32c2.26 0 3.82-.7 4.67-2.1M100 0L0 170h200L100 0M60.86
141.03c-1.3 1.22-3.1 1.84-5.33 1.84H48.4v7.55H46v-21.2h9.53c2.24 0 4.02.63
5.34 1.87 1.3 1.23 1.96 2.88 1.96 4.95 0 2.1-.66 3.75-1.97 4.98m24.5 9.4l
-5.1-8.14h-7.37v8.12h-2.4v-21.2h10.14c2.15 0 3.88.6 5.18 1.8 1.3 1.18 1.95
2.8 1.95 4.84 0 2.64-1.1 4.44-3.3 5.4-.6.28-1.22.5-1.82.6l5.57 8.56h-2.85m
13.43 0h-2.4v-21.2h2.4v21.2m23.56-1.32c-1.48 1.05-3.53 1.57-6.16 1.57-2.96 0
-5.23-.6-6.78-1.85-1.4-1.1-2.18-2.7-2.37-4.74h2.5c.08 1.45.78 2.56 2.1 3.33
1.16.67 2.68 1 4.58 1 3.97 0 5.95-1.25 5.95-3.74 0-.86-.35-1.53-1.07-2.02-.7
-.5-1.6-.9-2.68-1.2-1.07-.33-2.24-.63-3.48-.9s-2.4-.65-3.5-1.08-1.97-1.02
-2.68-1.73c-.7-.72-1.07-1.68-1.07-2.9 0-1.73.65-3.13 1.97-4.22 1.32-1.08
3.32-1.62 6-1.62 2.67 0 4.75.6 6.23 1.85 1.34 1.1 2.05 2.5 2.14 4.2h-2.46c
-.22-1.76-1.35-2.92-3.4-3.5-.72-.2-1.62-.3-2.7-.3s-1.98.1-2.72.35c-.74.25
-1.3.55-1.7.9-.42.35-.7.74-.83 1.17s-.2.88-.2 1.36c0 .5.2.93.62 1.33s.96.75
1.65 1.03c.68.28 1.46.52 2.33.73.88.2 1.77.43 2.67.65.9.22 1.8.48 2.68.77.87
.3 1.65.65 2.33 1.1 1.53.96 2.28 2.27 2.28 3.94 0 2-.74 3.5-2.22 4.55m28.84
1.32v-17.54l-7.84 10.08-7.97-10.08v17.54H133v-21.2h2.78l7.58 10.06 7.45
-10.05h2.8v21.2h-2.4"/>
</svg>