Share your repls and programming experiences

← Back to all posts
Code Runner
sojs (341)

This amazing project I worked on with @PYer.

What is CodeRunner?

Introducing... The (almost) most bestest, text editor: CodeRunner

Probably the project best deserving the title of "Text Editor". It allows you to to many things, like editing text! But wait! That's not all it does, it can also run JavaScript code here on the site, and many other languages on repl.it

What Languages Can I Use?

CodeRunner can interact with over 50+ languages through repl.it.

JavaScript is the only language that can be run entirely through CodeRunner. With the new "Try On Repl.it" button, you can auto-generate a REPL on the site in a selected language and then run/edit the code on the separate environment. Pretty neat, huh?

Who Created This Stunning Project?

The great computer scientists, @PYer and @sojs

To get into the specifics, PYer is responsible for the stylesheet and the text that you're reading right now. SoJs worked on the back end, and the ability to run code and allow you to run it on repl.it. The one part were claim can be debated lies in the header at the top left of the page. SoJs is responsible for the letters appearing one by one, whereas pyer is responsible for the blinking cursor and glowing text.

Now you know what it is, what it does, and who made it. But how do you use it?

How to use:

  • go to https://code-runner.sojs.repl.co
  • read and then delete the comments, taking care not to delete anything else, otherwise, you might delete the line numbers. (Small bug, if anyone has ideas, please comment!)
  • Code in a language of your choosing!
  • If you are running vanilla JS, hit Run, or CTRL+Enter

Remember to upvote!

Comments
hotnewtop
MarcusWeinberger (785)

Wow this is super cool! One thing, can you make it so you can press tab inside the editor and it wont change to the next button or whatever? This should do it:

var textareas = document.getElementsByTagName('textarea');
var count = textareas.length;
for(var i=0;i<count;i++){
    textareas[i].onkeydown = function(e){
        if(e.keyCode==9 || e.which==9){
            e.preventDefault();
            var s = this.selectionStart;
            this.value = this.value.substring(0,this.selectionStart) + "    " + this.value.substring(this.selectionEnd);
            this.selectionEnd = s+4; 
        }
    }
}
xxpertHacker (930)

@MarcusWeinberger I have the feeling that you just grabbed that off of an ancient Stack Overflow post :\

TheNethrRaven (86)

Hello! Could I fork this and update it a bit? I had a few ideas

sojs (341)

sure, sure. I totally broke it when I added the syntax highlighting though. @TheNethrRaven

sojs (341)

Okay, I just cleaned it up a bit. @TheNethrRaven
(but just a bit. It is still really buggy)

TheNethrRaven (86)

haha, i am gonna even buy a domain for this @sojs

sojs (341)

ya! If you can improve it a bunch, go ahead! @TheNethrRaven

[deleted]

Wow awesome @sojs Would u mind working with me to create something with node.js??

DynamicSquid (4928)

And yet another project that makes me even more jealous of fullstack devs. Well done on this!

[deleted]

@DynamicSquid actually it isn't full stack, it's just a fancy layout to get redirected to https://repl.it/languages/Yourlanguage?code=YourCode

EpicGamer007 (1736)

@DynamicSquid, I thought you were fullstack? Isn't c++ backend? And you know html, css, and I know you know some js. Shouldn't that make you a full stack dev?

xxpertHacker (930)

@AbhayBhat @DynamicSquid
Seriously, it's effortless to become a full-stack, probably easier that front-end or back-end on their own since you have complete control over everything, more control, at the cost of more debugging, but at least you understand what both sides of your code is doing.

sojs (341)

I'm with. @AbhayBhat, your image revealer is definetly both front and back end. @DynamicSquid

firefish (948)

@ZDev1 that took two days straight of mucking about, but that's my favourite repl.it theme re-made in css

firefish (948)

@ZDev1 I use the theme every day, nothing special to me really

firefish (948)

@ZDev1 if you want: here's the css to inject

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,[email protected],400;0,700;1,500&display=swap');
.view-lines, .line-numbers {
    font-family: 'IBM Plex Mono', monospace !important;
} .view-line, .line-numbers {
    font-weight: 400 !important;
    transform-origin: left;
    transform: scaleX(calc(11/12));
}
/* The FireFish repl.it theme version 1.0 */
.mtk1 {
    color: #caa11aee !important;
}
.monaco-editor.vs-dark .keyword.operator, .monaco-editor.vs-dark .operator, .monaco-editor.vs .keyword.operator, .monaco-editor.vs .operator, .mtk17 {
    color: #d43d0f !important;
}
.monaco-editor.vs-dark .keyword, .monaco-editor.vs .keyword, .mtk9, .mtk3,.mtk31, .mtk21, .monaco-editor.vs .constant.language {
    color: #a4db0b !important;
}
.monaco-editor.vs-dark .string, .monaco-editor.vs .string, .mtk5 {
    color: #c2bf15fe !important;
    font-weight: 700 !important;
}

.mtk1.function.support {
    color: #bb1b1b !important;
    font-style: italic !important;
    font-weight: 500 !important;
}
.monaco-editor.vs-dark .number, .monaco-editor.vs-dark .numeric, .monaco-editor.vs .number, .monaco-editor.vs .numeric, .mtk6 {
    color: #ff35aa !important;
}
.mtk4, .mtk23, .mtk19 {
    color: #55ccff !important;
}
.monaco-editor.vs-dark .comment, .monaco-editor.vs .comment, .mtk8 {
    color: #cc00cc !important;
    font-style: italic !important;
    font-weight: 500 !important;
}
.monaco-editor.vs-dark .constant.escape, .monaco-editor.vs .constant.escape {
    color: #777700 !important;
}
.monaco-editor.vs-dark .function, .monaco-editor.vs .function {
    color: #5555ff !important;
}
.monaco-editor.vs-dark .class-name, .monaco-editor.vs .class-name {
    color: #ccff55 !important;
}
.mtk1.punctuation, .mtk12.punctuation, .mtk1.paren, .mtk1.paren, .mtk1.rparen, .mtk1.lparen, span.mtk12.lparen.paren, span.mtk12.paren.rparen, .mtk12.template-string {
    color:  #1287ff !important;
}
.line-numbers {
    color: #ff7626ad !important;
    font-weight: 700 !important;
}
zplusfour (901)

this is cool
but add colors to the code
like:

const hi = "hi";
console.log(hi);
StringentDev (229)

Similar to mine, it does need work but overall, i commend it!

for starters, the fact that you can open this on repl.it is actually quite an interesting idea except for the fact that it all goes into one line.

there are unneeded features like the alert(code) as you'll see the code in the repl anyway.

TIP: if you want to run python in the browser, there is a JS library called brython.

sojs (341)

Ya, I'm not sure how to make it span multiple lines. Even the replit extension does that! Maybe <br>? @Lethdev2019

StringentDev (229)

br means line break so yes. you can also use \n in monaco. @sojs

sojs (341)

No for the \n, because replit interprets that as code, so it is still on one line, just with the added "\n" @Lethdev2019

StringentDev (229)

no i meant in MONACO its self @sojs

StringentDev (229)

the editor made my Microsoft that repl.it and vscode use. @sojs

DungeonMaster00 (190)

glitchy but good luck improving

PYer (4009)

wait a moment, you just used the description i put in the website :)

sojs (341)

Im lazy lol. It was a good description @PYer

JosephSanthosh (1181)

Lol! why did text-editors become such a big thing the past month? @sojs

JosephSanthosh (1181)

@sojs So what is the point of having 50+ languages in this text editor when you can only code on js, so all other languages you need to try through repl.it so why have the 49 other languages?

sojs (341)

Because js is easy to implement @JosephSanthosh

sojs (341)

Actually, I've been working with @pyer on this for about 6 months, with 1 week, 5.5 month break, and one more week, @JosephSanthosh

PYer (4009)

We've actually worked for a long time on this project. We experinced major bugs at the start, kind of gave up, and then came back. But this project started last year. @JosephSanthosh

JosephSanthosh (1181)

@PYer WOW! Good Job! But it kind of pointless to have all the languages accept JS in this code as you have to do it through repl.it and that's what every post or code in repl.it is made through.

sojs (341)

We'll may update that later with the replit code running API (I forget what its called) @JosephSanthosh

JosephSanthosh (1181)

It's like making a mini repl.it but to code through the languages you have to use repl.it, which defies the point of making this. GOOD JOB BTW @PYer

StringentDev (229)

@sojs @PYer
The repl.it code running API is deprecated as you can find here: https://repl.it/site/api

sojs (341)

The point is to make code more readable with highlighting instead of normal [email protected]

PYer (4009)

hmmmm... I'll have to look into that. I feel like they may have already made a better version, but haven't publicly announced it yet. @Lethdev2019

firefish (948)

@sojs
eval("eval(\"console.log(\\"hehe\\");\");")