How to apply CodeMirror theme ?

[lopezzlaura]

Hi, I'm am using your component in Angular and everything seems to be working perfectly when it come to the diff functions and stuff but one thing I cannot manage to do is making Mergely apply the CodeMirror theme that I want to use. This is the config I have :

This is the display I got from it : (the background gets the right background color from the theme but no text is ever colored)

If you have any idea I would really appreciate that, I have been working on it for 2 days

[wickedest]

Hi @lopezzlaura, I am sorry you are frustrated. I have never tried to enable a theme, or syntax highlighting with Mergely. This is because Mergely applies a lot of styles to achieve the diff.

You should be using the option, cmsettings to apply the codemirror theme. If that doesn't work, I can recommend you use the developer console (e.g. in chrome or firefox). Is the theme being loaded? Inspect DOM elements to see what classes are being applied. Maybe manually disable mergely.css and see what happens. Mergely has an autoupdate function that could be screwing with your styles. Maybe disable it.

[lopezzlaura]

Hi @wickedest , I think I have found the problem, CodeMirror seems to add span and associated classes for each type of word in a line like so :

But when it is used in Mergely, it is apparently not working the same way :

So the text coloration does not apply, do you have any idea on how to turn on this word partition thing ? I have tried to disable autoupdate and mergely css but it is not working yet.

[wickedest]

If I get some time, I will try it myself - possibly, not until this weekend. Maybe check that theme is even being set. Use Mergely cm to get the codemirror editor and then getOption to check the theme from it.

[lopezzlaura]

Hi, Ok thank you very much ! I'll wait until this weekend. Yes the options object returns the right Theme, and the theme is correctly loaded in the component.

[wickedest]

HI @lopezzlaura, I was able to get an example working with theme: midnight, and mode: sql.

1. Download the theme and mode that you want from codemirror. I got midnight.css and sql.js
2. Include the theme and mode into your application:

   <link type="text/css" rel="stylesheet" href="midnight.css" />
   <script type="text/javascript" src="sql.js"></script>

3. Disable mergely's background color for these two styles in mergely.css (they're questionable in the first place):

   /*
   .mergely.c.lhs,
   .mergely.c.rhs { background-color: #fafafa; }
   */

   The result:

[lopezzlaura]

Hi @wickedest, Does it also work with Angular ? Because i've tried on my Angular project here, and unfortunately it is still not working with the disabled background.

[wickedest]

@lopezzlaura, it should work with Angular. It's just js/css. If you share an example of the issue, I can take a look.

[lopezzlaura]

I finally managed to make it work, on Angular the imports should be on the angular.json file and all modes needs to be imported as follow :

Thank you very much for your time ! I think the issue can be closed