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.

Below 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 ran into a free plugin solution. Meet Elementor Syntax Highlighter.

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

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-4 minutes total on your website. With all that said, here are the steps necessary to download this Elementor compatible Code Highlighter!

On your Dashboard, hover over 'Plugins' and click 'Add New'
Download Elementor Syntax Highlighter
Active 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
Choose the coding language and you're done!

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.

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

2.) Download Elementor Syntax Highlighter

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.

3.) Active the Plugin and click 'Edit with Elementor' on the page you want these code snippets to go

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

5.) 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!

Custom Range Slider

Drag the slider to display the current value.

Value:

Insert HTML for Slider

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

Now Share Your 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!

<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 style, 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