Is it possible to make a prism based syntax highlighting for editor mode?

Developers: Plugin & API
1

Hi all, I’m unfamiliar with Obsidian APIs and codemirror stuffs, so any information is appreciated. Currently, I’m using the cm-editor-syntax-highlight-obsidian plugin for my editor mode syntax highlighting, but finding some limitations:

  1. Some of my favorite langauges (e.g. FlowJS and Racket are missing
  2. The CSS color theme I made for preview mode does not apply on the editor mode because editor mode uses codemirror highlighting while preview mode uses prism. This means that we have a different set of CSS class names to handle with.

Therefore, I’m thinking of making a new plugin that parse codes based on prism in order to be consistent with the preview rendering.

My naive plan for now is to:

  1. Capture the onChange event of HyperMD (codemirror) code block lines (with debounce).
  2. When the line changes, take the text content of .cm-active.cm-line and feed it into the prism manual mode, which takes a string and returns HTML string produced.
  3. Replace the current line content with the newly produced HTML string.

Does this look practical? Any foreseeing (performance) issue? Or is there a far better way of integrating prism into codemirror editor using some codemirror APIs?

Thanks!

1 Like