Docs Index

Doc

Code Editor

Last updated on

CoderPad provides a feature-rich code editing environment for your candidate to work in. 

We support over 30 programming languages and have different libraries and frameworks built in per language, and our core editor functionality is available for each programming language (unless otherwise specified).

We also provide enhanced support with better autocomplete and other editor functionality for the following languages:

  • Ruby
  • Python 3
  • JavaScript
  • Java
  • C
  • C++
  • C Sharp
  • Swift
  • Kotlin
  • TypeScript

Code Editor Feature List

  1. Autocomplete
  2. Multi-cursor
  3. Duplicate lines
  4. Code folding
  5. Error highlighting
  6. Right-click options
  7. Command palette
  8. Frontend multi-file layout


Autocomplete

To use autocomplete, just start typing and the editor will make suggestions:

Scroll through the suggestions using the up and down arrows to find the code you’re looking for. Then, hit Tab or Enter to accept the suggestion and have CoderPad fill in the code.

By default, autocomplete is triggered whenever . is pressed. You can also use Ctrl + Space to initiate the autocomplete at any point.

Auto-close Brackets

CoderPad provides the ability to automatically close related symbols — like parenthesis, brackets, and quotation marks.

✅ To help reduce potential bugs, this feature is enabled by default.

The full list of symbols that will auto-close are:

  • [] – Brackets
  • {} – Curly braces
  • () – Parenthesis
  • "" – Double quotation marks
  • '' – Single quotation marks


Multi-Cursor

Multi-cursor functionality lets you edit multiple lines at once. This can be especially useful when you want to make the same change to multiple lines of code.

Select cursor positions, lines, and sections

Multi-cursor has a number of different methods for line selection:

  • Alt+Click selects or deselects one or more cursor positions, anywhere in the code.
  • Alt+Shift+Click and drag selects multiple contiguous lines at a time.

This method of multi-line select stacks on top of other methods, since you only have to hold down the modifier key when actively clicking the mouse to select a new line.

Because of this, you can even scroll in the middle of selecting lines.

If you’ve selected adjacent lines, but later realize you missed a line you wanted to add, you can use this method to add to your list of selected lines.

Alt + Ctrl + Up/Down in Windows or Option + Shift + Up/Down in Mac allows you to select contiguous lines above and below your current selection.


Duplicate lines

Alt + Shift + Up/Down duplicates the lines you are on.


Code folding

Free-up space and improve readability by temporarily hiding code using code folding.

Hover over the space between the line numbers and the code. You will see dropdown arrows appear at the beginning of all major code blocks such as comments, imports, classes, methods, etc.

Click on an arrow to close the code block; click on it again to open it back up.


Error highlighting

Similar to other IDEs, CoderPad highlights errors as you make them by underlining them in red. Yellow lines signal warnings.

Hover over the red lines to see more information about the error.


Right-click options

Right-click opens a dialog box with common tools, code navigation options, and access to the Command Palette. 

If you are using one of the enhanced support languages, you see a list of options related to navigating around the code if the cursor is on a class, object, method, or function:

If you are using a non-enhanced support language, there are no navigation options:


Command Palette

Right-Click and select Command Palette, or press F1 on your keyboard.

The Command Palette provides access to many pad commands and their related keyboard shortcuts.


Frontend multi-file layout

CoderPad provides an editor specifically for frontend coding. There are three different code editor windows for HTML, CSS, and JavaScript respectively.

To use the HTML/JS/CSS pad with your CoderPad questions: from your dashboard create a new pad and select HTML/JS/CSS from the dropdown list.

Alternatively you can select an HTML/CSS/JS question from your list of questions when you are in a pad and click ‘Replace Pad’.

A dialog prompts you to select a code layout. 

You can choose either the Frontend Multifile option (this is our recommended selection), or the CoderPad Classic layout.

When opening a question in frontend multi-file layout, this is what you’ll see:

❗If you select Classic Layout, it still shows three files, but doesn’t parse your question’s code into the dedicated files. Instead, the CSS and JS files are empty, and any HTML code is removed.

Creating multi-file questions

To create a multi-file question you will first have to create an HTML question that contains your HTML, Javascript, and CSS, and then load them into the pad with either the multi-file or classic layout.

When displaying the HTML question in the multi-file layout, CoderPad automatically parses your single HTML file into the relevant file types.

  • All <script> tag contents are imported into the index.js file sequentially.
  • Likewise, all <style> tags have their contents imported into the index.css file sequentially.
  • Any remaining HTML remains within the index.html file.

This means that the following contents of a classic layout HTML question:

<html> <head> <style>p {color: red;}</style> </head> <body> <p>Text here</p> <script type="text/jsx"> console.log(document); </script> <script>console.log(window);</script> <style>p {color: blue;}</style> </body> </html>
Code language: HTML, XML (xml)

Will output the following files:

HTML (index.html)

Javascript (index.js)

CSS (index.css)

<html> <head></head> <body> <p>Text here</p> </body> </html>
Code language: HTML, XML (xml)
console.log(document); console.log(window);
Code language: JavaScript (javascript)
p {color: red;} p {color: blue;}
Code language: CSS (css)

Multi-file output

When you click Run in a multi-file enabled pad, the contents of all files are placed within an HTML iframe preview for rendering. Here’s how the contents merge together:

index.html

If the index.html file has a <head> and <body> tag, the CSS and JS from the other two files are injected into those tags for the final iframe output. 

If not, we will construct <head> and <body> tags for you and attempt to automatically place the CSS and JavaScript at the start of the document within the head.

index.css

The index.css contents are added to the end of the head tag.

index.js

The contents of the index.js file is added to a <script> tag at the end of the <body> element. However, you still need to add imports in the <script> tags of the <head> element of the index.html file for any libraries that you use.

Full Example

To showcase how the multi-file parser outputs, let’s see an example.

Given the following:

index.html

index.js

index.css

<html> <head> <script src="https://somepath/somepackage.js"></script> <script src="https://somepath/anotherpackage.js"></script> </head> <body> <style>p {color: green}</style> <div id="root"></div> <style>p {color: blue}</style> </body> </html>
Code language: HTML, XML (xml)
h1 { color: red; }
Code language: CSS (css)
console.log("CoderPad is great!");
Code language: JavaScript (javascript)

You’d get the following output in the iframed HTML:

<html> <head> <script src="https://somepath/somepackage.js"></script> <script src="https://somepath/anotherpackage.js"></script> <style> h1 { color: red; } </style> </head> <body> <style> p { color: green; } </style> <div id="root"><h1>Hello, Friends!</h1></div> <style> p { color: blue; } </style> <script> console.log("CoderPad is great!"); </script> </body> </html>
Code language: HTML, XML (xml)