Styles in H5P content
Using color in question set content
I am using H5P for language lessons and I want to use color for parts of words in the question content, eg. g<span class= 'my_red_style' >oo</span>d where the color red indicates a pronunciation guide.  Also, I want to use colored words in phrases to indicate grammar guides, eg. blue for a verb.
 I have combined the information of the following entrees:
* https://h5p.org/node/25236
* https://h5p.org/node/219802
to develop an approach that uses stylescombo to add the desired css functionality to H5P.
This works fine for me, although I have a question about some of my approaches that might be lost with H5P updates. Can anyone advise on the use of modified /h5p/h5p-editor-php-library/ckeditor/config.js and /h5p/h5p-editor-php-library/ckeditor/styles.js files. Is it possible to introduce these modifications in a different way?

Step 1 : Install Stylescombo
* Download stylescombo_4.16.2.zip from https://ckeditor.com/cke4/addon/stylescombo
* Install stylescombo folder with content in wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/plugins/
Step 1b: Resolve plugin dependencies. Stylescombo needs some other plugins to work, you will need to add these manually as well.
* Repeat step 1 for the following plugins:
o richcombo
o listblock
o floatpanel
o panel
o button
Step 1c: To see/check the code of your styles definitions in the H5P editor screen, it is convenient to have the sourcearea plugin available. 
* Repeat step 1 for the following plugin:
o sourcearea

Step 2. Modify line in  /h5p/h5p-editor-php-library/ckeditor/config.js
From: config.plugins += ',removeRedundantNBSP,customCodeHighlighter';

To:      config.plugins += ',removeRedundantNBSP,sourcearea,customCodeHighlighter';    


Step 3: Modify h5pmods-wordpress-plugin-master
* Add code block in h5pmods.php
function mymods_h5p_semantics_alter(&$semantics, $library_name = NULL) {
  // Check if this is the desired question type.
  if ($library_name !== 'H5P.MultiChoice' AND $library_name !== 'H5P.Dialogcards'  AND $library_name !== 'H5P.SingleChoiceSet') {
    return; // Nope, do not continue.
  }
  
  foreach ($semantics as $field) {
    // Go through list fields
    while ($field->type === 'list') {
      $field = $field->field;
    }
  
    // Go through group fields
    if ($field->type === 'group') {
      mymods_h5p_semantics_alter($field->fields, $library_name); // Check your function name!
      continue;
    }
  
    // Check to see if we have the correct type and widget
    if ($field->type === 'text' && isset($field->widget) && $field->widget === 'html') {
      // Found a field. Add support for table tags.
      if (!isset($field->tags)) {
        $field->tags = array();
      }
      $field->tags = array_merge($field->tags, array(
        'span',
        'sourcearea',
        'stylescombo'
      ));
    }
  }
}
add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter', 10, 4);

* Create  file extraplugins.js and put it in folder /h5pmods-wordpress-plugin-master/.  The code of this file:

(function ($) {
 
  $(document).ready(function () {
     if (!window.CKEDITOR) {
       return;
     }
 
     // Register our first plugin
     CKEDITOR.plugins.addExternal('sourcearea', '/wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/plugins/sourcearea/plugin.js');
     H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {};
     H5PEditor.HtmlAddons.sourcearea = H5PEditor.HtmlAddons.text || {};
     H5PEditor.HtmlAddons.sourcearea.sourcearea = function (config, tags) {
      // Add the plugin.
      config.extraPlugins = (config.extraPlugins ? ',' : '') + 'sourcearea';
      // Add plugin to toolbar.
       config.toolbar.push({
         name: "sourcearea",
         items: ['Source']
       });
          // Add our special tag
       tags.push('sourcearea');
     }; 

      // Register our next plugin
    CKEDITOR.plugins.addExternal('stylescombo', '/wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/plugins/stylescombo/plugin.js');
    H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {};
    H5PEditor.HtmlAddons.stylescombo = H5PEditor.HtmlAddons.text || {};
    H5PEditor.HtmlAddons.stylescombo.stylescombo = function (config, tags) {
      // Add the plugin.
      config.extraPlugins = (config.extraPlugins ? ',' : '') + 'stylescombo';
       // Add plugin to toolbar.
      config.toolbar.push({
        name: "stylescombo",
        items: ['Styles']
      });
       // Add our special tag
      tags.push('stylescombo');
    };

     // Register our next plugin
    CKEDITOR.plugins.addExternal('richcombo', '/wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/plugins/richcombo/plugin.js');
    H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {};
    H5PEditor.HtmlAddons.richcombo = H5PEditor.HtmlAddons.text || {};
    H5PEditor.HtmlAddons.richcombo.richcombo = function (config, tags) {
      // Add the plugin.
      config.extraPlugins = (config.extraPlugins ? ',' : '') + 'richcombo';
       // Add plugin to toolbar.
      config.toolbar.push({
        name: "richcombo",
        items: ['Styles']
      });
       // Add our special tag
      tags.push('richcombo');
    };

     // Register our next plugin
    CKEDITOR.plugins.addExternal('listblock', '/wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/plugins/listblock/plugin.js');
    H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {};
    H5PEditor.HtmlAddons.listblock = H5PEditor.HtmlAddons.text || {};
    H5PEditor.HtmlAddons.listblock.listblock = function (config, tags) {
      // Add the plugin.
      config.extraPlugins = (config.extraPlugins ? ',' : '') + 'listblock';
       // Add plugin to toolbar.
      config.toolbar.push({
        name: "listblock",
        items: ['Styles']
      });
       // Add our special tag
      tags.push('listblock');
    };

     // Register our next plugin
    CKEDITOR.plugins.addExternal('floatpanel', '/wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/plugins/floatpanel/plugin.js');
    H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {};
    H5PEditor.HtmlAddons.floatpanel = H5PEditor.HtmlAddons.text || {};
    H5PEditor.HtmlAddons.floatpanel.floatpanel = function (config, tags) {
      // Add the plugin.
      config.extraPlugins = (config.extraPlugins ? ',' : '') + 'floatpanel';
       // Add plugin to toolbar.
      config.toolbar.push({
        name: "floatpanel",
        items: ['Styles']
      });
       // Add our special tag
      tags.push('floatpanel');
    };

     // Register our next plugin
    CKEDITOR.plugins.addExternal('panel', '/wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/plugins/panel/plugin.js');
    H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {};
    H5PEditor.HtmlAddons.panel = H5PEditor.HtmlAddons.text || {};
    H5PEditor.HtmlAddons.panel.panel = function (config, tags) {
      // Add the plugin.
      config.extraPlugins = (config.extraPlugins ? ',' : '') + 'panel';
       // Add plugin to toolbar.
      config.toolbar.push({
        name: "panel",
        items: ['Styles']
      });
       // Add our special tag
      tags.push('panel');
    };

     // Register our next plugin
    CKEDITOR.plugins.addExternal('button', '/wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/plugins/button/plugin.js');
    H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {};
    H5PEditor.HtmlAddons.button = H5PEditor.HtmlAddons.text || {};
    H5PEditor.HtmlAddons.button.button = function (config, tags) {
      // Add the plugin.
      config.extraPlugins = (config.extraPlugins ? ',' : '') + 'button';
       // Add plugin to toolbar.
      config.toolbar.push({
        name: "button",
        items: ['my_button']
      });
       // Add our special tag
      tags.push('button');
    };

  });

 })(H5P.jQuery);

* Add code block in h5pmods.php
function h5pmods_admin_footer() {
  wp_add_inline_script('h5p-editor', 
"H5PIntegration.editor.assets.js.push('/wp-content/plugins/h5pmods-wordpress-plugin-master/extraplugins.js');");
}
add_action('admin_footer', 'h5pmods_admin_footer', 10, 4);

Step 4: Add your styles
* Add style definitions in /wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/styles.js
CKEDITOR.stylesSet.add( 'my_styles', [
    // Block-level styles

    // Inline styles
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
    { name: 'CSS Blue Style', element: 'span', attributes: { 'class': 'my_blue_style' } },
    { name: 'CSS Red Style', element: 'span', attributes: { 'class': 'my_red_style' } },
    { name: 'CSS Grey Style', element: 'span', attributes: { 'class': 'my_grey_style' } },
    { name: 'CSS Green Style', element: 'span', attributes: { 'class': 'my_green_style' } },
    { name: 'CSS Purple Style', element: 'span', attributes: { 'class': 'my_purple_style' } }
] );

* Call styles definition: add line  in /wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/config.js
config.stylesSet = 'my_styles';

Step 5: Add your styles definitions in  /wp-content/uploads/h5p/ custom-h5p-styling.css
/*--------------------------------------------------------------
Example coding
--------------------------------------------------------------*/

.my_blue_style {color: #0066FF;}

.my_red_style {color: red;}

.my_grey_style {color: #888888;}

.my_purple_style {color: #880088;}

.my_brown_style {color: brown;}


Step 6: Empty your browser cache. You’re all set to go!