JP Janssen

Mixed HTML+CSS+JS syntax highlighting for WP?

Problem: Is there any WordPress plugin that displays CSS and JS inside HTML code?

Status: Not solved! Partial solution only,

Background: I want WordPress to display mixed HTML+CSS+JS with colored syntax similar to this example from Brackets:

Brackets understands that lines 7-11 are CSS, and lines 21-28 are JS.

I tried the popular plugins SyntaxHighlighter Evolved and Enlighter.

Neither did the job correctly, but the latter had a better UX in the Gutenberg editor IMO.

Here’s what the code looks like with Enlighter’s “Generic Highlighting” in the Atomic theme:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <style>
      body {
        background-color: lightblue;
      }
      button {
       width: 50%; 
      }
    </style>
  </head>
  <body>
    <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
      Click me to display Date and Time.</button>
    <p id="demo"></p>
  </body>
  <script>
    var x = myFunction(4, 3);
    document.getElementById("demo").innerHTML = x;
    function myFunction(a, b) {
      for (var i = 0; i <= 10; i++) {
        a += i - 5;
      }
      return a * b;
    }
  </script>
</html>

If I instead define the code as HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <style>
      body {
        background-color: lightblue;
      }
      button {
       width: 50%; 
      }
    </style>
  </head>
  <body>
    <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
      Click me to display Date and Time.</button>
    <p id="demo"></p>
  </body>
  <script>
    var x = myFunction(4, 3);
    document.getElementById("demo").innerHTML = x;
    function myFunction(a, b) {
      for (var i = 0; i <= 10; i++) {
        a += i - 5;
      }
      return a * b;
    }
  </script>
</html>

And here’s what it looks like if I choose JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <style>
      body {
        background-color: lightblue;
      }
      button {
       width: 50%; 
      }
    </style>
  </head>
  <body>
    <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
      Click me to display Date and Time.</button>
    <p id="demo"></p>
  </body>
  <script>
    var x = myFunction(4, 3);
    document.getElementById("demo").innerHTML = x;
    function myFunction(a, b) {
      for (var i = 0; i <= 10; i++) {
        a += i - 5;
      }
      return a * b;
    }
  </script>
</html>

Which of the above gives the best result? You decide!

A workaround is to chop the code into separate HTML, CSS and JS blocks:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <style>
      body {
        background-color: lightblue;
      }
      button {
       width: 50%; 
      }
    </style>
  </head>
  <body>
    <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
      Click me to display Date and Time.</button>
    <p id="demo"></p>
  </body>
  <script>
    var x = myFunction(4, 3);
    document.getElementById("demo").innerHTML = x;
    function myFunction(a, b) {
      for (var i = 0; i <= 10; i++) {
        a += i - 5;
      }
      return a * b;
    }
  </script>
</html>

This is a bit of a pain. The gap between the blocks isn’t that pretty either.

If you know a better solution/plugin, I’d be happy to know 🙂

Categories: Uncategorized

Tags: , , ,