Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

Sorry, you do not have permission to ask a question, You must login to ask a question.

Forgot Password?

Need An Account, Sign Up Here

Please type your username.

Please type your E-Mail.

Please choose an appropriate title for the post.

Please choose the appropriate section so your post can be easily searched.

Please choose suitable Keywords Ex: post, video.

Browse

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Logo Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Logo

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Navigation

  • Home
  • About Us
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • About Us
  • Contact Us
Home/ Questions/Q 2481

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 61k
Author
Asked: November 26, 20242024-11-26T05:49:08+00:00 2024-11-26T05:49:08+00:00

Welcoming colors to the stdlib REPL!

  • 61k

The stdlib REPL now supports syntax highlighting and custom theming.

The stdlib REPL (Read-Eval-Print Loop) is an interactive interpreter environment for executing JavaScript and enabling easy prototyping, testing, debugging, and programming. With syntax highlighting now added, editing in the REPL becomes way more intuitive and fun.

An animated GIF showing the typing of  raw `var a = /45/;` endraw  and demonstrating syntax highlighting applied in real-time

How to get your hands on the new hotness? Download the latest package from npm, fire it up, and just start typing.

$ npm install -g @stdlib/repl $ stdlib-repl 
Enter fullscreen mode Exit fullscreen mode

We have various themes to get started with. But if you want to make the REPL your own, you can also customize it. We explore customization later in this post.

stdlib

A brief segue about stdlib. stdlib is a standard library for numerical and scientific computation for use in web browsers and in server-side runtimes supporting JavaScript. The library provides high-performance and rigorously tested APIs for data manipulation and transformation, mathematics, statistics, linear algebra, pseudorandom number generation, array programming, and a whole lot more.

We're on a mission to make JavaScript (and TypeScript!) a preferred language for numerical computation. If this sounds interesting to you, check out the project on GitHub, and be sure to give us a star 🌟!

Moving on… 🏃💨

Themes

Where were we? Ah, yes, themes! The REPL comes with the following themes built-in.

Pro tip: You can always use the themes() REPL command to list available themes.

  • stdlib-ansi-basic: The classic. The default.

A screenshot of stdlib's ANSI

  • stdlib-ansi-light: For the light mode users.

A screenshot of stdlib's ANSI light theme when enabled in the stdlib REPL

  • stdlib-ansi-dark: For the normal users.

A screenshot of stdlib's ANSI dark theme when enabled in the stdlib REPL

  • stdlib-ansi-strong: Expressive and bold.

A screenshot of stdlib's ANSI strong theme when enabled in the stdlib REPL

  • solarized: My personal favorite.

A screenshot of stdlib's solarized theme when enabled in the stdlib REPL

  • minimalist: Enough said.

A screenshot of stdlib's

  • monokai: The one and only.

A screenshot of stdlib's monokai theme when enabled in the stdlib REPL

In order to change to the theme of your choice, use the REPL settings() command.

In [1]: settings( 'theme', 'solarized' ) 
Enter fullscreen mode Exit fullscreen mode

Customization

You can create your own syntax highlighting themes using a theme definition. A theme definition is an object mapping each token type to its corresponding color. The following code snippet shows the theme definition for the monokai theme.

const monokai = {     // Keywords:     'control': 'brightRed',     'keyword': 'italic brightCyan',     'specialIdentifier': 'brightMagenta',      // Literals:     'string': 'brightYellow',     'number': 'brightBlue',     'literal': 'brightBlue',     'regexp': 'underline yellow',      // Identifiers:     'command': 'bold brightGreen',     'function': 'brightGreen',     'object': 'italic brightMagenta',     'variable': null,     'name': null,      // Others:     'comment': 'brightBlack',     'punctuation': null,     'operator': 'brightRed' } 
Enter fullscreen mode Exit fullscreen mode

For the full list of supported tokens, see the REPL documentation.

Pro tip: Use the getTheme() REPL command to find out how a theme was built.

In [1]: getTheme( 'solarized' ) 

Currently, the REPL supports ANSI colors, such as black, red, green, yellow, blue, magenta, cyan, and white, and their brighter variants, such as brightBlack and brightRed.

For more expressive themes, you can use styles, such as bold, italic, underline, strikethrough, and reversed, and background colors, such as bgRed and bgBrightRed.

Lastly, you can go wild by mixing and matching any of the above colors, styles, and background colors. So something like the following works:

italic red bgBrightGreen 
Enter fullscreen mode Exit fullscreen mode

A screenshot of the string 'ridiculous' stylized with italic font, green background, and red foreground text

Some might say this looks ridiculous, but good to know the REPL supports the ridiculousness!

Adding your own theme

To add your theme, use the addTheme() REPL command, as shown in the following REPL snippet.

In [1]: const theme = {     'string': 'italic red bgBrightGreen',     'keyword': 'bold magenta',     // Be the artist... };  In [2]: addTheme( 'bestThemeEver', theme ) 
Enter fullscreen mode Exit fullscreen mode

Change your mind and added something you don't like? No worries. Just use the deleteTheme() REPL command to send the theme into oblivion, as in the following REPL snippet.

In [5]: deleteTheme( 'worstThemeEver' ) 
Enter fullscreen mode Exit fullscreen mode

Want to call your theme something different? We've got you covered. Just use the renameTheme() REPL command, as in the following REPL snippet.

In [6]: renameTheme( 'bestThemeEver', 'secondBestThemeEver' ) 
Enter fullscreen mode Exit fullscreen mode

If you prefer spooky action at a distance, simply use the corresponding REPL prototype methods for the above operations. Refer to the REPL documentation for the full list of REPL commands and prototype methods related to syntax highlighting and everything else.

Let's wrap this up

Time to end this post with a quote:

“Coding without syntax highlighting is like trying to read a book with all the words in the wrong order—frustrating, confusing, and not nearly as fun!”

— ChatGPT 4o mini

Boy ain't that the truth!

The stdlib REPL is in constant development, so feel free to reach out with new ideas and identified issues. Your feedback is appreciated and hugely important!

We've got some more REPL news and notes in the pipeline, so stay tuned for the drip. Until next time, cheers and happy REPLing!


Snehil Shah is a computer science undergrad, an audio nerd, and a contributor to stdlib.


stdlib is an open source software project dedicated to providing a comprehensive suite of robust, high-performance libraries to accelerate your project's development and give you peace of mind knowing that you're depending on expertly crafted, high-quality software.

If you've enjoyed this post, give us a star 🌟 on GitHub and consider financially supporting the project. Your contributions and continued support help ensure the project's long-term success and are greatly appreciated!

javascriptnodeprogrammingwebdev
  • 0 0 Answers
  • 0 Views
  • 0 Followers
  • 0
Share
  • Facebook
  • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

Sidebar

Ask A Question

Stats

  • Questions 4k
  • Answers 0
  • Best Answers 0
  • Users 2k
  • Popular
  • Answers
  • Author

    ES6 - A beginners guide - Template Literals

    • 0 Answers
  • Author

    Understanding Higher Order Functions in JavaScript.

    • 0 Answers
  • Author

    Build a custom video chat app with Daily and Vue.js

    • 0 Answers

Top Members

Samantha Carter

Samantha Carter

  • 0 Questions
  • 20 Points
Begginer
Ella Lewis

Ella Lewis

  • 0 Questions
  • 20 Points
Begginer
Isaac Anderson

Isaac Anderson

  • 0 Questions
  • 20 Points
Begginer

Explore

  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help

Footer

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise

Querify Question Shop: Explore, ask, and connect. Join our vibrant Q&A community today!

About Us

  • About Us
  • Contact Us
  • All Users

Legal Stuff

  • Terms of Use
  • Privacy Policy
  • Cookie Policy

Help

  • Knowledge Base
  • Support

Follow

© 2022 Querify Question. All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.