Difference between revisions of "Widget:CodeExplorer"

From Coder Merlin
Line 29: Line 29:
<includeonly>
<includeonly>
<form action="" id="codeEditorForm<!--{$uniqueID|validate:int}-->">
<form action="" id="codeEditorForm<!--{$uniqueID|validate:int}-->">
     <div>
     <div class="merlin-code-explorer-code-panel">
         <textarea id="codeEditorTextArea<!--{$uniqueID|validate:int}-->" >
         <textarea id="codeEditorTextArea<!--{$uniqueID|validate:int}-->" >
             <!--{$initialCode}-->
             <!--{$initialCode}-->
Line 95: Line 95:
         <input class="merlin-code-explorer-run-button" type="submit" value="Run" />
         <input class="merlin-code-explorer-run-button" type="submit" value="Run" />
     </div>
     </div>
    <div id="codeEditorCombinedOutput<!--{$uniqueID|validate:int}-->" class="merlin-code-explorer-combined-output"></div>
</form>
</form>
<div id="codeEditorCombinedOutput<!--{$uniqueID|validate:int}-->" class="merlin-code-explorer-combined-output"></div>
</includeonly>
</includeonly>

Revision as of 07:29, 14 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!")
}
}}