Skip to content
← Back to Community
Code Runner
Profile icon
sojs

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!

Voters
Profile icon
superguy123456
Profile icon
AtriDey
Profile icon
MemeManHimself
Profile icon
johnnyfrancis
Profile icon
MarcusWeinberger
Profile icon
TheForArkLD
Profile icon
AgastyaSandhuja
Profile icon
Rumble330
Profile icon
DynamicSquid
Profile icon
KobeFF
Comments
hotnewtop
Profile icon
MarcusWeinberger

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; } } }
Profile icon
sojs
Profile icon
xxpertHacker

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

Profile icon
MarcusWeinberger

@xxpertHacker probably

Profile icon
xxpertHacker
Profile icon
icelite

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

Profile icon
sojs

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

Profile icon
sojs

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

Profile icon
icelite

thank you! @sojs

Profile icon
icelite

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

Profile icon
sojs

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

Profile icon
[deleted]

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

Profile icon
sojs

No, not at all! @FluidCycling

Profile icon
DynamicSquid

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

Profile icon
sojs
Profile icon
[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

Profile icon
EpicGamer007

@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?

Profile icon
xxpertHacker

@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.

Profile icon
sojs

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

Profile icon
firefish

@sojs Agreed With @ZDev1, Make syntax colouring like https://just-me-being-silly.firefish.repl.co/ for instance

Profile icon
zplusfour

@firefish this is amazing

Profile icon
firefish

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

Profile icon
firefish

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

Profile icon
zplusfour

@firefish heh nice

Profile icon
zplusfour

@firefish oh k
nice

Profile icon
firefish

@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; }
Profile icon
zplusfour

@firefish wow thanks!

Profile icon
firefish
Profile icon
zplusfour

this is cool
but add colors to the code
like:

const hi = "hi"; console.log(hi);
Profile icon
StringentDev

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.

Profile icon
sojs

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

Profile icon
sojs

What is yours? @Lethdev2019

Profile icon
StringentDev

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

Profile icon
sojs

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

Profile icon
sojs

Same with
@Lethdev2019

Profile icon
StringentDev

no i meant in MONACO its self @sojs

Profile icon
sojs

What is monaco? @Lethdev2019

Profile icon
StringentDev

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

Profile icon
sojs

oh, cool. @Lethdev2019

Profile icon
StringentDev

i am using it. @sojs

Profile icon
DungeonMaster00

glitchy but good luck improving

Profile icon
PYer

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

Profile icon
sojs

Im lazy lol. It was a good description @PYer

Profile icon
gibbsfreenergy

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

Profile icon
gibbsfreenergy

@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?

Profile icon
sojs

Because js is easy to implement @JosephSanthosh

Profile icon
sojs

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

Profile icon
PYer

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

Profile icon
gibbsfreenergy

@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.

Profile icon
sojs

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

Profile icon
gibbsfreenergy

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

Profile icon
StringentDev

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

Profile icon
sojs

Oh, thanks @Lethdev2019

Profile icon
sojs

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

Profile icon
PYer

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

Profile icon
firefish

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