11

I am building a web app which runs certain commands on the terminal and display the results back on web app. I am able to run commands using child_process.exec and fetch the results the problem i'm facing is while displaying it on an html page.

I want something like this: enter image description here

Is there any way to show the command line output like this ? Any leads would do. Thank you.

6
  • what format are you getting the results in?
    – yaakov
    Commented Dec 19, 2018 at 22:34
  • @YaakovAinspan plain text filled with \r\n.
    – Hith
    Commented Dec 19, 2018 at 22:35
  • So... what have you tried? Do you have any code showing your problem?
    – yaakov
    Commented Dec 19, 2018 at 22:36
  • I am appending it to a text node and displaying the result but the formatting is not even remotely close to how it looks on terminal. [link]i.sstatic.net/b9s5q.png
    – Hith
    Commented Dec 19, 2018 at 22:39
  • Can you post some sample output so I can see what it looks like?
    – yaakov
    Commented Dec 19, 2018 at 22:40

1 Answer 1

18

For a terminal/shell/console-like experience in a browser or web app, check out...

JS solutions, for interactivity

HTML/CSS-only solutions, for non-interactivity

To simulate a terminal, with no connectivity or interactivity:

Or perhaps start from scratch with a black background, white mono-space font and build it up from there...

CodePen

#container {
  background-color: #000000;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 400px;
  padding: 3em;
}

#content {
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
}
<div id="container">
  <div id="content">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.