Search code examples
javascripthtmljquerycssjquery-terminal

How to make jquery terminal cursor a block, but an underscore?


How can I change the jquery terminal cursor so it can be like in the picture here: picture. I have tried messing with the css, and I was able to change the shape a bit using .cmd in css but it wouldnt change the thickness and height making it noneffective.

I do know there is a variable called: --animation: terminal-bar that you can add to the terminal's css but im not sure if there is one that can make it an underscore.


Solution

  • In the documentation it says

    To change font size of the terminal you can use this code:

    toggle highlight .terminal, .cmd, .terminal .terminal-output div div, .cmd .prompt {
        font-size: 20px;
        line-height: 24px; 
    } 
    

    Or from version 1.0.0 (and if you don't care about IE or Edge) you can simplify the code using --size css variables like this:

    toggle highlight .terminal {   
       --size: 2;
    }
    

    Demo:

    $('body').terminal(
      function(command, term) {
        if (command == 'test') {
          term.echo("you just typed 'test'");
        } else {
          term.echo('unknown command');
        }
      }, {
        prompt: 'user@host:~ $ ',
        greetings: false
      }
    );
    .terminal {
      --background: black;
      --color: rgba(0, 255, 0, 0.99);
      --size: 1.3;
      --animation: terminal-underline;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.37.1/js/jquery.terminal.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.37.1/css/jquery.terminal.min.css" rel="stylesheet" />