CSS Styling - Adding "states" and open/close classes

[jpbagnis]

Hi, In the Kirby 2 version there was CSS classes such as: .cm-kirbytext-open .cm-kirbytext-attribute .cm-kirbytext-close

Also I was able to add "states" in kirbytags-mode.js to add specifics attributes styles. How can this be done with this version ? Is it with the classes named "formatting-*" ?

I'm trying to style things like in the image attached. Red -> Kirbytags / Special inserts Blue -> Typographic Green -> Layout

It was achieved editing kirbytags-mode.js like this: ` CodeMirror.defineMode('kirbytext', function (config, modeConfig) { 'use strict';

var states = {

    start: [
        // Match a (sup: tags opening parenthesis
        {
            regex: /\(sup:/,
            token: 'sup-open',
            next: 'super'
        },
        // Match a (cols…) tags opening 
        {
            regex: /\(cols\…\)|\(cols...\)/,
            sol: true,
            token: 'cols-format',
            next: 'start'
        },
        // Match a (…cols)  tags closing 
        {
            regex: /\(\…cols\)|\(...cols\)/,
            sol: true,
            token: 'cols-format',
            next: 'start'
        },

        // Match a ++++
        {
            regex: /\+\+\+\+/,
            sol: true,
            token: 'col-sep',
            next: 'start'
        },`

[fabianmichael]

@jpbagnis You are probably referencing to https://github.com/JonasDoebertin/kirby-visual-markdown? While this field has clearly been an inspiration, it was not developed by us and is implemented in a completely different manner. It uses a "simple syntax mode" for Kirbytags (based on regular expressions) while our Markdown field uses a more advanced tokenizer, that is better suited for more granular controls about what the parser does (see https://github.com/sylvainjule/kirby-markdown-field/blob/master/src/modes/kirbytext.js).

You should be able to extend the mode there by extending kirbytext.js. Please note, that we are currently waiting for CodeMirror 6 to become final for the next larger update of the pluign, as the latest versions of CodeMirror 5 have several problems with Apple’s iOS, while version 6 has been developed from the ground with mobile support in mind.