EmbedConsole is a javascript library that embeds a javascript developer console, similar to those that come with most modern browsers development tools. It allows users to communicate with an application directly using javascript, displaying the result of the code excecution in realtime. It is great for insteracting with API’s or displaying feedback through javscript.

Take it for a test run below. Type valid and invalid javascript commands to execute them.

See the Pen EmbedConsole-develop by Edwin Velazquez (@recursiveEd) on CodePen.

Getting Started

Before using the library, please make sure you link the css and javascript files embed-consoe.min.css and embed-console.min.js respectively. Embed Console uses highlight.js by default for syntax highlighting. If you would like syntax highlighting, install highlight.js. If you want to implement your own custom syntax highlighting, check the highlighting section of this documentation.

  var embedConsole = new EmbedConsole('console');    

To add an embeddable console to your application, create an EmbededConsole object passing the id of the container where the console will be embeded.

Methods

• execute ( command ) - Execute the command passed as a parameter.
  • command ( required ) - A string representation of the command to run.
    • Example:

      embedConsole.execute('Math.PI');
      

• add ( { output, klass, javascript } ) - Adds a output to the console without executing the command.
  • output ( required ) - The message to add to the console. Note: HTML will be passed raw.
  • kalss ( optional ) - A string representing a class to the dom element pertaining to the log message.
  • javascript ( optional ) - If false, the output will be not be treated as a javascript command and will not go through the normal syntax highlighting.
    • Example:

      taggableInput.add( ['can', 'you', 'see', 'me', 'now' ] );
      

• populate ( commands ) - Command to be executed by the console.
  • command ( required ) - An array containing a list of commands to execute.
    • Example:

      embedConsole.populate([
      "Math.PI;", 
      "Math.E;",
      "Math.answer.everything;",
      "Math.answer = { everything: 42 };",
      "Math.answer.everything;"
      ]);
      

• updateInput ( postion ) - Sets the input box to the input defined by the position passed.
  • position ( required ) - A zero-based integer index of the command.
    • Example:

      embedConsole.updateInput ( 3 );
      

Highlighting

EmbedConsole uses highlight.js out of the box. You can also use your own custom highlighting solution by passing a method to be executed on any call made though EmbedConsole

  var embedConsole = new EmbedConsole('console', {
    highlight: function( element ){
      var codes   = element.getElementsByTagName( "code" );
      for ( var i = 0; i < codes.length;  i++ ) hljs.highlightBlock( codes[i] );
    }
  });

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/edwinv710/cloudconvert-ruby. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.