Add Highlight.js to GeneratePress

von

Prompt:

Adding highlight.js to WordPress with Generatepress theme

Response:

Adding Highlight.js to your WordPress site using the GeneratePress theme can be achieved by using the GeneratePress Elements module (Hook Element) or a dedicated Code Snippets plugin. Using either of these methods allows you to safely inject the necessary HTML/JavaScript without modifying the core theme files, ensuring your changes persist after theme updates.

Here are the general steps, focusing on the most common method for GeneratePress: the Hook Element (requires GeneratePress Premium):

This method is the cleanest way to add custom scripts sitewide in GeneratePress Premium.

  1. Activate Elements Module: Ensure the Elements module is activated in your WordPress dashboard under Appearance > GeneratePress.
  2. Create a New Hook Element:
    • Go to Appearance > Elements and click Add New.
    • Choose Hook as the Element type and give it a descriptive title (e.g., „Highlight.js Setup“).
  3. Insert the CDN Code: In the Hook content area, paste the required CDN links for the Highlight.js CSS theme and JavaScript library. You must choose a theme (like ‚default.min.css‘ in this example) from the Highlight.js library.
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    • Note: Always check the Highlight.js official website or CDN provider (like cdnjs) for the latest version numbers to use instead of 11.7.0.
  4. Set the Hook Location:
    • Under the Settings tab, set the Hook to wp_head. This ensures the CSS and script files are loaded early.
  5. Set the Display Rules:
    • Under the Display Rules tab, set the Location to Entire Site (or a more specific location if you only want highlighting on certain posts/pages).
  6. Add the Initialization Script: You’ll need a separate Hook Element for the initialization script to run after the main script has loaded, or you can add it to the footer using a different Hook.
    • Option A (Separate Element/Footer): Create a second Hook Element, paste <script>hljs.highlightAll();</script>, set the Hook to wp_footer, and set the Display Rules to Entire Site. Loading scripts in the footer is generally better for performance.
    • Option B (Single Element/Head – Less Recommended): You could add <script>hljs.highlightAll();</script> immediately after the CDN script tags in the first Element, but setting the hook to wp_head might cause issues if the script runs before your code blocks are loaded in the page’s body. The two-hook approach (scripts in head, activation in footer) is safer.
  7. Publish: Click Publish to enable the elements.

🔌 Method 2: Using a Code Snippets Plugin

If you prefer not to use the Hook Element or are not using GeneratePress Premium, a plugin like WPCode (formerly Insert Headers & Footers) or Code Snippets offers a user-friendly and safe alternative to insert the required code.

  1. Install the Plugin: Install and activate a code snippets plugin (e.g., WPCode).
  2. Insert Header Code:
    • Navigate to the plugin’s settings section (often called Headers & Footers or Code Snippets).
    • Paste the CDN links for the CSS and JavaScript (from Step 3 above) into the Header section.
  3. Insert Footer Code:
    • Paste the initialization script (<script>hljs.highlightAll();</script>) into the Footer section.
  4. Save Changes: Save the plugin settings.

After implementing either method, any code blocks you create in the WordPress editor (using the <pre><code> structure, which the default Gutenberg Code Block uses) should now be styled and highlighted by Highlight.js.

You can see how to Add JavaScript to a GeneratePress Website using the Hook Element feature in this video.