I really like the new editor. I’d have a few suggestions for the code block feature:

1. In editing mode, syntax highlight for C seems to be missing something a few keywords (same for C++):

Invision 5:

#include <stdio.h>

#define PLANET "Earth"
  
int
main (void)
{
	printf("Hello, %s\n", PLANET);
}

Invision 4:

I’d expect to see different colors #include, #define, Earth, and <stdio.h>, but all of them are in blue. However, this is all fixed when you post the message. If this is the expected behavior, then it’s fine. It’s just different from Invision 4, that’d do all the syntax highlight even when you’re still editing the message.

2. Is it possible to add Assembly? It seems a bit odd, but it’s not. Many people use it from different purposes ranging from retro computing to security, OS development, etc.

3. I also miss:

   1. BASIC

   2. Visual Basic (perhaps this covers BASIC too)

      I’m talking about VB5 and VB6, not VB .NET. If VBNet covers both classic VB and VB .NET, then maybe it is worth renaming it to “Visual Basic”. That’s how Microsoft calls its VB .NET language anyhow.

   3. Pascal

   4. Delphi (or Object Pascal)

   5. Clojure

I know you can’t just write highlight rules for every language in the planet, but I assume the syntax highlight is done by some 3rd party software and you just picked up the languages you believe are used the most? If so, it wouldn’t hurt adding more. Or would it? 🥹

I loved to see Rust and INI in the list. Well done, folks! ❤️

Edited August 27Aug 27 by fernandom

12 hours ago, fernandom said:

I’d expect to see different colors #include, #define, Earth, and <stdio.h>, but all of them are in blue. However, this is all fixed when you post the message. If this is the expected behavior, then it’s fine. It’s just different from Invision 4, that’d do all the syntax highlight even when you’re still editing the message.

Yes, that's expected. The short story is HLJS, the highlighting engine, has what are called nested language scopes which are disabled in the editor for optimal performance.

12 hours ago, fernandom said:

2. Is it possible to add Assembly? It seems a bit odd, but it’s not. Many people use it from different purposes ranging from retro computing to security, OS development, etc.

3. I also miss:

   1. BASIC

   2. Visual Basic (perhaps this covers BASIC too)

      I’m talking about VB5 and VB6, not VB .NET. If VBNet covers both classic VB and VB .NET, then maybe it is worth renaming it to “Visual Basic”. That’s how Microsoft calls its VB .NET language anyhow.

   3. Pascal

   4. Delphi (or Object Pascal)

   5. Clojure

I know you can’t just write highlight rules for every language in the planet, but I assume the syntax highlight is done by some 3rd party software and you just picked up the languages you believe are used the most?

You can add more by creating an editor extension… or I should say you will be able to. When trying to setup an example I found a bug in my code 🤫.

Custom Languages

To create a custom language

1. Create a highlighter or copy a highligher function from the highlight.js repository to get started. The function you want is the one that takes an hljs object

2. Create a javascript <script> tag or file. We haven’t gone in all the details yet about how to extend the editor system, but essentially the code would look like this if I copy the “Intel x86 Assembly” highlighter (after I fix my bug)

// This will add your highlighting syntax logic globally so that, after saving, posts will be highlighted with your custom language.
document.addEventListener('ipsCodehighlightingLoaded', () => {
	ips.setString('editor_code--asm', 'ASM'); // This is how you control what it's called
    ips.ui.codehighlighting.registerLanguage('asm', function(hljs) {
        return {
            name: 'Intel x86 Assembly',
            case_insensitive: true,
            keywords: {
                $pattern: '[.%]?' + hljs.IDENT_RE,
                keyword:
                    'lock rep repe repz repne repnz xaquire xrelease bnd nobnd ',
				// truncated for brevity
                built_in: ""
				// truncated for brevity
            },
            contains: [
                hljs.COMMENT(
                    ';',
                    '$',
                    { relevance: 0 }
                ),
				// Truncated for brevity
            ]
        };
    });
}, {once: true});

// This adds the language to the editor. Ideally this would go in a separate file so it's only loaded when the editor is loaded
document.addEventListener('ips:editorBeforeInit', () => {
	ips.ui.editorv5.registerExtension("assembly_code_lang", {
	    onBeforeCreate: ({editor}) => {
	        editor.options.allowedLanguages = editor.options.allowedLanguages || [];
	        editor.options.allowedLanguages.push('asm') // asm is the name provided above
	        document.dispatchEvent(new CustomEvent('ips:codeHighlightingLangRegistered')); // This tells the editor to add the lang to the dropdown
	    }
	});
}, {once: true})

Using an Existing HLJS Language

For most cases though, a much easier approach is to just whitelist a known language. So, basically, you can add any of the languages in that list I linked to with an editor extension like this

ips.setString('editor_code--x86asm', 'x86 ASM'); // This is how you control what it's called
ips.ui.editorv5.registerExtension("assembly_code_lang", {
    onBeforeCreate: ({editor}) => {
        editor.options.allowedLanguages = editor.options.allowedLanguages || [];
        editor.options.allowedLanguages.push('x86asm') // x86asm is the name provided inside the file in hljs
        document.dispatchEvent(new CustomEvent('ips:codeHighlightingLangRegistered')); // This tells the editor to add the lang to the dropdown
    }
});

This will use the existing highlighter which is included out of the box, and is loaded ad-hoc. We may add an ACP interface to add languages that are “known” but not available in the editor.

Wow, that’s great! Thanks a lot!