Cambiar la apariencia del texto de código corto dentro del editor

¿Es posible cambiar la apariencia de los códigos cortos en el editor o de alguna manera hacer que sea más distinguible del texto circundante?

Por ejemplo, si el contenido de una publicación es así ...

Sitio de referencia sobre Lorem Ipsum, que proporciona información sobre sus orígenes, así como un generador de Lipsum aleatorio. Sitio de referencia sobre Lorem Ipsum, que proporciona información sobre sus orígenes, así como un generador de Lipsum aleatorio. [Shortcode] asfdasfd [/ shortcode] Sitio de referencia acerca de Lorem Ipsum, dando información sobre sus orígenes, así como un generador aleatorio de Lipsum. Sitio de referencia sobre Lorem Ipsum, dando información sobre sus orígenes, así como un generador aleatorio de Lipsum. Sitio de referencia sobre Lorem Ipsum, dando información sobre sus orígenes, así como un generador aleatorio de Lipsum.

... sería bueno si el shortcode dentro está en negrita para que pueda verse fácilmente así:

Puede agregar un complemento personalizado a WordPress y también al editor visual TinyMCE. La siguiente fuente es un ejemplo que funciona de manera simple y agrega una cadena antes y después de todo shortcode.

Uso

El shortcode encontrará a través de regex, relevante si lo necesita para diferentes shortcodes y diferentes marcas en esto. El script agrega contenido personalizado al shortcode, aquí <b>FB-TESTantes y después de la etiqueta de cierre y el contenido. También puede usar marcado, clases css para crear una visibilidad. Es importante que elimine este contenido al guardar la publicación, activada en el script PostProcess. Aquí ejecute el script y elimine el contenido personalizado a través de la función restoreShortcodes.

Pero, actualmente es así de simple, quizás no sea válido para cada requisito. Tal vez debería almacenar el shortcode en init y restaurar con esta variable almacenada.

Captura de pantalla

Vea la captura de pantalla como ejemplo para comprender el resultado.

Fuente

La fuente necesita esta estructura de directorios para usarla:

-- shortcode-replace
 |--php file
 |--assets
   |-- js
     |-- js file

Al principio, un pequeño archivo php, que incluye la fuente como complemento en el entorno wp. Déjelo en el directorio principal del complemento shortcode-replace.

<?php # -*- coding: utf-8 -*-

/**
 * Plugin Name:     Shortcode Replace
 * Plugin URI:      
 * Description:     
 * Version:         0.0.1
 * Text Domain:     
 * Domain Path:     /languages
 * License:         MIT
 * License URI:
 */

namespace FbShortcodeReplace;

if ( ! function_exists( 'add_action' ) ) {
    exit();
}

if ( ! is_admin() ) {
    return;
}

add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\initialize' );
function initialize( $page ) {

    if ( 'post.php' === $page ) {
        add_filter( 'mce_external_plugins', __NAMESPACE__ . '\add_tinymce_plugin' );
    }
}

function add_tinymce_plugin( $plugins ) {

    if ( ! is_array( $plugins ) ) {
        $plugins = array();
    }

    $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '.dev' : '';
    $url     = plugins_url( '/assets/js/fb_shortcode_replace.js', __FILE__ );

    $plugins = array_merge( $plugins, array( 'fb_shortcode_replace' => $url ) );
    return $plugins;
}

Este archivo php carga un javascript como complemento en el editor visual. El complemento se cargará solo en las páginas de administración, solo en las páginas con cadena post.php. Consulte if ( 'post.php' === $page ) {.

La siguiente fuente es el archivo javascript, llamado fb_shortcode_replace.js. Déjelo en el directorio assets/js/, dentro del directorio de complementos de este complemento.

tinymce.PluginManager.add( 'fb_shortcode_replace', function( editor ) {

    var shortcode = /\[.+\]/g;
    var additional_before = '<b>FB-TEST';
    var additional_after = 'FB-TEST</b>';

    function ifShortcode( content ) {

        return content.search( /\[.+\]/ ) !== -1;
    }

    function replaceShortcodes( content ) {

        return content.replace( shortcode, function( match ) {
            return html( match );
        } );
    }

    function restoreShortcodes( content ) {

        content = content.replace( additional_before, '' );
        content = content.replace( additional_after, '' );
        return content;
    }

    function html( data ) {

        console.log( data );
        return additional_before + data + additional_after;
    }

    editor.on( 'BeforeSetContent', function( event ) {

        // No shortcodes in content, return.
        if ( ! ifShortcode( event.content ) ) {
            return;
        }

        event.content = replaceShortcodes( event.content );
    } );

    editor.on( 'PostProcess', function( event ) {

        if ( event.get ) {
            event.content = restoreShortcodes( event.content );
        }
    } );
} );

Servicial

• Los comentarios sobre tus preguntas.
• https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

Sugerencia adicional

El plugin Raph convierte códigos cortos en html para verlo y simplificarlo para comprender el resultado. Quizás también sea útil en este contexto.