Skip to content

Instantly share code, notes, and snippets.

@thefuxia
Created June 1, 2017 08:42
Show Gist options
  • Save thefuxia/10e64f48d5a685b1de0e2404d0e9a4c3 to your computer and use it in GitHub Desktop.
Save thefuxia/10e64f48d5a685b1de0e2404d0e9a4c3 to your computer and use it in GitHub Desktop.
WordPress plugin for highlight.js
<?php # -*- coding: utf-8 -*-
/**
* Plugin Name: T5 Highlight
* Description: Use highlight.js on front end. Mark code with <code>&lt;pre class="language-php"&gt;&lt;code&gt;your code&lt;/code&gt;&lt;/pre&gt;</code>
* Version: 31.10.14
* Required: 4.0
* Author: Thomas Scholz
* Author URI: http://toscho.de
* License: MIT
* License URI: http://www.opensource.org/licenses/mit-license.php
*/
namespace T5\Frontend\Highlight;
/**
* Class Highlight
*
* @version 2014.10.31
* @author toscho
*/
class Highlight
{
/**
* @type string
*/
private $highlight_url;
/**
* @param string $plugin_file Path to main file
*/
public function __construct( $plugin_file )
{
$this->highlight_url = plugin_dir_url( $plugin_file ) . 'h/';
}
/**
* @wp-hook wp_loaded
* @return void
*/
public function setup()
{
$this->register();
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
add_action( 'wp_print_footer_scripts', array( $this, 'initialize' ), 11 );
}
/**
* Registers script and stylesheet
*
* @wp-hook wp_loaded
* @return void
*/
public function register()
{
$js_url = $this->highlight_url . 'highlight.pack.js';
wp_register_script( 'highlight', $js_url, array(), FALSE, TRUE );
$css_url = $this->highlight_url . 'styles/hybrid.css';
wp_register_style( 'highlight', $css_url );
}
/**
* Enqueues script and stylesheet
*
* @wp-hook wp_enqueue_scripts
* @return void
*/
public function enqueue()
{
wp_enqueue_script( 'highlight' );
wp_enqueue_style( 'highlight' );
}
/**
* Initializes the script
*
* @wp-hook wp_print_footer_scripts
* @return void
*/
public function initialize()
{
?><script>hljs.initHighlightingOnLoad();</script><?php
}
}
is_admin() || add_action( 'wp_loaded', array( new Highlight( __FILE__ ), 'setup' ) );
@thefuxia
Copy link
Author

thefuxia commented Jun 1, 2017

This doesn't work out of the box, you need to add some steps:

  1. Put this file into a directory.
  2. Go to https://highlightjs.org/download/ and create a custom package with languages you need. The smaller the better.
  3. Put the downloaded package into a subdirectory named h/.
  4. Upload the plugin directory to you WordPress plugin directory, and enable it per backend.

That's it.

@LindaLawton
Copy link

Note directory h not h/

Worked like a charm.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment