Shwmae! 👋

On occasion, you need to extend a rich text editor's functionality to include features that don't come out-of-the-box. While building this very website, I quickly realised that it would be useful to include code snippets to provide context to my blog posts. Luckily, adding a code snippet editor to Umbraco's rich text editor is very straightforward. Update appsettings First, under the Umbraco > CMS > RichTextEditor section of your appsettings.json (add this in if you don't already have it), add the "codesample" plugin. By default, there are certain HTML tags that are not considered valid - including the <code> tag, which we need to render our code snippets on the frontend. To allow the rich text editor to use these tags, we need to update the "ValidElements". Here's what we have so far: "Umbraco": { "CMS": { "RichTextEditor": { "Plugins": [ "codesample" ], "ValidElements": "+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],i[class|style],-strong/-b[class|style],-em[class|style],-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],small[class|style],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],figure,figcaption,code", } } } Update the backoffice Rerun the project, to get the changes from the previous section. Then, visit the backoffice and include the new "Code Sample" plugin to to your richtext editor datatype - whether that is the default rich text editor (as in my case) or your own custom configuration. This can be found in the backoffice under Settings > Data Types > Richtext editor > Code Sample (found in the "Toolbar" list). Frontend Next, we need to add some styling to our code snippets using PrismJS. For this example, I have used NPM to include the required CSS/JS. If you don't wish to use NPM, these files can also be downloaded from the PrismJS site, to be added into your project manually. Firstly, install PrismJS via the command line: npm i prismjs Once it has been installed, it is as simple as including the stylesheet/script in your code. In this example, I am importing the stylesheet as part of a SASS partial, and the script as part of a TypeScript partial, but this could also be easily done within plain CSS/JS partials. It is also worth noting that there are multiple themes to choose from within the package. These can be found by looking within the "node_modules/prismjs/themes" directory. CSS/SASS @import 'prismjs/themes/prism-tomorrow'; JS/TS import 'prismjs'; Conclusion With these few simple additions, we now have a way to present aesthetically pleasing code snippets as part of our editing experience!