How to create a Neos Code-Snippet nodeType

As an editor, I want to add some nicely highlighted code snippets to my article.

The code-snippet nodeType is not in de standard Neos toolbox of content elements, so I decided to create my own code snippet nodeType. Neos has a nice code editor for editing code in the backend. It is called codemirror and it is feature rich open-source code highlighter implemented in JavaScript. It comes with lots of nice plugins like bracket matching, inline editing and code folding.

The Package has a pretty simple directory structure:

Package directory structure Text

Backend

The editor is available as a node editor: TYPO3.Neos/Inspector/Editor/CodeEditor.

Neos CodeEditor inspector YAML

This will provide us with a nice 'Edit Code Snippet' button in the backend. Clicking it will allow us to easily add some code in the Neos code editor. You can find the complete YAML configuration at the end of this article.

Code editor

The Code Editor displaying part of it own configuration

A simple piece of TypoScript . . .

Code-Snippet TypoScript Object TypoScript2

. . . and a fluid template render the code snippet in the frontend.

Fluid Template HTML
Code Editor Styling Options

Code Editor Styling Options

This will render a textarea in the frontend containing the code. Besides the language, we can also set several other options:

This gives us a pretty nice code snippet nodeType.

You can find the complete code for the nodeType at the end of this article.

Frontend

What you use for the frontend rendering is up to you, but on this site I use codemirror. I like the fact that you can type in the highlighted snippet and you can have bracket matching and any other fancy functionality if it can be enabled through a plugin.

You can, for example enter a 'full screen' mode for the currently active (focussed) editor by pressing 'F11' and leave full screen by pressing 'Esc'. Give it a try!

To get codemirror to highlight your code snippets in the frontend you will need to load some files and add some JavaScript to the page. I put my codemirror code in 'Resources/Public/Library'. And I also use jQuery to start the highlighting.

HTML

You can also see the addon code being loaded. When the document is ready, we simply find all code-snippets and process them using the following piece of JavaScript:

JavaScript

To load the language file for an editor and set the language to it, we (used to - see Update) use this convenience method:

JavaScript

The frontend should now display your nice and shiny highlighted code, but the backend is probably more or less broken. This is because the backend loads your page and all the resources on it and then 'dresses' it with the backend code. There are probably some conflicting libraries and / or changed elements that prevent the backend from functioning as it should.

To fix this, we can wrap your frontend code-editor Javascript with an if statement, so that it only executes when there is no active backend session. We use the 'ifAccess' security viewhelper for this task.

HTML

This works nicely. We have nicely hightlighted code in the frontend and my backend functions as expected. You can find a full JavaScript example at the end of this article.

Code

The nodeType is available on github and can be included in your project by adding two lines to your composer.json:

JavaScript

NodeTypes.yaml

Full Code-Editor nodeType YAML

Root.ts2

TypoScript Configuration TypoScript2

CodeSnippet.html

Fluid Template HTML

Full JavaScript example

JavaScript

Update

I have abandoned the language loading function. The reason is that it loaded the language files for the same language multiple times if more code snippets used the same language. I could not get my head wrapped around a nice solution since the loading is done over asynchronous XHR. So now I use a Grunt file do pre-compile my codemirror js and css into nice minified files. I'll do a writeup on the Gruntfile once I tidy it up a bit more.

Also, I cleaned up the TypoScript (Thanks for the tip Rens). The properties present in the NodeTypes.yaml file are made available in your Fluid template by the TypoScriptService. Also the templatePath can be left out because Neos will look for it the place were I put it by convention. Nice! Convention over configuration.

Want to react? Reach me on Twitter