AutoStyleExtension for Medium Editor

AutoStyleExtension for Medium Editor allows auto-styling of words.

The auto-styling is defined in a configuration object, which gets passed to the constructur. In detail:
  1. Words and the CSS style to be applied to these words.
  2. Words and the CSS class to be applied to these words.
  3. Whether case matching is to be performed.
  4. Whether words only are matched, or substrings, too.

Playground

Play around with the words yellöw, gräy, gray, grey, RED, oraNGE, 汉语/漢語.

yellöw, gräy, gray, grey, RED, oraNGE, 汉语/漢語

(If deleting the content, make sure that the placeholder "Type your text" appears.
The editor seems sometimes to remember the last HTML-color settings. Will look into it.)

Configuration

<style type="text/css">
    .my-class {
        border: 1px solid red;
        background-color: yellow;
    }
</style>

<script>

    config: {
        sectionA: {
            matchcase: false,
            wordsonly: false,
            class: 'my-class',
            style: 'color:red;',
            words: ['yellow']
        },
        sectionB: {
            matchcase: true,
            wordsonly: true,
            style: 'color:red;',
            words: ['RED']
        },
        sectionC: {
            matchcase: false,
            wordsonly: false,
            style: 'background-color:gray;',
            words: ['gray', 'grey']
        },
        sectionD: {
            matchcase: true,
            wordsonly: true,
            style: 'background-color:orange;',
            words: ['oraNGE', '汉语/漢語']
        }
    }
</script>