Codemirror - How to add multiple parameters for gutters option?

Question

According to Codemirror documentation:

var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
                mode: "python",
                lineNumbers: true,
                gutters: ["CodeMirror-linenumbers", "breakpoints"],
                foldGutter: true,
});

editor.on("gutterClick", function(cm, n) {
    var info = cm.lineInfo(n);
    cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
});

function makeMarker() {
    var marker = document.createElement("div");
    marker.style.color = "#822";
    marker.style.marginLeft = "-7px"
    marker.innerHTML = "●";
    return marker;
}

This is the code to enable breakpoints on gutter click to the specific line. Now I want to add gutter fold which is implemented, according to their documentation, like this:

var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
                mode: "python",
                lineNumbers: true,
                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                foldGutter: true,
});

I want to implement both options together, so when I add both after each other it overwrites. I have even tried doing like this:

gutters: ["CodeMirror-linenumbers", "breakpoints" && "CodeMirror-foldgutter"]

But this only loads the second part of the argument "CodeMirror-foldgutter" and if i replaced the && with the || it loads only the first part of the argument.

I want to load both of them, but I have no idea how? Please help me :D

Answer 1

I think you almost had it ... just need to change your operand (&& or ||) to a comma instead and remove your comma on the last line:

var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  mode: "python",
  lineNumbers: true,
  gutters: ["CodeMirror-linenumbers", "breakpoints", "CodeMirror-foldgutter"],
  foldGutter: true
});

The code example in this SO question helped me: Codemirror setGutterMarker styling