Warning: include_once(/home4/barak/public_html/wp-content/sunrise.php): failed to open stream: No such file or directory in /home4/barak/public_html/wp-includes/ms-settings.php on line 38

Warning: include_once(): Failed opening '/home4/barak/public_html/wp-content/sunrise.php' for inclusion (include_path='.:/opt/php71/lib/php') in /home4/barak/public_html/wp-includes/ms-settings.php on line 38
Adding syntax highlighter to Wordpress - Temp3.net Web DesignTemp3.net Web Design

Temp3.net Web Design

Website design, SEO and Marketing FREE Tips and Techniques

By

Adding syntax highlighter to WordPress

So in effort of “Getting back to business”, I have been putting together a lesson about HTML and CSS. I am about to finish the lesson and post it in the next few days. One of the tools I was looking for is a syntax highlighting feature. As any coder would tell you, post code online has become easier in recent years since we can add line numbers and highlight the syntax of a language. For example, here are two snippets of the same code?

Without a syntax highlighter:



<!DOCTYPE html>
<html>
  <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

  </body>
</html>

With a syntax highlighter:

<!DOCTYPE html>
<html>
  <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

  </body>

</html>

Code thanks to w3schools.com.

Which one would you choose? Obviously, the syntax highlighter has advantages, even if you know nothing about the language. So I wanted to add this feature in order to be more coherent in my lessons. I was very disappointed to learn that adding syntax highlighting to a WordPress blog is not as easy. After going through a dozen of different ones I settled on SyntaxHighlighter Evolved. Using the plugin is painless, you install and activate it like any other plugin. When writing a post you encapsulate the code with [lang] cods [/lang]. Simple enough. The only issue was that it was not working using a visual editor. It order to get it working correctly with HTML code I had to edit the post within the HTML editor of the post. Also, because I am displaying HTML, once I added the code, switching to visual mode will try to interrupt the markup. DO NOT SWITCH BACK TO VISUAL . That will ruin your work and I am not responsible if you lose your work. Other than those two issues that came up only with HTML, great plugin. Highly recommend for anyone who needs to post online code on their WordPress site.

SyntaxHighlighter Evolved website.

  • Guest

    Thank you very much! I was looking for how to ad code to my WordPress site I have been trying to get up.

    • temp3

      You are very welcome

Powered by WP Robot