Elementor Syntax Highlighter - Blog

Are you looking to display a block of code without running that code? Elementor is an excellent page builder, packed with loads of functionality, but one thing they have yet to provide is a way to display source coding in your write-up without executing the code. Luckily, Elementor Syntax Highlighter is here to save the day.

Above is an example of a solid solution currently available. There are long-hand methods to display your code within your text, but you wouldn't be reading this blog if you planned to write out your code anyways. Luckily, we've run into a free plugin solution. Meet Elementor Syntax Highlighter.

Setup Elementor Syntax Highlighter Plugin

Stating that this plugin is simple to setup is an understatement folks… You'll have the ability to display code snippets in under 3 to 4 minutes total on your website. With all that said, here are the steps necessary to download this Elementor compatible Code Highlighter!

1On your Dashboard, hover over 'Plugins' and click 'Add New'
2Download Elementor Syntax Highlighter
3Activate the Plugin and click 'Edit with Elementor' on the page you want these code snippets to go
4Drag the 'Highlighted Code' widget onto the page. This widget can be found under your 'Basic' widgets
5Choose the coding language and you're done!

Tap a step to jump to it.

Step-by-step help

Need a little more of a walk-through to understand these steps? No problem! Click the list item above to go directly to the section you need help with.

On your Dashboard, hover over 'Plugins' and click 'Add New'

Download Elementor Syntax Highlighter

Elementor Syntax Highlighter on WordPress.org

Please make sure that once you've installed the Plugin that you also Activate it. Without pressing Activate, the Highlighted Code widget won't appear.

Activate the Plugin and click 'Edit with Elementor' on the page you want these code snippets to go

Drag the 'Highlighted Code' widget onto the page. This widget can be found under your 'Basic' widgets

Highlighted Code widget in the Elementor Basic widgets panel

Choose the coding language and you're done!

Please note: Select 'Markup' as the language if you would like the code highlighter to display HTML.

Here is an example explaining how to create a basic number range slider, displaying the HTML, CSS and JavaScript sections necessary to replicate it. This will allow for people to visit your page, copy the code, and use it how they wish!

The finished slider

Custom Range Slider

Drag the slider to display the current value.

Value: 50

Insert HTML for Slider

HTML

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

Now Share Your CSS

CSS

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

Finally Share the JavaScript!

JavaScript

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

Congrats, you did it!

If you made it this far, congratulations! You managed to do it and you can now begin sharing your code snippets throughout your content in a well-styled, simple to use manner. I hope this helps and if it does, it would mean a lot if you subscribed to my YouTube Channel where we discuss all things Elementor!

Need help?

Do you still need help? Our development team is able to assist you with all of your WordPress needs. Contact us today and let's resolve your issues!

Elementor Syntax Highlighter – Display Code Without Executing

The one you want: Highlighted Code