# Highlight (Marker) Button in the Block Toolbar

> Adds a "Highlight" button to the text formatting toolbar that wraps selected words in a tag with a marker-pen look, for emphasis in posts.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: block-editor, formatting, rich-text
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/highlight-format-button/

## Code

```php
add_action( 'enqueue_block_editor_assets', function () {
    wp_register_script( 'wpide-highlight-format', false, array( 'wp-rich-text', 'wp-block-editor', 'wp-element' ), '1.0', true );
    wp_enqueue_script( 'wpide-highlight-format' );
    wp_add_inline_script( 'wpide-highlight-format', <<<'JS'
( function ( wp ) {
    var el = wp.element.createElement;
    wp.richText.registerFormatType( 'wpide/highlight', {
        title: 'Highlight',
        tagName: 'mark',
        className: 'wpide-highlight',
        edit: function ( props ) {
            return el( wp.blockEditor.RichTextToolbarButton, {
                icon: 'admin-customizer',
                title: 'Highlight',
                isActive: props.isActive,
                onClick: function () {
                    props.onChange( wp.richText.toggleFormat( props.value, { type: 'wpide/highlight' } ) );
                }
            } );
        }
    } );
} )( window.wp );
JS
    );
} );

$wpide_highlight_css = 'mark.wpide-highlight{background:linear-gradient(transparent 55%,#fde68a 55%);color:inherit;padding:0 .1em;}';

add_action( 'wp_enqueue_scripts', function () use ( $wpide_highlight_css ) {
    wp_register_style( 'wpide-highlight', false, array(), '1.0' );
    wp_enqueue_style( 'wpide-highlight' );
    wp_add_inline_style( 'wpide-highlight', $wpide_highlight_css );
} );

add_action( 'enqueue_block_assets', function () use ( $wpide_highlight_css ) {
    if ( is_admin() ) {
        wp_register_style( 'wpide-highlight-editor', false, array(), '1.0' );
        wp_enqueue_style( 'wpide-highlight-editor' );
        wp_add_inline_style( 'wpide-highlight-editor', $wpide_highlight_css );
    }
} );
```

## Notes

Find it in the toolbar's "More" (chevron) menu. Change the color in the inline CSS.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Highlight (Marker) Button in the Block Toolbar" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/