Difference between revisions of "Widget:CodeExplorer"
From Coder Merlin
| Line 53: | Line 53: | ||
event.preventDefault(); | event.preventDefault(); | ||
// Clear output | |||
$("#codeEditorCombinedOutput<!--{$uniqueID|validate:int}-->").empty(); | |||
$("# | |||
// Submit form via POST | // Submit form via POST | ||
| Line 73: | Line 72: | ||
response.done(function(data) { | response.done(function(data) { | ||
var executionCodeResponse = $(data)[0]; | var executionCodeResponse = $(data)[0]; | ||
var standardError = consoleToHTML(executionCodeResponse.standardError); | |||
var standardOutput = consoleToHTML(executionCodeResponse.standardOutput); | |||
$("# | var standardErrorLines = standardError.split("<br/>"); | ||
$("# | var errorClass = "merlin-code-explorer-combined-output-error"; | ||
for (const errorLine of standardErrorLines) { | |||
if (errorLine.match(/warning:/)) { | |||
errorClass = "merlin-code-explorer-combined-output-warning"; | |||
} | |||
if (errorLine.match(/error:/)) { | |||
errorClass = "merlin-code-explorer-combined-output-error"; | |||
} | |||
$("#codeEditorCombinedOutput<!--{$uniqueID|validate:int}-->").append("<span class='" + errorClass + "'>" + errorLine + "</span><br/>"); | |||
}; | |||
$("#codeEditorCombinedOutput<!--{$uniqueID|validate:int}-->").append(standardOutput); | |||
}); | }); | ||
}); | }); | ||
| Line 82: | Line 93: | ||
</div> | </div> | ||
<div class="merlin-code-explorer-control-panel"> | <div class="merlin-code-explorer-control-panel"> | ||
<input class="merlin-code-explorer-run-button" type="submit" value="Run | <input class="merlin-code-explorer-run-button" type="submit" value="Run" /> | ||
</div> | </div> | ||
</form> | </form> | ||
<div id=" | <div id="codeEditorCombinedOutput<!--{$uniqueID|validate:int}-->" class="merlin-code-explorer-combined-output"></div> | ||
</includeonly> | </includeonly> | ||
Revision as of 22:32, 13 June 2021
Parameters:
- uniqueID
- integer: id for editor, must be unique per page
- width
- integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (full width)
- height
- integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (~10 lines)
- lineNumbers
- boolean: true to display line numbers
- theme
- string: name of theme (which must be loaded via css)
- readOnly
- boolean: true if editing should be disabled
- mode
- string: language for highlighting (which must be loaded via js)
- initialCode
- string: initial code to place in editor
Example:
{{#widget:CodeExplorer
|uniqueID=10
|width=null
|height=null
|lineNumbers=true
|theme=vibrant-ink
|readOnly=false
|mode=swift
|initialCode=func sayHello() {
print("Hello, World!")
}
}}
