Highlighter

This plugin highlights the code inside pre tags in the editor and uses highlight.js for it.

<h2>Exploring the mysteries of space</h2>
<p>Space, the final frontier, stretches infinitely beyond the confines of Earth, a vast expanse of darkness speckled with stars, planets, and <b>galaxies</b>. It is a place of profound mystery and beauty, where the laws of physics manifest in ways that challenge our understanding. The cosmos is <a href="https://example/com">a cosmic dance</a> of celestial bodies moving in the silent echo of the universe, from the fiery birth of stars in nebulae to the enigmatic pull of black holes.</p>
<pre><code class="language-javascript no-highlight">function sayHello(name) {
    console.log("Hello, " + name + "!");
}

const user = "Alex";
sayHello(user);
</code></pre>
<h2>Humanity's Journey Beyond Earth</h2>
<p>Exploring space has pushed humanity to its limits, revealing not just the universe's grandeur, but also the fragility of our own planet. Satellites orbiting Earth provide crucial data for communication, weather forecasting, and global positioning, while telescopes peer deep into the cosmos, uncovering the universe's age and composition. Each discovery in space leads us to new questions about our place in the universe, driving our insatiable curiosity to explore the unknown.</p>

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Redactor</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />

        <!-- highlight.js -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactor.js"></script>
        <script src="/your-folder/plugins/highlighter/highlighter.js"></script>

        <!-- call -->
        <script>
        Redactor('#entry', {
            plugins: ['highlighter']
        });
        </script>
    </body>
</html>

Usage

In addition to the plugin, you need to connect highlight.js files to the page:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

In the editor, use only pre tags with a code tag inside for the highlighting to work correctly:


<pre><code></code></pre>

You can also use a code tag specifying the highlighting language:


<pre><code class="language-javascript"></code></pre>

By default, the plugin has a setting to select the following highlighting languages:


['css', 'html', 'javascript', 'scss']

You can specify your own set of languages to select, for example like this:


Redactor('#entry', {
    plugins: ['highlighter'],
    highlighter: {
        languages: ['css', 'html', 'javascript', 'scss', 'php', 'python']
    }
});