Extend Prism Module with Custom Languages

[InanisOmnia]

Hi there! I absolutely love the plugin and am enjoying all the features. However I am going to be a pain and request one more!

I already have a custom language definition for Prism with the relevant Regex and token types. I was wondering if it were possible to allow users to add in these definitions the same way you can extend Prism normally like follows Prism.languages["MY_LANG"] = {...}

I don't know if there is already a way to do this inside Obsidian so pardon me if I am mistaken, but I feel like your plugin having this feature would just be the cherry on top!

Please point me in the right direction if I have missed something!

[mugiwara85]

You are not a pain in the ass just because of requesting one more feature ;) Request as many as you like.
I haven't thought of this, and didn't know that this is possible.
I checked the Prism documentation, and the feature itself should be not that complicated to implemented. Since you have to/can define multiple tokens for a language, I think the best would be if these definitions, would be located in a separate file (maybe in the plugin folder itself?). Would this work for you?

For testing, however, I would greatly appreciate if you could send me your definitions, for your custom langauge, and also a codeblock to test it, if it works correctly.
If you give me this, I can stat developing immediately :)

[InanisOmnia]

Thats amazing! Thank you so much!

Yes I feel a separate location would be ideal to prevent overlap

Please see below a rough implementation of the GrandMA3 macro syntax highlighting I have made and a code block to test it with!

Prism.languages["ma3"] = {
  'comment': /(^|[^\\#])#.*/gim,
  'string': [
    {
      pattern: /'(?:\\[\s\S]|[^\\'])*'/,
      greedy: true
    },
    {
      pattern: /"(?:\\[\s\S]|[^\\"])*"/,
      greedy: true
    },
  ],
  'number': /(?:\b\d+(?:\.\d*)?|\B\.\d+)/gi,
  'operator': /[-+*%]/,
  'slashModifier': {pattern: /(\/\w+)/, alias:"class-name"},
  'macroInputPrompt': {pattern: /\((?:\\[\s\S]|[^\\(\\)])*\)/, alias:"variable", greedy: true},
  'macroVariableResolve': {pattern: /\$.[^\s]*/, alias:"variable", greedy: true},
  'keyword': /\b(?:\w+)\b/,
}

// This is mostly nonsense but does include a lot of the different tokens and highlighting you should see
let code = `
On FeatureGroup 2 Thru
SetUserVariable cueNo ("Cue")
Lua "local m = 'Macro \'Store Atts Only\''; if Confirm('Warning!', 'Are you sure you want to store remove these attributes?\nCancel to show options') then Cmd('Go+ '..m) else Cmd('Go+ '..m..'.6') end"
Store Cue $cueNo If Filter "Atts Only" /ActiveForSelected /TrackingShield "DRZ" /Remove
Off Macro 'Store Atts Only'
At +50%
# This is a comment
Store Cue $cueNo If Filter "Atts Only" /ActiveForSelected /TrackingShield "DRZ"
`;

It should look something like this depending on your theme obviously

Let me know if I can be of any additional support!

[mugiwara85]

@InanisOmnia I think I got it:

I would really appreciate if you could test it a little, if everything works fine, but it looks god for me. If you give me a feedback, I can officially release it.

You have to create a customPrismLanguages.json in the pluginfolder (VaultName\.obsidian\plugins\codeblock-customizer\), and put the definition in it like this:

{
  "ma3": {
    "comment": "/(^|[^\\\\#])#.*/gim",
    "string": [
      {
        "pattern": "/'(?:\\\\[\\s\\S]|[^\\\\''])*'/",
        "greedy": true
      },
      {
        "pattern": "/\"(?:\\\\[\\s\\S]|[^\\\\\"])*\"/",
        "greedy": true
      }
    ],
    "number": "/(?:\\b\\d+(?:\\.\\d*)?|\\B\\.\\d+)/gi",
    "operator": "/[-+*%]/",
    "slashModifier": {
      "pattern": "/(\\/\\w+)/",
      "alias": "class-name"
    },
    "macroInputPrompt": {
      "pattern": "/\\((?:\\\\[\\s\\S]|[^\\\\(\\\\)])*\\)/",
      "alias": "variable",
      "greedy": true
    },
    "macroVariableResolve": {
      "pattern": "/\\$.[^\\s]*/",
      "alias": "variable",
      "greedy": true
    },
    "keyword": "/\\b(?:\\w+)\\b/"
  }
}

Important: Note the double backslashes! The regex must be defined as strings, which means you have to escape the \ additionally.

[mugiwara85]

P.S.: If you want the exact same colors as in your original screenshot, you can use Syntax Themes for that ;)

[mugiwara85]

Ah, sorry, forgot to mention, that you just have to take the main.js from the repo and overwrite yours with it.

[InanisOmnia]

You are brilliant my friend. I have done as you asked with a fresh config (dont mind the styling!) and it seems to have worked perfectly!

[mugiwara85]

Very nice! Please test it a little, if you notice something that doesn't work as it should, but if it work like this, then there should be no problems (theoretically). I have to sleep now, but I will release it tomorrow afternoon/evening (if I don't hear any problems from you).