Code Block Highlighting

Release 3.3.0 and above.

When the code highlighting plugin is applied, calling getPublishingHtml() in the editor returns HTML in a form that can be highlighted.

How to Use

Loading Plugin Files

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of codeBlockHighlighter.min.js"></script>

Applying Code Highlighting Theme CSS

Apply the code highlighting CSS to the view page. (Apply one of the CSS themes available in plugins/codeBlockHighlighter/themes from the package.)

You can get more styles at https://github.com/highlightjs/highlight.js/tree/main/src/styles.

var synapEditorConfig = {
    ...
    /**
     * Adds the style url to the preview.
     */
    'editor.preview.style.urls': [
        'url of code highlighting theme.min.css' // ex) '/dist/plugins/codeBlockHighlighter/themes/atom-one-light.min.css'
    ]
    ...
};

Editor Application Example

Code block highlighting example

Theme Application Example

Theme not applied: highlighting is not displayed

Theme not applied

<table> <thead> <tr><th><code>atom-one-light</code> theme applied</th><th><code>atom-one-dark</code> theme applied</th></tr> </thead> <tbody> <tr> <td>

atom-one-light theme

</td> <td>

atom-one-dark theme

</td> </tr> </tbody> </table>