Read only and other text markers

WARNING: This feature is in alpha and is hard to use! We've built it for advanced users only for now, and will be improving it in the future.

If you need help using this feature please contact support. Because this feature allows you to interact with the CodeMirror API directly it is possible to make our code editor unusable by your students. If in doubt, avoid using it!

Use case examples are:

• To mark a problem region as read-only, for code given to students that they don't understand yet
• To highlight sections of inline code, to focus students on bits that are important. This could be highlighting a span of characters, or an entire line.

How To Use

There are three different ways to use these marks, outlined here:

Workspace Initial Files

1. With Advanced Mode on in the problem authoring interface, go to the content tab. 

2. Create a Workspace Initial File, and click the Edit File Settings button. 

3. The bottom option is File Metadata, with a multiline text box. 

In this you can add a JSON blob to specify the text marks for the file, in the following format.

{
  "textMarkSpans": [
    {
      "start": {"line": number, "ch": number},
      "end": {"line": number, "ch": number},
      "options": object
    }
  ]
}

line and ch are both integers.

ch is an optional character index. If not included the mark spans the entire line.

options is optional. See the codemirror documentation for options reference. 

By default "options" is {"readOnly": true, "className": "readOnly", "inclusiveLeft": true, "inclusiveRight": false}, and the "options" object passed in updates this.

This means that passing in "options":{"css":"color:#f00"} makes the total object:

{"readOnly": true, "className": "readOnly", "inclusiveLeft": true, "inclusiveRight": false, "css":"color:#f00"}

Which would make the text red.

HTML Slide Inline Snippets

When writing an HTML slide code snippet, you can add a data-metadata attribute and to specify text marks. The structure for the JSON is the same, however now it has to be on one line.

<pre class="js-editor" data-eg-id="more-dicts" data-metadata='{"textMarkSpans":[{"start":{"line":0},"end":{"line":1},"options":{"css":"color:#f00"}}]}'><code data-lang="py3">
d1 = {'a': 1, 'b': 5}
d2 = {'a': 4, 'c': 6}
d1.update(d2)
print(d1)
</code></pre>

Note that despite HTML's specification, it's easiest to have this attribute in single quotes. More detail in the Limitations section.

Markdown Slide Inline Snippets

Markdown slides work very similarly to HTML slides. You add a metadata opt, and then the content remains the same, with no quotes around the object.

```eg:more-dicts;lang:py3;metadata:{"textMarkSpans":[{"start":{"line":0},"end":{"line":1},"options":{"css":"color:#f00"}}]};

d1 = {'a': 1, 'b': 5}
d2 = {'a': 4, 'c': 6}
d1.update(d2)
print(d1)
```

Note that the Convert to Markdown button does function correctly, if the HTML version has single quotes for the attribute, with the data containing double quotes.