Can't get fold gutter to show in CodeMirror in xml mode

Question

I'm trying to create a CodeMirror editor for some XML content with the fold gutter showing. I'm loading a bunch of codemirror library code (version 3.18):

<script src="js/lib/codemirror.js"></script>
<script src="js/lib/foldcode.js"></script>
<script src="js/lib/xml-fold.js"></script>
<script src="js/lib/foldgutter.js"></script>
<script src="js/lib/xml.js"></script>
<script src="js/lib/sparql.js"></script>

And then I create the editor object:

var showCodeMirrorResult = function( code, count, mode ) {
  var editor = CodeMirror( $("#results").get(0), {
    value: code,
    mode: mode,
    lineNumbers: true,
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
  } );
};

where code is a string encoding an XML document, and mode is application/xml. This all works - I get a syntax-highlighted CodeMirror editor, I can use ctl-Q to fold and unfold XML nodes, all good. However, I can't get the gutter to show, indicating to the user that folding is something they can do in this editor. I'm expecting something like this - note the triangles in the LH gutter to indicate fold points. I can't get those to appear, no matter what I try.

Answer 1

Did you add CSS?

 .CodeMirror-foldmarker {    
    font-family: arial;
  }
 .CodeMirror-foldgutter {
    width: .7em;
  }
  .CodeMirror-foldgutter-open,
  .CodeMirror-foldgutter-folded {
    color: #555;
    cursor: pointer;
  }
  .CodeMirror-foldgutter-open:after {
    content: "\25BE";
  }
  .CodeMirror-foldgutter-folded:after {
    content: "\25B8";
  }