Code editor
How to open the editor, choose a language, how your draft is kept, how the panes are laid out, and how to adjust the editor.
In the code editor you write a programming problem’s solution, run it and submit it for judging. The statement, your code and the results are in one window.
Opening the editor
Section titled “Opening the editor”- On a problem page, choose Open editor or press E.
- On My work, select a card under Continue.
- In a submission’s result, choose Open this version in the editor (see Submissions history).
The editor opens in its own tab in the app (address /courses/<course>/problems/<problem>/solve), and hides the sidebar to leave more room for code. Press [ to show it.
Excel tasks have no editor – you solve them by uploading a file (see Excel tasks). Until the topic starts, you see “This problem isn’t open yet” instead of the editor.
Layout
Section titled “Layout”students/learning/editor-workspaceTop bar: Problem (back to the problem page), the problem’s title, the draft status, the language picker, Run samples and Submit.
The left pane has two tabs:
- Statement – input and output, time and memory limits, the statement and related wiki pages;
- Submissions – your submissions for this problem (see Submissions history).
The editor is in the middle. Its header shows the file name (main.cpp or main.py), the state of code analysis, and the Compare and Editor options menus. At the bottom is the cursor’s line and column (“Ln 12, Col 5”).
The bottom panel holds the results of runs and judging. Its tabs are Tests, Last result, Custom input and, when there are compiler messages, Compiler. On the right it shows how many attempts are left today. How to use them: Running and submitting.
Pane sizes
Section titled “Pane sizes”- Drag the gap between panes to resize them.
- Double-click a gap to hide or show the statement or the bottom panel.
- When a gap has keyboard focus, the arrow keys resize and Enter hides or shows the pane.
- You can also hide the statement with the button in its tab bar, and show it again with the button at the left of the top bar.
Pane sizes are remembered in this browser and apply to every problem. On a phone the panes are stacked and can’t be resized.
Language and starter code
Section titled “Language and starter code”The editor supports C++, Python and C#. You can pick only the languages the problem allows. If only one is allowed, you see its name instead of a picker. The file name next to the editor shows the selected language: main.cpp, main.py or main.cs.
When the editor opens, it picks the language you last used for this problem on this device. Otherwise it uses your account’s default language (if allowed), or else the first one in the list.
New code starts from the starter code: the problem’s template, or, if there is none, the course’s template for that language. Without one, the editor starts empty.
Each language has its own draft. When you switch languages, your current code is saved and the editor shows the other language’s draft or template.
If the problem allows only languages the editor doesn’t support yet, you see “The editor doesn’t support the languages allowed for this problem yet.”
Your draft
Section titled “Your draft”The editor saves your code automatically, a moment after you stop typing. The top bar shows the state:
- “Saving…” – saving;
- “Draft saved on this device” – saved;
- “The draft could not be saved on this device” – the browser didn’t allow it (e.g. site data is blocked or storage is full).
Press Ctrl S (⌘ S on a Mac) to save at once. Your draft is also saved before every run or submission.
When you come back to a problem, the editor’s bottom bar says “Restored your draft from …”. If you don’t need it, choose Discard and confirm – the editor goes back to the template.
Your last custom input (the Custom input tab) is remembered in this browser too.
Editor options
Section titled “Editor options”The gear button in the editor’s header opens Editor options:
| Item | What it does |
|---|---|
| Minimap | Shows an overview of the whole file beside the code |
| Word wrap | Wraps long lines instead of scrolling sideways (Alt Z) |
| Larger text / Smaller text | Changes the font size (11 to 24 px) |
| Default text size | Goes back to 13 px |
| Command palette | Every editor command (F1) |
| Go to line | Jumps to a line |
| Find and replace | Searches and replaces in the code |
| Keyboard shortcuts | The editor’s keyboard shortcuts |
| Reset to template | Replaces your current code with the template. Without a template, the item is Clear code |
The editor asks you to confirm before resetting or clearing. While the page is open, you can undo it with Ctrl Z.
The same options are under Settings → Editor:
- Font size – 11–24 px, 13 px by default;
- Minimap;
- Tab size – 2 or 4 spaces, 4 by default;
- Word wrap.
A preview there shows how code looks with your choices. These settings are saved to your account, so they follow you to every device. The editor’s own menu changes the same settings.
Snippets
Section titled “Snippets”Insert common pieces of code by typing their name and picking the suggestion:
| Language | Type | You get |
|---|---|---|
| C++ | includes |
The most common headers and using namespace std; |
| C++ | main |
The main function |
| C++ | for |
A for loop |
| C++ | ifstream, ofstream |
Opening the input or output file with this problem’s file name |
| Python | readfile, writefile |
Reading the input file or writing the output file with this problem’s file name |
| Python | ints |
Reading a line of numbers into a list |
| C# | main |
A Program class with a Main method that reads a line and prints it |
| C# | readfile, writefile |
A StreamReader or StreamWriter for this problem’s input or output file |
| C# | ints |
Reading a line of numbers into an int[] array |
| C# | for |
A for loop |
Code analysis gives more suggestions while you type (names of functions and variables, errors) for C++ and Python. C# has no code analysis: the editor suggests common C# keywords and .NET names, and the snippets above.
Compiler messages
Section titled “Compiler messages”After a run or a submission, compiler errors and warnings are underlined in your code. The Compiler tab lists them with line and column numbers. Select a message to jump to that place in the code.
The messages come from the latest compile – of a run or of a submission, whichever was later – and are shown only when they are in the language currently selected.
When the problem changes
Section titled “When the problem changes”If your teacher updates the problem while you work, running or submitting shows “This problem was updated. Reload it to see the new statement – your code is kept.” Choose Reload: the statement and examples update, and your draft stays.
Keyboard
Section titled “Keyboard”In the editor, Tab indents code. Press Ctrl M (⌃ ⇧ M on a Mac) so that Tab moves focus out of the editor; press it again to switch back.
All editor shortcuts: Keyboard shortcuts for students.