PIE - Prism integrated editor
Edit: Who wants us to add HTML, CSS and JS support next as well as a new dashboard for multiple containers? please write your response in the comments below ;)
When @MarcusWeinberger made his note-taking app that used markdown, I got inspired to create an editor - without using any code editor (Ace, Monaco and Code Mirror) apart from my own. (which uses an editable code block)
That is exactly what PIE is.
- Feather Icons.
- Prism.JS syntax highlighter (supports every language out there).
- Marked.JS for markdown rendering.
I needed to look at a lot of stack overflow questions to solve the cursor going back to the start when it is highlighted again but I eventually found the right one. (https://stackoverflow.com/questions/4576694/saving-and-restoring-caret-position-for-contenteditable-div)
There are some bugs on it (they are on the "template.")
If you have suggestions to improve this, please do share them.
If you like it, please click the upvote button so I know that I can make more stuff like this.
I really want to add other languages to this - so i am open to those who know how to get a language like python into JS as a console and how know to create a save function.
I have transferred the repl to my team so we can start working on it, feel free to join.
The repl is now fully open-source here. Feel free to start creating issues and create push requests.
you can now view the repl here.
I've got a 100 cycle special in the works -
A language called Slice to go with PIE. it is a Basic like language, yet mixed with python. that would not be completed on time
sorry guys, it has had to be cancelled due to being 3 away from 100 - it has been going waaay too fast.
I really wanted to get something out. D:
DUE to the capability of my language (tested with @MarcusWeinberger for the first timed test, he admitted it was "speedy".)
The time to print 100 times in a loop and interpret was the following
The average being 0.00644607544 seconds
speedy? we think so.
this means that it should be able to print 1000 lines in about 0.06 seconds on average.
Correct, but the fastest was 0.03609776496887207 seconds.
To print 10000 lines, one of the fastest I got was 0.3364229202270508, to show you proof that I am not lying, here is a screenshot.
Even if this wasn’t as awesome as it is I still would have upvoted just for the acronym XD
also, "Prism Integrated Editor" analysis here...
"Prism integrated" means that it uses prism.js but "integrated" means it uses that module, but prism.js is not the editor, only the syntax highlighter.
we are going to be doing more stuff with this, like creating a mini repl.it, maybe use it in a blog or two etc. We are continuing to update the editor right now. maybe make it like repl.it's editor. the major difference being is that you won't loses your progress on disconnect.
if we do multiplayer on it, we might introduce a feature which will just merge changes made from every person after they reconnect. Even then, we will make sure the server runs well so that rarely happens. With repl.it, I'd say a disconnection is a feature in it's own right because it is so common. @Highwayman
But what features would you want included in the website that we will make as our group is mainly about the audience, not entirely about ourselves.
Hm... What happened to NPMG? I crashed, and next thing I know I'mm kicked out and all files are gone? Is this a bug in repl?
I'm pretty sure I can revive the code... but what happened exactly?
mate what are you playing at? u can't type anything... how has nobody pointed it out after 8 days of release. this bug has been here since day 1. 38 upvotes and no indication of anyone acknoledging this...
no one has told me any bugs, apart from @BobTheTomatoPie, please give details of the bug as no issues have been opened in the REPO, nor am I a fortune teller or a physic unless is is about not being able to edit on Firefox or Edge codename "Spartan" as I found that bug this morning. The disability is die to the contenteditable tag not working correctly in some browsers, I am trying to find a solution. @agent9002
can i eat it
hahaha, i'll get a language dine soon called Slice. So yes you'll be able to soon.
you can fork this project on github (https://github.com/Poly-Development/PIE-Nodejs) and run it on replit. I made sure to make it as simple as possible to run. @AnthonyValdes
Can you make a Tutorial post about how you setup Prism.js for your editor, I have made a live code editor and want to use Prism.js for syntax highlights, but I dunno how to install and setup it. :(((((((
yes, i have light and dark theme on it. you need to change the href value in the <link> tag. you also must not use both light and dark css files at once, you can view a tutorial here - https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/. @BobTheTomatoPie
i currently have the following features down.
- HTML, CSS and JS editor
- Dashboard containing:
- Containers (where programmers do programming)
- drag and drop insert images directly into the file
- folders to allow more complicated, multi-page projects
- login page
- sharing page for people to share thier projects
and the following bug (or bugs):
- JS does not run in markdown editor but HTML and CSS does.
I love how the main page is the default and that you can edit it
i could go further
if i really want to, i could make my websites editable. You know, edit a text there and here (Bicycle -> Tricycle) in a <p> element.
change the header, that stuff without ever touching a code editor on the client end.