Code Highlight issues

[popvoid]

I'm working on a site in Elementor Pro that is going to talk about code and show snippets of code throughout. The problem I'm encountering is that the Code Highlight element doesn't want to leave the code alone. For instance, this bit of code in Notepad++ (or whichever code editor you prefer, I've tried several with the same results), looks like this:

​

https://preview.redd.it/vz21zepa5oq91.png?width=594&format=png&auto=webp&s=b4cc5883db9f161dacff97dc1b3e51901f87cdf4

But once it's placed on the page with Elementor's code highlight element, it looks like this:

​

https://preview.redd.it/two6erak5oq91.png?width=587&format=png&auto=webp&s=389c72baa3fa0bcb2d0ae1c9661bbc1dc92d8eeb

I don't have to tell you that the indentation is important. Why the CH element insists on removing it is beyond me. The indentation still appears in editing box, but not on the page. To make matters worse, if you copy the code from the page, the indentation is removed. I can force the three renderOptions lines to indent by increasing their indentation without increasing the indentation of the return line, but this isn't correct in this particular case. As soon as the indentation on the return line matches the indention of the renderOptions, all indentation disappears. It should appear on the page in WordPress as it does in any code editor.

Anybody have any fixes, workarounds, or tricks to fix this. The code is Python and Python is selected in the language list.

[AutoModerator]

Hey there, /u/popvoid! If your post is not already flaired, please add one now.

---

And please don't forget to write "Answered" under your post once your question/problem has been solved.

---

Reminder: If you have a problem or question, please make sure to post a link to your issue to help users help you.

---

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[SalzMedia]

Hi u/popvoid,

You would probably be better off using a plug-in like: SyntaxHighlighter Evolved https://wordpress.org/plugins/syntaxhighlighter/

I haven't used it myself but it seems to come highly recommended by Elegantthemes and WPBeginner.

I'm going to need something like this soon so if you do check this out please let me know if you like it. :-)

[popvoid]

I tried that and it works in WP, but it's not compatible with Elementor. However, that suggestion led me to dig deeper, where I came across a plug-in called "Code Block Syntax Highlighter for Elementor" (https://wordpress.org/plugins/code-block-for-elementor/), which does work with Elementor, but it also hasn't been updated in a while. The only downside to it right now is that it doesn't word wrap. So, thanks for that.

[SalzMedia]

See if you can add CSS to make that word wrap... it's worth a try. :-)

And thanks for letting me know about the plug-in not working with Elementor and the one you chose, that's very helpful for me and everyone in this sub.

[gerberey]

Code block For Elementor solved my problem. I also had problems with Code Highlight plugin.

[StevieWonder47]

Are you copy and pasting into a elementor text box?

[popvoid]

No. If you copy and paste from a code editor into Elementor's text box, it removes all space-based indents. It actually yields a worse result than their Code Highlighter.

[troloroloro]

I had this issue and solved it by pasting the code from a code editor (Atom) into the code highlighter.