{"id":2584,"date":"2021-09-13T19:14:41","date_gmt":"2021-09-14T02:14:41","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=doc&#038;p=2584"},"modified":"2025-09-10T10:44:49","modified_gmt":"2025-09-10T17:44:49","slug":"code-editor","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/code-editor\/","title":{"rendered":"Code editor"},"content":{"rendered":"\n<p>The Interview platform provides a feature-rich <a href=\"https:\/\/app.coderpad.io\/sandbox\" target=\"_blank\" rel=\"noreferrer noopener\">code editing environment<\/a> for your candidate to work in.&nbsp;<\/p>\n\n\n\n<p>We support <a href=\"https:\/\/coderpad.io\/languages\/\">over 60 programming languages<\/a> and have different libraries and frameworks built in per language, and our core editor functionality is available for each programming language (unless otherwise specified).<\/p>\n\n\n\n<p>We also provide enhanced support with better autocomplete and other editor functionality for the following languages:<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.34%\">\n<ul class=\"wp-block-list\">\n<li>Ruby<\/li>\n\n\n\n<li>Python 3<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>Java<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:33.34%\">\n<ul class=\"wp-block-list\">\n<li>C<\/li>\n\n\n\n<li>C++<\/li>\n\n\n\n<li>C Sharp<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\">\n<ul class=\"wp-block-list\">\n<li>Swift<\/li>\n\n\n\n<li>Kotlin<\/li>\n\n\n\n<li>TypeScript<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<p>Code editor features:<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><nav aria-label=\"Table of Contents\"><ul><li class=\"\"><a href=\"#autocomplete\">Autocomplete<\/a><ul><\/ul><\/li><li class=\"\"><a href=\"#multi-cursor\">Multi-cursor<\/a><ul><\/ul><\/li><li class=\"\"><a href=\"#duplicate-lines\">Duplicate lines<\/a><\/li><li class=\"\"><a href=\"#code-folding\">Code folding<\/a><\/li><li class=\"\"><a href=\"#error-highlighting\">Error highlighting<\/a><\/li><li class=\"\"><a href=\"#right-click-options\">Right-click options<\/a><\/li><li class=\"\"><a href=\"#command-palette\">Command Palette<\/a><\/li><li class=\"\"><a href=\"#run-code-snippets\">Run code snippets<\/a><\/li><li class=\"\"><a href=\"#frontend-backend-multi-file-layout\">Frontend &amp; backend multi-file layout<\/a><ul><li class=\"\"><a href=\"#prettify\">Prettify<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 To run or execute your code at anytime, simply click on the <strong>Run<\/strong> button in the top left corner or use the keyboard short cut: <kbd>\u2318<\/kbd> + <kbd>enter<\/kbd> OR <kbd>\u2318<\/kbd> + <kbd>S<\/kbd> for iOS or <kbd>CTRL<\/kbd> + <kbd>enter<\/kbd> OR <kbd>CTRL<\/kbd> + <kbd>S<\/kbd> for Windows.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"autocomplete\">Autocomplete<\/h2>\n\n\n\n<p>To use autocomplete, just start typing and the editor will make suggestions:<\/p>\n\n\n\n<p>Scroll through the suggestions using the up and down arrows to find the code you\u2019re looking for. Then, hit <code>Tab<\/code> or <code>Enter<\/code> to accept the suggestion and have Interview fill in the code.<\/p>\n\n\n\n<p>By default, autocomplete is triggered whenever <code>.<\/code> is pressed. You can also use <code>Ctrl + Space<\/code> to initiate the autocomplete at any point.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/image-38.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"676\" height=\"327\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/image-38.png\" alt=\"An example of autocomplete, the code snippet &quot;myArray&quot; is shown and the autocomplete dropdown menu has opened with the first item being &quot;at&quot;.\" class=\"wp-image-24196\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-38.png 676w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-38-300x145.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-38-18x9.png 18w\" sizes=\"auto, (max-width: 676px) 100vw, 676px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"auto-close-brackets\"><strong>Auto-close brackets<\/strong><\/h3>\n\n\n\n<p>Interview provides the ability to automatically close related symbols &#8212; like parenthesis, brackets, and quotation marks.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 To help reduce potential bugs, this feature is enabled by default.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"352\" style=\"aspect-ratio: 806 \/ 352;\" width=\"806\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/autoclosemp4.mp4\"><\/video><\/figure>\n\n\n\n<p>The full list of symbols that will auto-close are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>[]<\/code> \u2013 Brackets<\/li>\n\n\n\n<li><code>{}<\/code> \u2013 Curly braces<\/li>\n\n\n\n<li><code>()<\/code> \u2013 Parenthesis<\/li>\n\n\n\n<li><code>\"\"<\/code> \u2013 Double quotation marks<\/li>\n\n\n\n<li><code>''<\/code> \u2013 Single quotation marks<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"multi-cursor\">Multi-cursor<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"select-cursor-positions-lines-and-sections\">Select cursor positions, lines, and sections<\/h3>\n\n\n\n<p>Multi-cursor has a number of different methods for line selection:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Alt+Click<\/code> selects or deselects one or more cursor positions, anywhere in the code.<\/li>\n\n\n\n<li><code>Alt+Shift+Click<\/code> and drag selects multiple contiguous lines at a time.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/cursor_position.mp4\"><\/video><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Because of this, you can even scroll in the middle of selecting lines.<\/p>\n\n\n\n<p>If you\u2019ve 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.<\/p>\n\n\n\n<p><code>Alt + Ctrl + Up\/Down<\/code> in Windows or <code>Option + Shift + Up\/Down<\/code> in Mac allows you to select contiguous lines above and below your current selection.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"428\" style=\"aspect-ratio: 862 \/ 428;\" width=\"862\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/multiselectmp4.mp4\"><\/video><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"duplicate-lines\">Duplicate lines<\/h2>\n\n\n\n<p><code>Alt + Shift + Up\/Down<\/code> duplicates the lines you are on.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"472\" style=\"aspect-ratio: 642 \/ 472;\" width=\"642\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/duplinesmp4.mp4\"><\/video><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"code-folding\">Code folding<\/h2>\n\n\n\n<p>Free-up space and improve readability by temporarily hiding code using <em>code folding<\/em>.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-34.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"606\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-34-1024x606.png\" alt=\"Dropdown arrows appear on lines 1, 5, and 8. The arrows are pointing down.\" class=\"wp-image-15352\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-34-1024x606.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-34-300x177.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-34-768x454.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-34.png 1084w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Click on an arrow to close the code block; click on it again to open it back up.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-35.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"889\" height=\"514\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-35.png\" alt=\"Lines 1,5, and 8 has the code folded and the dropdown arrows are now pointing to the right.\" class=\"wp-image-15354\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-35.png 889w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-35-300x173.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-35-768x444.png 768w\" sizes=\"auto, (max-width: 889px) 100vw, 889px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"error-highlighting\">Error highlighting<\/h2>\n\n\n\n<p>Similar to other IDEs, Interview highlights errors as you make them by underlining them in red.&nbsp;Yellow lines signal warnings.<\/p>\n\n\n\n<p>Hover over the red lines to see more information about the error.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d802224f.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d802224f.png\" alt=\"There is a method that only accepts one argument. In the method instantiation there are two methods added, and the second one is underlined with a red error line.\" style=\"width:800px;height:310px\"\/><\/a><\/figure>\n<\/div>\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"right-click-options\">Right-click options<\/h2>\n\n\n\n<p><code>Right-click<\/code> opens a dialog box with common tools, code navigation options, and access to the Command Palette.&nbsp;<\/p>\n\n\n\n<p>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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-36.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"717\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-36.png\" alt=\"The right click menu for a supported language is displayed and starts with &quot;Go to definition&quot; and ends with &quot;command palette&quot;. \" class=\"wp-image-15356\" style=\"width:570px;height:538px\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-36.png 760w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-36-300x283.png 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>If you are using a non-enhanced support language, there are no navigation options:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-37.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"574\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-37.png\" alt=\"The right click menu for a non-supported language is displayed and starts with &quot;change all occurrences&quot; and ends with &quot;command palette&quot;. \" class=\"wp-image-15358\" style=\"width:625px;height:431px\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-37.png 833w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-37-300x207.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-37-768x529.png 768w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"command-palette\">Command Palette<\/h2>\n\n\n\n<p><code>Right-Click<\/code> and select <strong>Command Palette<\/strong>, or press <code>F1<\/code> on your keyboard.<\/p>\n\n\n\n<p>The Command Palette provides access to many pad commands and their related keyboard shortcuts.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-38.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"846\" height=\"334\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-38.png\" alt=\"The command palette dropdown is shown with the &quot;Add cursor above&quot; menu item highlighted.\" class=\"wp-image-15360\" style=\"width:635px;height:251px\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-38.png 846w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-38-300x118.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-38-768x303.png 768w\" sizes=\"auto, (max-width: 846px) 100vw, 846px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"run-code-snippets\">Run code snippets<\/h2>\n\n\n\n<p>There may be instances where you don&#8217;t want to run all the code in the editor, but rather just a single function or method.<\/p>\n\n\n\n<p>You can do this by highlighting the code you want to run, and then either clicking the <strong>Run<\/strong> button at the top of the editor or using the <kbd>\u2318<\/kbd> + <kbd>enter<\/kbd> OR <kbd>\u2318<\/kbd> + <kbd>S<\/kbd> (Mac) \/ <kbd>CTRL<\/kbd> + <kbd>enter<\/kbd> OR <kbd>CTRL<\/kbd> + <kbd>S<\/kbd> (Windows) shortcuts:<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"782\" style=\"aspect-ratio: 1600 \/ 782;\" width=\"1600\" controls src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/codesnippet.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frontend-backend-multi-file-layout\">Frontend &amp; backend multi-file layout<\/h2>\n\n\n\n<p>Interview provides an interface specifically for frontend and backend coding. You can find more information on using the this interface on <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/using-pad-features\/#multi-file-frameworks\">the languages page here<\/a>.<\/p>\n\n\n\n<p>For more information on creating multi-file frontend questions, <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-and-editing-a-question\/#creating-multi-file-questions\">check out this guide<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"prettify\"><strong>Prettify<\/strong><\/h3>\n\n\n\n<p>You can configure Prettier or similar tools to auto-format your code in CoderPad multi-file projects.&nbsp;To do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use the language&#8217;s package manager to install the formatting library of your choice via the in-pad shell (<em>Note: Install via apt-get is not currently supported<\/em>).<\/li>\n\n\n\n<li>Define a new rule in the <code>.cpad<\/code> file for <code>format<\/code> and specify the command to run your formatting library, like so:<\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\"><span class=\"hljs-string\">\"format\"<\/span>: {\n\t<span class=\"hljs-attr\">\"label\"<\/span>: <span class=\"hljs-string\">\"Format\"<\/span>,\n\t<span class=\"hljs-attr\">\"command\"<\/span>: <span class=\"hljs-string\">\"npx prettier src\/ --write\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>To format, click the run button dropdown and select Run Format.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2025\/07\/img_687a348763151.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2025\/07\/img_687a348763151.png\" alt=\"A code editor window with JSON formatted code for running tasks. The code defines three tasks: &quot;main&quot;, &quot;test&quot;, and &quot;format&quot;, with commands &quot;npm run main&quot;, &quot;npm run test&quot;, and &quot;npx prettier src\/ --write&quot; respectively. A dropdown menu is open above the code with options: &quot;Run Main&quot;, &quot;Run Tests&quot;, and &quot;Run Format&quot;.\" style=\"width:644px;height:auto\"\/><\/a><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>For example, using a Javascript or Typescript environment, you can use\u00a0<code>npm install prettier<\/code>, then set up a\u00a0<code>.prettierrc<\/code>\u00a0command to define the formatting options<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u26a0\ufe0fThis configuration may not be available for all languages as some require a root-level package install.&nbsp;<\/p>\n<\/blockquote>\n","protected":false},"parent":835,"menu_order":2,"template":"","class_list":["post-2584","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/2584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":94,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/2584\/revisions"}],"predecessor-version":[{"id":43216,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/2584\/revisions\/43216"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/835"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=2584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}