This uses highlight.js ( https://highlightjs.org ) to display code snippets nicely. Put code in between  codebox generico tags. Set the language variable to one of css, html, php or js. 

Copying and pasting code into the html editor often brings formatting artifacts and can mess things up.  You might find putting code and generico tags inside <pre> tags works well. For best results, try the following steps:

1. Put the Generico tags on the page first
2. Paste the code to be displayed into a basic text editor (e.g Windows notepad.exe or Mac textedit)
3. Copy the code again from the text editor, and paste it between Generico tags
4. Select the Generico tags and all the code between them, and from the HTML Editor menu choose "Pre-formatted".

===============================================

About this plugin

This plugin is a template that can be used with the Generico filter. Read more about Generico and templates here.

https://moodle.org/plugins/filter_generico

Installing this plugin.

After downloading, unzip the downladed file. Inside will be a template text file with a .txt file extension. You do not need to edit or open the file. It can be imported as is by dragging it over the green bundle box on a Generico template settings page.

 See this page for more information how to do that.

https://poodll.freshdesk.com/support/solutions/articles/19000086450-how-to-use-generico-bundles 

Using this plugin

If the template is installed and the Generico filter enabled. You only need to put the Generico filter string on the page, and it will work. The Generico filter has a companion plugin for Atto HTML editor (not yet for TinyMCE). This can auto generate the Generico filter strings for you, and is the recommended way to use Generico.

https://moodle.org/plugins/atto_generico