How to use Codemirror in LON-CAPA

A variable $CodemirrorMime has to be set within the LON-CAPA problem file before the import line of the Footer library. The choices are

x-java, x-python, x-csrc (for C-code) x-c++src (for C++-code), x-csharp (for C#-code), x-php, javascript,
xml, json, x-httpd-php (for php code mixed with html code)
x-sql, x-mysql, x-plsql
an empty value (which will result in line numbers and checking of brackets)

(It should be emphasised that most of these choices are only useful for manually assessed code, because automated marking is not provided for most of these languages.)

Where to find the libraries

Codemirror can be used to provide better editing support for textareas for example for the LON-CAPA problem types "external response" and "essay response". It has modes for different programming languages. Libraries are provided in the following LON-CAPA location "/res/fhwf/ecult/lib/SyntaxHighlighter" by the eCULT project. Alternatively, such files can be installed from http://codemirror.net/doc/compress.html and then be configured for use in LON-CAPA. The current eCULT configuration includes: codemirror.js, clike.js, javascript.js, php.js, python.js, sql.js, xml.js, active-line.js, closebrackets.js, matchbrackets.js, matchtags.js.

How to use the libraries

The eCULT Codemirror libraries can be used by any LON-CAPA author. In order to use the libraries, the following two lines of code need to be included in the problem file. The first line should be at the beginning of the problem file, the second one at the end. A variable $CodemirrorMime has to be set within the LON-CAPA problem file before the import line of the Footer library.

<import id="91">/res/fhwf/ecult/lib/SyntaxHighlighter/CodeMirror_Header.library</import>
<import id="92">/res/fhwf/ecult/lib/SyntaxHighlighter/CodeMirror_Footer.library</import>

The eCULT CodeMirror_Header.library

An "<allow>" tag in LON-CAPA ensures that the resource has permission to be viewed. The codemirror-compressed.js file was downloaded from the Codemirror website, but the codemirror_3_16.css requires some modifications after downloading (in particular, it requires something like ".CodeMirror div { margin: 0; padding-bottom: 0; }".

Header library

The eCULT CodeMirror_Footer.library

The eCULT library currently provides the following:

Footer library

$CodeMirText = "var editor = CodeMirror.fromTextArea(document.getElementsByTagName('textarea')[0],{";
if ($CodemirrorMime eq "x-python") {
    $CodeMirText .= "mode: {name:'python',version: 2,singleLineStringErrors: false},
    indentUnit: 4,
    lineNumbers: true,
    matchBrackets: true,
    tabMode : 'shift',
    styleActiveLine: true,
    viewportMargin: Infinity,
    autoCloseBrackets: true,
    extraKeys: {'Tab': function(){editor.replaceSelection('    ' , 'end');}}
});";
}  elsif ($CodemirrorMime eq "xml" or $CodemirrorMime eq "json" or $CodemirrorMime eq "x-httpd-php" ) {
    $CodeMirText .= "mode:  'application/$CodemirrorMime',
    indentUnit: 4,
    lineNumbers: true,
    matchBrackets: true,
    tabMode : 'shift',
    styleActiveLine: true,
    viewportMargin: Infinity,
    autoCloseBrackets: true,
    extraKeys: {'Tab': function(){editor.replaceSelection('    ' , 'end');}}
});";
}  elsif ($CodemirrorMime eq "x-java") {
    $CodeMirText .= "mode:  'text/x-java',
    theme: 'eclipse',
    indentUnit: 4,
    lineNumbers: true,
    matchBrackets: true,
    tabMode : 'shift',
    styleActiveLine: true,
    viewportMargin: Infinity,
    autoCloseBrackets: true,
    extraKeys: {'Tab': function(){editor.replaceSelection('    ' , 'end');}}
});";
}  elsif ($CodemirrorMime =~  /x-/ or $CodemirrorMime eq "javascript") {
    $CodeMirText .= "mode:  'text/$CodemirrorMime',
    indentUnit: 4,
    lineNumbers: true,
    matchBrackets: true,
    tabMode : 'shift',
    styleActiveLine: true,
    viewportMargin: Infinity,
    autoCloseBrackets: true,
    extraKeys: {'Tab': function(){editor.replaceSelection('    ' , 'end');}}
});";
} else {
    $CodeMirText .= "mode:  '',
    lineNumbers: true,
    matchBrackets: true,
    tabMode : 'shift',
    styleActiveLine: true,
    viewportMargin: Infinity});";
}

</script>

<startouttext />
<script type="text/javascript">
$CodeMirText
</script>
<endouttext />
</library>

Instead of using this library, one can also use the configuration for a single programming language:

Example

Hint: when making changes to the footer library, it may be necessary to empty the browser cache to see the changes.

Software und Dokumente der ProFormA-Gruppe der Ostfalia
https://elearning-ostfalia.github.io/proforma/

Dieses Vorhaben wurde aus Mitteln des Bundesministeriums für Bildung und Forschung unter den Förderkennzeichen 01PL11066H und 01PL16066H gefördert. Die Verantwortung für den Inhalt dieser Webseite liegt bei den Autorinnen.