Best process for adding new language support for code blocks

Issues
1

I would like to add support for a new language allowing syntax coloring within Inkdrop code blocks. What would be the best way to do this?

  1. Write a CodeMirror mode for the language, get it accepted into the CodeMirror project, and then wait for this support to eventually makes its way into Inkdrop?

  2. Hack Inkdrop locally (if possible) to add the necessary CodeMirror support to my local instance. Then, once the new language support looks good, submit to CodeMirror.

  3. Write an Inkdrop plug-in to do the syntax highlighting I’m looking for.

What method do you propose I use? I’m excited about using Inkdrop but I don’t want to wait too long before I have the language syntax highlighting support I want. If the second option above is possible, please let me know where these JS files exist on the local Inkdrop app package and how I could add/hack in a new language.

Thanks,

Tim

2

Hi Tim,

Thank you for the question.
I’m happy to help you make a plugin.

The answer is 2 and 3.
These two options are ultimately same because plugin is only way to hack Inkdrop locally.
You have to write a mode for CodeMirror and load it via plugin.

Please lean more about making a plugin here: https://doc.inkdrop.info/manual/plugin-word-count

You can get CodeMirror class from your plugin like so:

var CodeMirror = require('codemirror');

So you can call CodeMirror.defineMode and CodeMirror.defineMIME to register your language definitions.

3

Thank you for your feedback! I have now created a plugin that adds a new CodeMirror mode. The syntax highlighting for my new plugin is only working when the document is in “edit” mode however. When the document is is preview mode, no highlighting is taking place. :frowning:

Here is the main code in the plugin:

'use babel';

module.exports = {

  activate() {
    var CodeMirror = require('codemirror');
    
    CodeMirror.defineSimpleMode("spl", {
      start: [
        // Strings in quotes
        {regex: /"\S*?"/, token: "string"},
        // Command after a |
        {regex: /(\|)(\s*[a-z]+)/, token: [null, "builtin"]},
        // Command after a [
        {regex: /(\[)(\s*[a-z]+)/, token: [null, "builtin"]},
        // Command arguments
        {regex: /(\s*[a-zA-Z0-9:_\.]+)(\=)/, token: ["keyword", null]},
        // Functions
        {regex: /([a-z]+)(\()/, token: ["builtin", null]},
        // Static
        {regex: /<<FIELD>>/, token: ["keyword"]},
        // Keywords
        {regex: /(\s+)(AND|OR|AS|BY)(\s+)/, token: [null, "builtin", null]}
      ],
      meta: {
        dontIndentStates: ["start"]
      }
    });
  
    CodeMirror.defineMIME("text/x-spl", "spl");
  }
};

In the markdown, I’m just doing a code block like this:

```spl
| inputlookup expectedTime
| deletekeys collection="expectedTime"
```

Highlighting is basic for now but I’ll add to it over time.

Do you see a reason why the highlighting doesn’t work in preview mode? The highlighting works great when editing the markdown!

4

The markdown renderer retrieves mode info by following code:

const mode = CodeMirror.findModeByName(lang)

But in this case the mode is undefined.
This is because spl is not registered in CodeMirror.modeInfo as so are other languages in meta.js.
You can register it as below:

CodeMirror.modeInfo.push({
  name: 'spl',
  mime: 'text/x-spl',
  mode: 'spl',
  ext: ['spl'],
  alias: []
})

I’ve checked it works :wink: Hope it helps!