Example using the VS Code / Terminal Split screen terminal layout

Steps
Scenario with VS Code / Terminal UI Split Screen
The Katacoda editor-terminal
UI Layout combines an Editor with a Terminal. When changes are made to files using the editor, they are automatically sync'ed to the user's home directory.
Index.json
The syntax for the editor is automatically inferred from the file extension. This can be enforced by including a "uisettings"
"environment": { "uilayout": "vscode-terminal-split" },
Helper Functionality
To support users, Katacoda has integrated various features to help users.
Copy file to editor:
var http = require('http'); var requestListener = function (req, res) { res.writeHead(200); res.end('Hello, World!'); } var server = http.createServer(requestListener); server.listen(3000, function() { console.log("Listening on port 3000")});
The following snippet will prepend the contents of the editor:
console.log("Starting...")
Within the Markdown, include:
<pre class="file" data-filename="app.js" data-target="prepend">console.log("Starting...") </pre>
The following snippet will append the contents of the editor:
console.log("Finishing...")
Within the Markdown, include:
<pre class="file" data-filename="app.js" data-target="append">console.log("Finishing...") </pre>
The editor can copy to particular files based on the data-filename attribute:
console.log("Index.js here...")
Within the Markdown, include:
<pre class="file" data-filename="index.js" data-target="replace">console.log("Index.js here...") </pre>
Using the data-target="insert"
attribute you can instruct the editor to insert the text in a particular position marked by data-marker
attribute.
#TODO-insert
<pre class="file" data-filename="app.js" data-target="insert" data-marker="#TODO-insert"> console.log("Inserted value using the data-marker attribute...") </pre>
console.log("Inserted value using the data-marker attribute...")
New Files
Create a new file via the CLI:
touch newFile.js
The Markdown is:
`touch newFile.js`{{execute}}
This can then be opened:
newFile.js
The Markdown is:
`newFile.js`{{open}}