Code Highlighter

Adds syntax highlighting to pre code blocks using highlight.js. Inserts a language selector on each code block and re-highlights on edit. No toolbar button — enable the plugin and load highlight.js.

Requires highlight.js on the page (window.hljs). Works on code blocks created in the editor or pasted from clipboard.

Load the bundle

<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/code-highlighter/code-highlighter.js"></script>

Initialization

const app = Redactor('#entry', {
    plugins: ['codeHighlighter'],
    content: '<pre><code class="language-javascript">const greeting = "Hello";\n\nconsole.log(greeting);</code></pre>'
});

Options

languages (string[])
- default ['css', 'html', 'javascript', 'scss']
- Languages shown in the per-block language selector.

Redactor('#entry', {
    plugins: ['codeHighlighter'],
    codeHighlighter: {
        languages: ['javascript', 'typescript', 'html', 'css', 'json']
    }
});

Language strings

This plugin does not define language strings.

Events

This plugin does not emit events.

API

This plugin does not expose a public API.