Only syntax highlighting?

1

So basically I want CM to only create the html with syntax highlighting from a source string, but not invoke any editor functionality, as this would be overhead.
(and performance is a factor, as the html then will be rasterized with the htmltocanvas libary and it can be lots of source code)

Is there a simple way to do that?

Or is the overhead of multiple CM-instances quite small, as long as they are not active?
(one instance of CM will be in use)

2

See the runmode addon.

3

Ah yes, thanks!

4

Is there a way to do the same with CodeMirror 6?

Edit: I should clarify - I’m trying to generate the highlighted markup in Node, not a browser.

So far, I tried to get an EditorView up and running with domino in Node, but domino is missing too many APIs (MutationObserver, getSelection(), etc). Now I’m working on just forking Highlighter to not need an EditorView. Seems like that should ultimately work…

5

Not yet, but there’s no reason it should be difficult. This’d probably involve adding another export to the highlight module that just runs its highlighting logic over a tree and calls a function for each token.

6

Sadly I cannot get him to run my prefered theme.
(I want to use javascript and zenburn as the theme.)
The options of the addon are somewhat confusing to me.

Anyway, the addon seems to ignore any other options and just defaults by default?

CodeMirror.runMode = function(string, modespec, callback, options) {
  var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);

(the js syntax highlighting works, just not in my theme)

7

I got something mostly working.

I had to use a few internal APIs to get the syntaxes to register their rules against NodeTypes. I had to duplicate the default spec too to not trigger a code path that required an EditorView.

If you’re interested in seeing what I did, I put up a rough gist here: https://gist.github.com/justinfagnani/7d4a4acfc4dd00dde3c62db13731f68f

What’s left to do is serialize a StyleModule to CSS text.

This will hopefully enable a nice workflow for us where we pre-build a code sample statically that’s upgraded to a full editor if the code loads on the client.

8

I simply overwrote the codemirror.cscs stylesheet, as I am only using one style for now …

9

I wrote a blog post about how I used CodeMirror 6 to get better Clojure highlighting for my blog.
The solution yields about 200kb of minified JS. I’m watching this space how to get it further down.

https://blog.michielborkent.nl/better-clojure-highlighting.html

10

Btw, here is the JS code: blog/main.js at main · borkdude/blog · GitHub
I suspect anything related to Editor* can be cut out somehow since the only thing I need to do is turn text into HTML with CSS. Any hints on how to do this will be helpful.

11

Import wise you only need the highlight module but that does have editor state and view as dependencies Static highlighting using CM v6

12

Thank you! I followed your approach here. It doesn’t do the highlighting yet, but it renders back span elements with some classes attached to the DOM. The text looks black, but this just something to figure out (EDIT: I figured it out, you need to include the CodeMirror CSS). However, the bundle size is still pretty much the same: 200kb.