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

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 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?


1 Like