Need some help with themes.

1

Hi,

Just started using CodeMirror today it is great stuff, I needed to create a basic C++ text editor on my own server and it does the job nicely. http://cpp.bito.io

I can not figure out how to change the theme, I just tried heading <link rel="stylesheet" href="theme/monokai.css"> to the top of my index.html (as per http://bito.io) page where this did not even get picked up, where exactly and how am I meant to indicate where to change the theme?

I am thinking I need to change it in codemirror.css? If so I can’t see where, as when I change the cm-s-default to .cms-s-monokai it stops then anything showing up at all.

Overall how do I change the theme in CodeMirror exactly, I can’t seem to understand what it means from the documentation exactly.

Sorry for just signing up and posting such a noob question right away, hoping to contribute the more I learn about CodeMirror.

1 Like
2

You also need to set your editor’s theme option. See the manual.

3

Hi, I looked at the manual. I still don’t understand specifically what I need to be changing. Could you
Please be more specific, there are many lines that currently have the theme set as default but when I change them it breaks the site

1 Like
4

So I replaced the default .cm-s-[name] styles with monokai there its cm-s-monokai in the /lib/codemirror.css file, then still nothing happens, I have tried to follow the manual word for word but with no luck :frowning: I have even tried replicating the demo from http://codemirror.net/demo/theme.html with no luck :frowning:
Please can you help me by specifics of what and where as per what specific lines and files I need to change just to change it to the one theme (monkai) that I want?

5

You don’t need to edit any CSS files. You need to load the theme you want, say

<link rel=stylesheet href="/path/to/solarized.css">

And set the theme option to the name of the theme, for example

var ed = new CodeMirror(element, {theme: "solarized"})
6

Do you have a full example of how this is to be changed in the index.html file? I tried it and could not get it working still?

1 Like
7

Sure, there’s even one on the website that you might be able to view source on: http://codemirror.net/demo/theme.html

8

many thanks for the information and help so far, this is my best attempt that changing the theme solely to monokai. However I still can not get it working.

I have made this attempt, I think it is my best attempt so far:

http://pastebin.com/zMmZS6v4

Please if you have time, if you could provide me feedback on that code in some way and point out what I am doing wrong, I would greatly appreciate it.

9

SomeT, your example isn’t valid JavaScript. You should probably start learning basic JS, first, which will make this sort of Q&A much easier. Your code has this block:

    var cppEditor = CodeMirror.fromTextArea(document.getElementById("cpp-code"), {
      lineNumbers: true,
      matchBrackets: true,
      mode: "text/x-c++src"
    });
    var cppEditor = new CodeMirror(element, {theme: "monokai"})
});

which defines cppEditor twice, and certainly will not work. You also have a stray }); present. Try:

var cppEditor = CodeMirror.fromTextArea(document.getElementById("cpp-code"), {
  lineNumbers: true,
  matchBrackets: true,
  mode: "text/x-c++src",
  theme: "monokai"
});
10

Now looking back on that, I can see how stupid my mistake was haha.

I have it all working now so many thanks for your help on that!

I do agree I need to learn basic Javascript, at moment my focus is on c++

1 Like